Bootstrap is a mobile-first front-end framework with many styles that can simplify the writing of CSS.
To develop bootstrap pages, you need to introduce css and js
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- New Bootstrap core CSS file --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery file. Be sure to introduce it before bootstrap.min.js --> <script src="//i2.wp.com/cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- The latest Bootstrap core JavaScript files --> <script src="//i2.wp.com/cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- New Bootstrap core CSS file --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> \t\t <!-- jQuery file. Be sure to introduce it before bootstrap.min.js --> <script src="//i2.wp.com/cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> \t\t <!-- The latest Bootstrap core JavaScript files --> <script src="//i2.wp.com/cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <title></title> </head> <body> </body> </html>
| Ultra-small device mobile phone (<768px) | Small device tablet (>=768px) | Medium-sized device desktop computer (>= 992px) | Large equipment desktop computer (>=1200px) |
|---|---|---|---|
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
Table
basic structure
<table> <thead> <th></th> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
- table-striped: striped
- table-bordered: with border
- table-hover:hover with light gray background
- table-condensed: streamlined table
- Responsive form
<div class="table-responsive"></div>
Form
form-horizontal: horizontal form
- Add class .form-horizontal to the form element
- Put the labels and controls in a div with class .form-group
- Add class .control-label to label
Form type
- input: input box
- textarea: text box
- checkbox: check box
- radio: radio button
- select: selection box
Form layout
You can use col-sm-* to specify the size of the control
<form role="form"> <div> <label class="col-sm-2">Name</label> <div class="col-sm-6"> <input class="form-control" id="name" placeholder="Please enter the name"> </div> </div> <form>
Button
The following class attributes can be used for a, button, input
- btn-default: default
- btn-promary:original
- btn-link: link button
- btn-success: success button
- btn-danger: danger button
- btn-warning: warning button
- btn-info: information button
- btn-lg: Make big buttons
- btn-sm: Make small buttons
- btn-xs: Make super small buttons
- active:activated state
- disabled: disabled
Button group
Use .btn-group in div to create button group
- btn-group-lg|sm|xs: Control the size of the button group
- btn-group-vertical: Set vertical buttons
- btn-group-justified: Set an adaptive size button group
<div class="container"> <div class="col-sm-2 col-xs-1"> <div class="btn-group-vertical"> <a class="btn btn-primary">Link 1</a> <a class="btn btn-primary">Link 2</a> <a class="btn btn-primary">Link 3</a> <a class="btn btn-primary">Link 4</a> <div class="btn-group-vertical"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Link 5</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> \t\t\t\t</ul> </div> </div> </div> </div> -- drop down <a class="dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> </ul>
Drop-down menu
Create drop-down menu
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> Topic<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Drop-down menu title</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">java</a> \t\t</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">java</a> \t\t</li> \t\t</li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Drop-down menu title</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">java</a> \t\t</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">java</a> \t\t</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">java</a> \t\t</li> \t</ul> </div>
- dropdown-menu-right: dropdown menu right aligned
- dropdown-header: Add a title to the drop-down menu
- dropup: specifies the drop-down menu that pops up
- disabled: Disabled items in drop-down menu
- divider: the dividing line in the drop-down menu
Button
- btn-group: button group
- btn-toolbar: Button toolbar
- btn-group-lg, btn-group-sm, btn-group-xs: resize buttons
- btn-group-vertical:vertical button
- spn.caret drop down arrow
Collapse
- data-toggle=”collapse”: added to the component that controls the drop-down
- href or data-target: added to the component that controls the drop-down, its value is the id of the child component
- data-parent: Add the id of the accordion to the link of the component to be expanded or collapsed
- collapse(options): Activate content as a collapsible element, $(selector’).collapse({toggle:false})
- collapse(toggle’): Switch to show/hide collapsible elements, $(selector’).collapse(toggle’)
- collapse(show’): Display collapsible elements, $(selector’).collapse(show’)
- collapse(hide’): Hide collapsible elements, $(selector’).collapse(hide’)
<button class="btn" data-toggle="collapse" data-target="#meun_one_sub">Menu one</button> <div id="meun_one_sub" class="collapse in"> <a class="btn btn-primary col-sm-12" href="#">Menu 1.1</a> <a class="btn btn-primary col-sm-12" href="#">Menu 1.2</a> <a class="btn btn-primary col-sm-12" href="#">Menu 1.3</a> <a class="btn btn-primary col-sm-12" href="#">Menu 1.4</a> <a class="btn btn-primary col-sm-12" href="#">Menu 1.5</a> </div>
Navigation elements
Create a tabbed navigation menu
- Start with an unordered list with class.nav
- Add class.nav-tabs
- class.nav-pills replaces nav-tabs: Change labels to capsule style
- class.nav-stacked: Used together with class.nav and .nav-pills to stack capsules vertically
- nav-justified: Make the label or capsule navigation menu the same width as the parent element
- disabled: Create a gray link and disable the :hover state of the link
- Drop-down menu
- Start with an unordered list with class.nav
- Add class.nav-tabs
- Add an unordered list with .dropdown-menu class
- Click the label to switch the display content
- data-toggle=”tab”: Place it on the tab that needs to be switched
- .tab-content: placed on the displayed element
- .tab-pane: placed on the elements that need to be displayed specifically
<div class="container"> <h2>Dynamic tags</h2> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> \t</ul> <div class="tab-content"> <div id="home" class="tab-pane active"> <h3>Homepage</h3> <p>Tutorial for newbies - what you learn is not only technology, but also a dream! ! !</p> </div> <div id="menu1" class="tab-pane"> <h3>Menu 1</h3> <p>This is the content displayed in menu one</p> </div> <div id="menu2" class="tab-pane"> <h3>Menu 2</h3> <p>This is the content displayed in menu two! ! !</p> </div> <div id="menu3" class="tab-pane"> <h3>Menu three</h3> <p>This is the content displayed in menu three! ! !</p> </div> </div> </div>
Navigation bar
Create navigation bar
- Add class.navbar, .navbar-default to nav tags
- Add role=”navigation” to the above element to help increase accessibility
- Add a header class.navbar-header to the div element, which contains an a element with class navbar-brand
- To add a link to the navigation bar, simply add an unordered list with class.nav, .navbar-nav
Related properties
- .navbar-form: Navigation bar form
- navbar-button: navigation bar button
- navbar-text: Navigation bar text
- class glyphicon glyphicon-* to set the icon and put it in the span element
- .navbar-left or navbar-right align left or right
- .navbar-fixed-top,navbar-fixed-bottom fixed to the top or bottom
- .navbar-static-top: Create a navigation bar that scrolls with the page
- .navbar-inverse: Create an inverse navigation bar with black and white text
Responsive navigation bar
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">XXX system</a> </div> <div class="collapse collapse-navbar" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">IOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="data-toggle" data-toggle="dropdown">JAVA<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Detached link</a></li> <li class="divider"></li> <li><a href="#">Another detached link</a></li> \t\t\t\t\t</ul> \t\t\t\t</li> \t\t\t</ul> </div> </div> </nav>
Breadcrumb navigation: unordered list of .breadcrumb class
Paging
- .pagination
- Pagination size.pagination-*(pagination-lg pagination pagination-sm)
- ” & amp;laquo” ” & amp;raquo” direction indicators on the left and right of the page
Badges: badges are placed on span elements
<h4>Activation status in capsule navigation</h4>
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home page
<span class="badge">42</span>
</a>
</li>
<li>
<a href="#">Introduction</a>
</li>
<li>
<a href="#">Message
<span class="badge">3</span>
</a>
</li>
</ul>
<br>
<h4>Activation status in list navigation</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>Home</a>
</li>
<li>
<a href="#">Introduction</a>
</li>
<li>
<a href="#">
<span class="badge pull-right">3</span>Message
</a>
</li>
</ul>
Thumbnails
Thumbnail creation steps:
- Add a label with class.thumbnail around the image
- This adds four pixels of padding and a gray border
- When the mouse is hovered over the image, the outline of the image will be animated.
<div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="img/Landscape1.jpg" alt="This is a picture"> <div class="caption"> <h3>Thumbnail tag</h3> <p>some example text</p> <button class="btn btn-default">Button</button> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="img/Landscape1.jpg" alt="This is a picture"> <div class="caption"> <h3>Thumbnail tag</h3> <p>some example text</p> <button class="btn btn-default">Button</button> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img decoding="async" src="img/Landscape1.jpg" alt="This is a picture"> <div class="caption"> <h3>Thumbnail tag</h3> <p>some example text</p> <button class="btn btn-default">Button</button> </div> </div> </div> </div>
Warning .alert
- .alert-success,alert-info,alert-warning,alert-danger
- .alert-dismissable can cancel the warning
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
success! Well done to the submission.
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
information! Please note this information.
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
warn! Please do not submit.
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
mistake! Please make some changes.
</div>
Progress bar .progress
Panel class.panel and class.panel-default
Modal plug-in
usage:
- Through the data attribute: Set the attribute data-toggle=”modal” on the controller element (such as a button or link), and set data-target=”#identifier” or href=”#identifier” to specify the specific mode to be switched. status box
- Via JavaScript: Call modal with id=”identifier” $(#identifier’).modal(options)
- show.bs.modal: triggered after calling the show method
- shown.bs.modal: Triggered when the modal box is visible to the user
- hide.bs.modal: triggered when the hide instance method is called
- hidden.bs.modal: triggered when the modal box is completely hidden from the user
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start demo modal</button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> & amp;times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body">Add some text here</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Submit changes</button> </div> </div> </div> </div>
Carousel
carousel is a flexible and responsive way to add sliders to your site
- data-interval, the amount of time to delay between each item in the automatic loop. If false, the carousel will not automatically loop.
- data-pause: Pause the carousel loop when the mouse enters, and resume the carousel loop when the mouse leaves.
- data-wrap: Whether the carousel loops continuously
- .carousel(options): Initialize the carousel as an optional options object and start looping items.
- .carousel(cycle’): Cycles carousel items from left to right
- .carousel(pause’): Stop the carousel loop item
- .carousel(number’): Loop to a specific frame
- .carousel(prev’): loop to the previous item
- .carouse(next’): Loop to the next item
- slide.bs.carousel: This event is triggered immediately when the slide instance method is called
- slide.bs.carousel: This event is triggered when the carousel completes the slide transition effect
<div id="myCarousel" class="carousel slide"> <!-- carousel indicator --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- carousel project --> <div class="carousel-inner"> <div class="item active"> <img decoding="async" src="img/ scenery1.jpg" alt="First slide"/> <div class="carousel-caption">Caption 1</div> </div> <div class="item"> <img decoding="async" src="img/ scenery1.jpg" alt="First slide"/> <div class="carousel-caption">Caption 1</div> </div> <div class="item"> <img decoding="async" src="img/ scenery1.jpg" alt="First slide"/> <div class="carousel-caption">Caption 1</div> </div> </div> <!-- Carousel navigation --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>