目录
1. 分页
2. 标签
3. 徽章
4. 巨幕
5. 页头
6. 缩略图
7. 警告框
8. 进度条
9. 列表组
10. 面板
11.Well
1. 分页
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <nav> 12 //默认分页 13 <ul class=‘pagination‘> 14 <li><a href=‘#‘><span>«</span> 15 <li class=‘active‘><a href=‘#‘>1</a></li> 16 <li><a href=‘#‘>2</a></li> 17 <li><a href=‘#‘>3</a></li> 18 <li><a href=‘#‘>4</a></li> 19 <li><a href=‘#‘><span>»</span> 20 </ul> 21 22 //翻页 23 <ul class=‘pager‘> 24 <li><a href=‘#‘>Previous</a></li> 25 <li><a href=‘#‘>Next</a></li> 26 </ul> 27 28 //对齐链接 29 <ul class=‘pager‘> 30 <li class=‘previous‘><a href=‘#‘><span>←</span> Older</a></li> 31 <li class=‘next‘><a href=‘#‘>Newer <span>→</span></a></li> 32 </ul> 33 </nav> 34 </body> 35 </html>
2. 标签
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <span class=‘label label-default‘>Default</span> 12 <span class=‘label label-primary‘>Primary</span> 13 <span class=‘label label-success‘>Success</span> 14 <span class=‘label label-info‘>Info</span> 15 <span class=‘label label-warning‘>Warning</span> 16 <span class=‘label label-danger‘>Danger</span> 17 </body> 18 </html>
3. 徽章
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 //给链接、导航等元素嵌套span class=‘badge‘元素，可以很醒目的展示新的或未读的信息条目 12 <a href=‘#‘>Inbox <span class=‘badge‘>42</span></a> 13 14 <button class=‘btn btn-primary‘>Messages <span class=‘badge‘>4</span></button> 15 16 <ul class=‘nav nav-pills‘> 17 <li class=‘active‘><a href=‘#‘>Home <span class=‘badge‘>42</span></a></li> 18 <li><a href=‘#‘>Profile</a></li> 19 <li><a href=‘#‘>Messages <span class=‘badge‘>3</span></a></li> 20 </ul> 21 </body> 22 </html>
4. 巨幕
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘jumbotron‘> 12 <h1>Hello World!</h1> 13 <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. 14 <p><a class=‘btn btn-primary btn-lg‘ href=‘#‘>Learn more</a></p> 15 </div> 16 </body> 17 </html>
5. 页头
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘page-header‘> 12 <h1>Example page header <small>Subtext for header</small></h1> 13 </div> 14 </body> 15 </html>
6. 缩略图
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘row‘> 12 <div class=‘col-sm-6 col-md-4‘> 13 <div class=‘thumbnail‘> 14 <img src=‘...‘ alt=‘...‘> 15 <div class=‘caption‘> 16 <h3>Thumbnail label</h3> 17 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 18 <p><a href=‘#‘ class=‘btn btn-primary‘>Button</a><a href=‘#‘ class=‘btn btn-primary‘>button</a></p> 19 </div> 20 </div> 21 </div> 22 <div class=‘col-sm-6 col-md-4‘> 23 <div class=‘thumbnail‘> 24 <img src=‘...‘ alt=‘...‘> 25 <div class=‘caption‘> 26 <h3>Thumbnail label</h3> 27 <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 28 <p><a href=‘#‘ class=‘btn btn-primary‘>Button</a><a href=‘#‘ class=‘btn btn-primary‘>button</a></p> 29 </div> 30 </div> 31 </div> 32 </div> 33 </body> 34 </html>
7. 警告框
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘alert alert-success‘>Well done! You successfully read this important alert message. </div> 12 <div class=‘alert alert-info‘>Well done! You successfully read this important alert message. </div> 13 <div class=‘alert alert-warning‘>Well done! You successfully read this important alert message. </div> 14 <div class=‘alert alert-danger‘>Well done! You successfully read this important alert message. </div> 15 16 //为警告框添加一个可选的.alert-dismissible 类和一个关闭按钮,务必给 button>元素添加 data-dismiss="alert" 属性。 17 <div class=‘alert alert-warning alert-dismissible‘> 18 <button class=‘close‘ data-dismiss=‘alert‘><span>×</span></button> 19 <strong>Warning!</strong> Better check yourself, you‘re not looking too good. 20 </div> 21 </body> 22 </html>
8. 进度条
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘progress‘> 12 <div class=‘progress-bar‘ style=‘width: 60%;‘> 13 <span class=‘sr-only‘>60% Complete</span> 14 </div> 15 </div> 16 17 //将设置了 .sr-only 类的span标签从进度条组件中移除 类，从而让当前进度显示出来 18 <div class=‘progress‘> 19 <div class=‘progress-bar‘ style=‘width: 60%;‘> 20 60% 21 </div> 22 </div> 23 </body> 24 </html>
9. 列表组
列表组中的每个元素都可以是任何 HTML 内容，如列表、徽章、链接、按钮，甚至是像下面的带链接的列表组。
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘list-group‘> 12 <li class=‘list-group-item‘>Cras justo odio</li> 13 <li class=‘list-group-item‘>Dapibus ac facilisis in</li> 14 <li class=‘list-group-item‘>Morbi leo risus</li> 15 </div> 16 17 //给列表组加入徽章组件，它会自动被放在右边 18 <div class=‘list-group‘> 19 <li class=‘list-group-item‘> 20 <span class=‘badge‘>14</span> 21 Cras justo odio 22 </li> 23 </div> 24 25 <div class=‘list-group‘> 26 <a href=‘#‘ class=‘list-group-item active‘> 27 <h4 class=‘list-group-item-heading‘>List group item heading</h4> 28 <p class=‘list-group-item-text‘>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p> 29 </a> 30 <a href=‘#‘ class=‘list-group-item‘> 31 <h4 class=‘list-group-item-heading‘>List group item heading</h4> 32 <p class=‘list-group-item-text‘>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p> 33 </a> 34 </div> 35 </body> 36 </html>
10. 面板
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘panel panel-primary‘> 12 <div class=‘panel-heading‘> 13 <h3 class=‘panel-title‘>Panel title</h3> 14 </div> 15 <div class=‘panel-body‘> 16 Panel Content 17 </div> 18 <div class=‘panel-footer‘>Panel footer</div> 19 </div> 20 </body> 21 </html>
11. Well
把 Well 用在元素上，能有嵌入（inset）的的简单效果。
1 <!doctype html> 2 <html lang=‘zh-cn‘> 3 <head> 4 <title>Hello World!</title> 5 <link rel=‘stylesheet‘ href=‘css/bootstrap.min.css‘> 6 <script src=‘js/jquery2.min.js‘></script> 7 <script src=‘js/bootstrap.min.js‘></script> 8 </head> 9 10 <body> 11 <div class=‘well‘>Hello world</div> 12 <div class=‘well well-lg‘>Hello world</div> 13 <div class=‘well well-sm‘>Hello world</div> 14 </body> 15 </html>
时间： 2024-08-29 20:27:24