Shulou(Shulou.com)06/02 Report--

This article is about Javascript implementation of Bootstrap grid system, navigation bar and carousel content. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

Introduction to bootstrap and related content

Bootstrap is a front-end framework for rapid development of Web applications and websites. A certain basic template is required at that time:

Bootstrap 101 Template grid system

Bootstrap divides the page or containerized atmosphere into 12 horizontal equal parts, and the rows must be placed within the.container class for proper alignment and padding. Twelve horizontal aliquots were distributed using col-lg-("number").

1 2 3 4

column nesting a b column offset

Use.col-md-offset-* to shift columns to the right

toilet seat right side column sort

Usually used for box reversal order

toilet seat right side

navigation bar

Add class .navbar,.navbar-default to the label.

Adding role="navigation" to the element above helps increase accessibility.

Element adds a header class .navbar-header that contains elements with class navbar-brand inside. This will make the text look bigger.

To add links to the navigation bar, simply add an unordered list with class .nav,.navbar-nav.

The demonstration is as follows:

Bootstrap 101 Template Toggle navigation Rookie tutorial iOS SVN Java jmeter EJB Jasper Report Separate links Another separate link

global interface

small window interface

carousel

The Bootstrap Carousel plugin is a flexible and responsive way to add sliders to a site. In addition, the content is flexible enough to be images, inline frames, videos, or any other type of content you want to place.

Example demonstration:

Previous Next

Thank you for reading! About "Javascript how to implement Bootstrap grid system, navigation bar and carousel" This article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.