bootstrap是基于less、sass编写的，关于html、css、jquery的方法封装，
主要用于对页面的重写，突出特点：
1、响应式；2、栅格布局；3、支持bootSDN；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <style> .r{ background:red; color:white; } .y{ background:yellow; color:white; } .p{ background:pink; color:white; } .h{ height:50px; line-height:50px; } </style> </head> <body> <div> <div class="col-xs-2"></div> <div class="col-xs-8"> <p>关于bootstrap：</p> <p>1、在学习阶段，可将文件下载至本地导入使用，如上link方式；</p> <p>代码正式上线后，可使用CDN在网络上直接调用；</p> <p>bootCDN，可以理解为网络上的“静态资源存放”，方便就近操作调用，</p> <p>2、栅格:将屏幕等分12份，使用col-进行布局，可以嵌套</p> <p>col-xs- : 非响应式栅格 </p> <p>col-sm- : @media（min-width:750px;）</p> <p>col-md- : @media（min-width:970px;）</p> <p>col-lg- : @media（min-width:1170px;）</p> </div> <div class="col-xs-2"></div> </div> <div class="sm h"> <div class="col-sm-4 r">s</div> <div class="col-sm-4 y">s</div> <div class="col-sm-4 p">s</div> </div> <div class="md h"> <div class="col-md-2 r">m</div> <div class="col-md-5 y">m</div> <div class="col-md-5 p">m</div> </div> <div class="lg h"> <div class="col-lg-1 r">l</div> <div class="col-lg-3 y">l</div> <div class="col-lg-8 p"> <div class="sm h"> <div class="col-sm-4 r">s</div> <div class="col-sm-4 y">s</div> <div class="col-sm-4 p">s</div> </div> </div> </div> </body> </html>
注意：使用本地下载的bootstrap时，link导入bootstrap.css、script导入bootstrap.js， 网络上线后，使用bootCDN，
bootstrap是基于jquery的，使用前需要先导入jquery文件，
注意功能部分说明：
一、Glyphicons 字体图标
bootstrap 3 中提供的图标，全部以字体形式存在，可以通过font-size、color设置大小和颜色；具体使用见如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <style> </style> </head> <body> <!--自定义控件内无字体说明、只有一个图标，可为控件添加属性：aria-label="",进行说明，便于辅助设备识别--> <button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button> <!--.sr-only，说明非装饰作用的图标类含义，该标签视觉上隐藏，便于辅助设备识别--> <div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div> <!--aria-hidden="true"，表示图表类只用于装饰--> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star </button> <!--图表类需要单独标签作为基，通常使用span，后面可以跟随字体，也可以不跟，跟字体时需要留一个空格--> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-apple" aria-hidden="true"></span> </button> <!--图标以字体的形式存在，使用设置字体的方式调整大小和颜色--> <span class="glyphicon glyphicon-pushpin" aria-hidden="true" style="font-size:28px;color:blue;"></span> </body> </html>
二、按钮、按钮组、工具栏
多个按钮合在一起，构成按钮组；多个按钮组合在一起，构成工具栏；
按钮组可以设置：统一设置大小、嵌套、垂直显示、两段对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> </head> <body> <p>一组标签，彼此独立</p> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> <p>多个标签合在一起，是标签组</p> <div class="btn-group" role="group" aria-label="say something about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <br> <p>多个标签组合在一起，是工具栏</p> <div class="btn-toolbar" role="toolbar" aria-label="say something about the toolbar"> <div class="btn-group" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <hr> <p>调整按钮组大小</p> <div class="btn-group btn-group-lg" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">大些</button> <button type="button" class="btn btn-default">大些</button> <button type="button" class="btn btn-default">大些</button> </div> <p></p> <div class="btn-group" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">正常</button> <button type="button" class="btn btn-default">正常</button> <button type="button" class="btn btn-default">正常</button> </div> <p></p> <div class="btn-group btn-group-sm" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">小些</button> <button type="button" class="btn btn-default">小些</button> <button type="button" class="btn btn-default">小些</button> </div> <p></p> <div class="btn-group btn-group-xs" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">更小</button> <button type="button" class="btn btn-default">更小</button> <button type="button" class="btn btn-default">更小</button> </div> <p></p> <hr> <p>实现嵌套:把一个按钮组放到另一个按钮组中</p> <div class="btn-group" role="group" aria-label="grop in group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> <hr> <p>按钮组垂直显示</p> <div class="btn-group-vertical" role="group" aria-label="grop in group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> <hr> <p>垂直显示2</p> <div class="btn-toolbar" role="toolbar" aria-label="say something about the toolbar"> <div class="btn-group-vertical" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group-vertical" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <div class="btn-group-vertical" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> </div> <hr> <p>两端对齐，占满父级标签宽度,必须将每一个.btn放在group中，</p> <div class="btn-group btn-group-justified" role="group" aria-label="..."> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Left</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Middle</button> </div> <div class="btn-group" role="group"> <button type="button" class="btn btn-default">Right</button> </div> </div> <hr> </body> </html>
三、下拉菜单、上拉菜单
将菜单触发器和菜单内容都包裹在 .dropdown或.dropup 里，或者另一个声明了 position: relative;的元素如：.btn-group；
默认下拉菜单，且位置沿触发器下沿和左侧，可设置：靠右对齐（可根据需要添加父标签定位）、
另外，下拉\上拉菜单中还可以设置：内标题、分割线、禁用连接等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> </head> <body> <!--下拉菜单--> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <br><br><br><br><br><br><br><br><br> <!--上拉菜单--> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> <br> <!--设置菜单靠右对齐--> <div style="width:50%;"> <!--ul默认宽度100%，靠右对齐时需要根据情况，添加父标签定位；--> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> rightAlign <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu3"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <br> <!--在下拉内容中添加标题--> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> in-header <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu4"> <li class="dropdown-header">Dropdown header</li> <li><a href="#">Action</a></li> <li class="disabled"><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <!--用于为不同的连接分组--> <li><a href="#">Separated link</a></li> </ul> </div> <br> </body> </html>
四、按钮式下拉菜单
设置了6中不同颜色可以选择，可以设置尺寸、设置上拉\下拉，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> <style> body{ padding:20px; } </style> </head> <body> <!--下拉菜单--> <p>下拉菜单</p> <div class="dropdown"> <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <br> <!--按钮--> <p>按钮</p> <div class="btn-group" role="group" aria-label="about the group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div> <br> <hr> <br> <!--按钮式下拉菜单--> <p>按钮式下拉菜单div.btn-group与div.dropdown效果相同，有6种不同颜色可以选择,但是属性设置不同，不需要id、</p> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <br> <hr> <br> <!-- Split button --> <p>按钮式下拉菜单，可以进分割，需设置.sr-only</p> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <br> <hr> <br> <!-- 可以进行尺寸的设置 --> <p>按钮式下拉菜单，可以设置尺寸btn-</p> <div class="btn-group"> <button type="button" class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 大号lg <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 正常默认 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 小号sm <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 更小xs <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> <br> <hr> <br> <!-- 设置向上拉 --> <p>按钮式上拉菜单</p> <div class="btn-group dropup"> <button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 上拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </div> </body> </html>
五、输入框组
通过对input：text标签前后添加额外元素的方式，对表单控件进行扩展，一个框组内只需有一个input表单事件；
框组的一侧最多只能加一个：input-group-addon，但是可以添加多个：input-group-btn，
select、textarea不支持；radio、checkbox、button可以以额外元素进行添加，下拉选框也可以作为额外元素；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> <style>body{padding:20px;}</style> </head> <body> <!--在输入框的两侧，可以添加额外元素--> <p>输入框组的两侧可以添加额外元素,只能使用text文本，select、textarea不支持</p> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div><br> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div><br> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div><br> <label for="basic-url">Your vanity URL</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div><br> <!--可以调整大小--> <p>调整大小</p> <div class="input-group input-group-lg"> <span class="input-group-addon" id="basic-addon5">@</span> <input type="text" class="form-control" placeholder="input-group-lg" aria-describedby="basic-addon5"> </div><br> <div class="input-group"> <span class="input-group-addon" id="basic-addon6">@</span> <input type="text" class="form-control" placeholder="默认" aria-describedby="basic-addon6"> </div><br> <div class="input-group input-group-sm"> <span class="input-group-addon" id="basic-addon7">@</span> <input type="text" class="form-control" placeholder="input-group-sm" aria-describedby="basic-addon7"> </div><br> <p>可以将单选框、多选框、按钮作为额外元素添加到输入框组</p> <!--单选框、多选框可作为额外元素添加到输入框组--> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <br> <!--按钮也可作为额外元素，使用input-group-btn--> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <br> <!--可以将下拉菜单作为输入框组的额外元素--> <p>可以将下拉菜单作为输入框组的额外元素</p> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <br> <!--输入框组的一侧，只需添加一个input-group-addon，但是可以添加多个input-group-btn--> <p>输入框组的一侧，只需添加一个input-group-addon，但是可以添加多个input-group-btn</p> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> <button class="btn btn-default" type="button">B</button> <button class="btn btn-default" type="button">I</button> </div><!-- /btn-group --> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <div class="input-group-btn"> <button class="btn btn-default" type="button">B</button> <button class="btn btn-default" type="button">I</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> <br> </body> </html>
六、导航栏
导航栏tab需要与内容div和jquery动作结合，才能显示完整效果；可以自定义js，也可以使用js插件；
使用插件时，需要注意a标签锚点和对应id的设置，以及a标签的某些固定属性；
导航栏默认水平方向，可以设置垂直呈现、两侧对齐，也可以设置成胶囊样式，可以指定tab禁用，还可以添加下拉框tab，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> <style> body{ padding:20px; } .hide{ display:none; } </style> </head> <body> <!--<!–样式一–>--> <!--<ul class="nav nav-tabs">--> <!--<li role="presentation" class="active"><a href="#">Home</a></li>--> <!--<li role="presentation"><a href="#">Profile</a></li>--> <!--<li role="presentation"><a href="#">Messages</a></li>--> <!--</ul>--> <!--<!–样式二：胶囊式–>--> <!--<ul class="nav nav-pills">--> <!--<li role="presentation" class="active"><a href="#">Home</a></li>--> <!--<li role="presentation"><a href="#">Profile</a></li>--> <!--<li role="presentation"><a href="#">Messages</a></li>--> <!--</ul>--> <!--<!–样式三：垂直胶囊式–>--> <!--<ul class="nav nav-pills nav-stacked">--> <!--<li role="presentation" class="active"><a href="#">Home</a></li>--> <!--<li role="presentation"><a href="#">Profile</a></li>--> <!--<li role="presentation"><a href="#">Messages</a></li>--> <!--</ul>--> <!--<!–样式四：两段对齐式–>--> <!--<!–屏幕宽度大于768px时，两段对齐式显示；小于时，堆叠显示；–>--> <!--<ul class="nav nav-pills nav-justified">--> <!--<li role="presentation" class="active"><a href="#">Home</a></li>--> <!--<li role="presentation"><a href="#">Profile</a></li>--> <!--<li role="presentation"><a href="#">Messages</a></li>--> <!--</ul>--> <!--<!–tab直接添加disabled可以禁用–>--> <!--<ul class="nav nav-tabs">--> <!--<li role="presentation" class="active"><a href="#">Home</a></li>--> <!--<li role="presentation" class="disabled"><a href="#">Profile</a></li>--> <!--<li role="presentation"><a href="#">Messages</a></li>--> <!--</ul>--> <!--导航栏的完整呈现，需要与jq动作结合--> <!--方式一：自定义jquery--> <!--<div class="tabsContent">--> <!--<div>Home...</div>--> <!--<div class="hide">Profile...</div>--> <!--<div class="hide">Messages...</div>--> <!--</div>--> <!--<script>--> <!--$("li").click(function(){--> <!--if($(this).hasClass("disabled")){--> <!--}else{--> <!--$(this).addClass("active").siblings().removeClass("active");--> <!--var clickedIndex = $(this).index();--> <!--$(".tabsContent").children().eq(clickedIndex).removeClass("hide").siblings().addClass("hide");--> <!--};--> <!--});--> <!--</script>--> <!--使用bootstrap提供的js插件--> <ul class="nav nav-tabs"> <li role="presentation" class="active"> <a href="#home" aria-controls="settings" role="tab" data-toggle="tab">Home</a> </li> <li role="presentation" > <a href="#profile" aria-controls="settings" role="tab" data-toggle="tab">Profile</a> </li> <li role="presentation"> <a href="#messages" aria-controls="settings" role="tab" data-toggle="tab">Messages</a> </li> <li role="presentation"> <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a> </li> <!--添加下拉菜单tab--> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <!--指定锚点id，a标签添加相应固定属性--> <li><a href="#dAction" aria-controls="settings" role="tab" data-toggle="tab">Action</a></li> <li><a href="#dAnother" aria-controls="settings" role="tab" data-toggle="tab">Another action</a></li> <li role="separator" class="divider"></li> <li><a href="#dElse" aria-controls="settings" role="tab" data-toggle="tab">Something else here</a></li> </ul> </li> </ul> <!--使用js插件：设置id与上面tabs的锚点一致，--> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">home</div> <div role="tabpanel" class="tab-pane" id="profile">profile</div> <div role="tabpanel" class="tab-pane" id="messages">messages.</div> <div role="tabpanel" class="tab-pane" id="settings">settings</div> <div role="tabpanel" class="tab-pane" id="dAction">Action</div> <div role="tabpanel" class="tab-pane" id="dAnother">Another action</div> <div role="tabpanel" class="tab-pane" id="dElse">Something else here</div> </div> </body> </html>
七、导航条
导航条内可以添加：品牌图标、连接、按钮、下拉框、表单、文本等，
关于布局：导航内部：navbar-right、navbar-left，在一个导航条内只许出现一次，
导航条整体可以显示在顶部、底部，或固定在顶部随页面下滑而消失，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> <style> body{height:2000px;} </style> </head> <body> <!--.navbar-fixed-top固定在顶部，.navbar-fixed-bottom固定在底部--> <!--.navbar-static-top静止在顶部，随着页面详细滚动而消失--> <!--.navbar-inverse实现反色效果：黑底白字--> <nav class="navbar navbar-default navbar-static-top navbar-inverse"> <!--.container-fluid:居中、设置内padding--> <div class="container-fluid"> <!-- 品牌图标--> <div class="navbar-header"> <a class="navbar-brand" href="#"> <!--<img alt="Brand" src="" />--> Brand </a> </div> <!--具体导航内容--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--导航条左侧：按钮、连接、下拉选框--> <ul class="nav navbar-nav"> <!--'navbar-btn'可以使非form中的button，垂直居中--> <li><button type="button" class="btn btn-default navbar-btn">Sign in</button></li> <li><a href="#">Link</a></li> <li class="active"><a href="#">Link <span class="sr-only">(current)</span> </a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <!--文本--> <li><p class="navbar-text" style="color:red;">为了有更好的颜色和样式，用p标签</p></li> </ul> <!-- 表单--> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <!--导航条右侧：link、下拉选框--> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <!--导航组件之外的连接--> <li><p class="navbar-text" style="color:blue;"> 这是连接：<a href="#" class="navbar-link" style="color:blue;">点我</a> </p></li> </ul> </div> </div> </nav> </body> </html>
八、分页和翻页
分页：可以设置禁用、当前页、大小尺寸，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> </head> <body> <!--分页组件：大--> <nav aria-label="Page navigation"> <ul class="pagination pagination-lg"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--当前页active和禁用页disable，将a标签换成span标签，保留样式不可点击 --> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--向前、向后禁用时，去掉a标签保留样式不可点击 --> <li class="disabled"> <span aria-hidden="true">»</span> </li> </ul> </nav> <!--分页组件：正常大小--> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--当前页active和禁用页disable，将a标签换成span标签，保留样式不可点击 --> <li class="active"><span>1</span></li> <li><a href="#">2</a></li> <li class="disabled"><span>3</span></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> <!--分页组件：小--> <nav aria-label="Page navigation"> <ul class="pagination pagination-sm"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <!--当前页active和禁用页disable，将a标签换成span标签，保留样式不可点击 --> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--向前、向后禁用时，去掉a标签保留样式不可点击 --> <li class="disabled"> <span aria-hidden="true">»</span> </li> </ul> </nav> </body> </html>
翻页：设置前一页、后一页，可居中，可分列两侧，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fenye</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> </head> <body> <!--居中--> <nav aria-label="prev_next_page"> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> <!--分列两端--> <nav aria-label="..."> <ul class="pager"> <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> </body> </html>
九、标签、路径导航、徽章、巨幕、正副标题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap_else</title> <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" /> <script src="jquery-1.12.4.min.js"></script> <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script> <style> body{ padding:20px; } </style> </head> <body> <!--标签--> <h6>Example heading <span class="label label-default">New</span></h6> <h5>Example heading <span class="label label-primary">New</span></h5> <h4>Example heading <span class="label label-success">New</span></h4> <h3>Example heading <span class="label label-info">New</span></h3> <h2>Example heading <span class="label label-warning">New</span></h2> <h1>Example heading <span class="label label-danger">New</span></h1> <!--路径导航--> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li><a href="#">Lucy</a></li> <li class="active">Data</li> </ol> <!--翻页--> <nav aria-label="..."> <ul class="pager"> <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li> <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li> </ul> </nav> <!--徽章：显示未读选项的数量--> <!--方式一：普通样式--> <a href="#"> Inbox <span class="badge">42</span> </a> <!--方式二：胶囊样式--> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> <br> <br> <br> <br> <!--bootstrap自动将active的胶囊徽章，转换成对应样式--> <ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"> <a href="#"> Home <span class="badge">42</span> </a> </li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"> <a href="#"> Messages <span class="badge">3</span> </a> </li> </ul> <!--巨幕一--> <div class="jumbotron"> <h1>Hello, world!</h1> <p>这是默认的巨幕效果。。。</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">let's go</a></p> </div> <!--巨幕二--> <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>这是全屏的巨幕效果，width=100%，没有 圆角。。。</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">let's go</a></p> </div> </div> <!--页头：正副标题 --> <div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div> </body> </html>
浙公网安备 33010602011771号