Bootstrap common development knowledge (focus on screenshots)
1 The layout container is as follows
!-- Fixed width 1170px --> <div class="container">container</div> <!-- width 100% --> <div class="container-fluid">container-fluid</div>2 Content layout
<h1 class="page-header">Here is the underline of the big header</h1> <small>Subtitle one size smaller</small> <big>Subtitle Big One</big> <strong>Subtitle</strong> <em>italic</em> <del>Delete</del>3 text alignment
.text-left left .text-center middle .text-right right
<p class="text-uppercase">[letters in all capitals]I'm uppercase</p> <p class="text-lowercase">[letters are all lowercase]I am upper information</p> <p class="text-capitalize">[initial capitalize] I am upper information</p>4 List styles
.list-unstyled remove the small dot in front of the list
.list-inline horizontal arrangement
<ul class="list-unstyled list-inline"> <li>spring</li> <li>mybatis</li> <li>html5</li> </ul>5 Customize
.dl-horizontal horizontal list display
<dl class="dl-horizontal"> <dt>Custom List Header</dt> <dd>Custom List Details</dd> </dl>
6 Forms
table base style
table-bordered plus border
table-hover mouseover changes color
table-striped interlaced color change
table-condensed reduces row height
<table class="table table-bordered table-hover table-striped table-condensed"> <tr><th>标题1</th><th>标题2</th></tr> <tr><td>内容01</td><td>内容02</td></tr> <tr><td>内容11</td><td>内容12</td></tr> <tr><td>内容21</td><td>内容22</td></tr> <tr><td>内容31</td><td>内容32</td></tr> <tr><td>内容41</td><td>内容42</td></tr> </table>table-responsive is added to the parent element of the table, and a scroll bar will appear if it cannot be displayed
<div class="table-responsive"> <table class="table table-bordered table-hover table-striped table-condensed"> <tr><th>Title 1</th><th>Title 2</th><th>Title 1</th><th>Title 2</th><th>Title 1</th><th >Title 2</th></tr> <tr><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr> <tr><td>内容11</td><td>内容12</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr> <tr><td>内容21</td><td>内容22</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr> <tr><td>内容31</td><td>内容32</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr> <tr><td>内容41</td><td>内容42</td><td>内容01</td><td>内容02</td><td>内容01</td><td>内容02</td></tr> </table> </div>
7 picture adaptive size
img-responsive image adaptive size
img-circle ellipse image
img-rounded rectangle with four corners
img-thumbnail rectangle with borders
<!-- width 100% --> <div class="container-fluid"> <img alt="自适应图片" src="images/big.jpg" class="img-responsive img-thumbnail "> </div>
8 grid systems (xs,sm,md,lg)
col-md-offset-2 offset by 2 units
col-md-pull-2 move 2 units to the left
col-md-push-2 move 2 units to the right
9 Auxiliary classes
drop-down triangle<span class="caret"></span>
fast float pull-left float left pull-right float right
Clear the floating clearfix to add to the parent box
10 Forms
<form action=""> <div class="form-group"> <label for="cemail">邮箱</label> <input type="email" name="cemail" id="cemail" class="form-control"> </div> <div class="form-group"> <label for="pwd">密码</label> <input type="password" name="pwd" id="pwd" class="form-control"> </div> <div class="form-group"> <label for="phone">手机</label> <input type="text" name="phone" class="form-control"> </div> <div class="form-group"> <label class="checkbox-inline"><input type="checkbox" name="hobby">HTML</label> <label class="checkbox-inline"><input type="checkbox" name="hobby">Spring</label> <label class="checkbox-inline"><input type="checkbox" name="hobby">SpringMVC</label> </div> <div class="form-group"> <label class="radio-inline"><input type="radio" name="sex">男</label> <!-- Add two disables --> <label class="radio-inline disabled"><input type="radio" name="sex" disabled>女</label> </div> </form>
add form-control to the data frame <input>, <textarea>
form-group adds styles to the parent element of the input box
checkbox-inline adds styles to <lable> tags
radio-inline adds styles to the <lable> tag
11 Combining Data Frames
input-group-addon adds the content of the group
add input-group to parent element
<div class="form-group"> <div class="input-group"> <span class="input-group-addon">查询</span> <input type="text" class="form-control" name="search"> </div> </div> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control" name="search"> <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> </div> </div>
12 Responsive Forms
Display form-inline in the form line
Combine the grid system to form a responsive form-horizontal
Note: The grid system cannot be added to the input tag, you need to apply the parent element div or span
<form action="" class="form-horizontal"> <div class="form-group"> <label for="uname" class="col-md-2 col-sm-4 col-xs-5 text-right">邮箱</label> <div class="col-md-10 col-sm-8 col-xs-7"> <input type="text" name="uname" id="uname" class="form-control"> </div> </div> <div class="form-group"> <label for="pwd" class="col-md-2 col-sm-4 col-xs-5 text-right">密码</label> <div class="col-md-10 col-sm-8 col-xs-7"> <input type="password" name="pwd" id="pwd" class="form-control"> </div> </div> </form>
13 Buttons and Button Groups
btn-group means button group
<div class="btn-group"> <button class="btn btn-primary">button按钮</button> <input class="btn btn-info" type="button" value="input按钮"> <a href="#" class="btn btn-danger">a标签按钮</a> </div>
14 Drop-down menu
dropdown-menu drop-down list content ul plus style
dropdown-menu-left drop-down list alignment
dropdown-menu-right drop-down list alignment
dropdown div containing buttons and lists plus styled ul parent element
data-toggle button trigger
There must be no content in the middle of the divider dividing line <li>
<div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> Dropdown button<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">html</a></li> <li><a href="#">css</a></li> <li class="divider"></li> <li><a href="#">react</a></li> <li><a href="#">java</a></li> </ul> </div>
15 tabs
Base class for nav tabs
nav-tabs normal tabs
nav-pills capsule tab
<ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">tab-one</a></li> <li><a href="#">tab-two</a></li> </ul>
16 Navigation bar
navbar Navigation bar base class for <nav> elements
navbar-default Default navbar style, used for <nav> elements
container is a child element of <nav> where the navigation bar content is placed
navbar-header navigation bar header style
collapse collapsed navbar style base class
navbar-collapse Collapse navigation bar style
Link base class for nav navigation bar
navbar-nav link style for navbar
navbar-left and navbar-right component arrangement, navigation links, buttons and text alignment
navbar-fixed-top The navbar is fixed to the top, for <nav> elements
navbar-fixed-bottom navbar is fixed to the bottom for <nav> elements
navbar-inverse can implement inverse color navigation for <nav> elements
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- The header of the page --> <div class="navbar-header"> <a href="#"><img alt="图片" src="path"></a> </div> <!-- Navigation Links--> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">关于我</a></li> </ul> </div> </div> </nav>
17 Has an adaptive navigation bar
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <!-- The header of the page --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-align-justify"></span></a> </div> <!-- Navigation Links--> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">关于我</a></li> </ul> </div> </div> </nav>