第九篇 BootStrap

 

为了提高开发效率，前端开发者都会使用一些现成的前端组件来进行开发，本节将给大家讲解由Twitter开源的前端框架BootStrap，他的内部集成了HTML、CSS、JavaScript很多功能和组件，让开发者可以快速开发网站。

Bootstrap 是一个用于构建响应式（根据用户设备不同做出响应）网站的前端框架， 2011 年 8 月发布的,发布之后就迅速走红。无论你想构建应用 程序、博客还是 CMS 网站,Bootstrap 都完美适用,只要你想得到, 它都能行。Bootstrap 把 HTML、CSS 和 JavaScript 组合起来,为构建 稳定的网站提供了基础设施,也能提高开发效率。基于默认的网格系 统,布局变成了小菜一碟,按钮、导航和表格也都活脱脱地赏心悦目。 十几个 JavaScript 插件更为我们赋予网站交互能力提供了强大保障。

第九篇 BootStrap

6.1 响应式布局

6.2 BootStrap的应用

6.3 BootStrap样式

总结

6.1 响应式布局

在开始学习BootStrap之前，我们要先了解响应式。

响应式，就是页面可以根据用户设备不同（如：分辨率大小）对页面效果做出一些响应，它实现的关键是CSS中的 @media属性。

示例：调整页面变色

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .pg-header{
  8. height:300px;
  9. background-color: red;
  10. }
  11. /* 当页面宽度大于等于800时，内部的样式就会生效。 */
  12. @media(min-width:800px){
  13. .pg-header{
  14. background-color: green;
  15. }
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <divclass="pg-header"></div>
  21. </body>
  22. </html>

6.2 BootStrap的应用

想要使用BootStrap进行开发，需要先进行下载，然后再在项目中导入即可。

  1. 下载用于生产的 BootStrap包

  2. 解压缩文件夹之后，把bootstrap文件夹拷贝到项目目录，然后在页面中引入即可。

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>BT</title>
    6. <!--引入BootStrap的样式，提供了大量的样式-->
    7. <linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    9. </head>
    10. <body>
    11. <h1>欢迎使用BootStrap</h1>
    13. <scriptsrc="jquery-3.4.1.min.js"></script>
    14. <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
    15. <scripttype="text/javascript"src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    16. </body>
    17. </html>

  3. CDN，上面的步骤需要现下载BootStrap和jQuery到本地，然后才能在项目中应用，如果使用CDN的话，就可以直接在页面引入即可。

    1. <!DOCTYPE html>
    2. <htmllang="en">
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>Title</title>
    6. <!--引入BootStrap的样式，提供了大量的样式-->
    7. <linkhref="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
    9. </head>
    10. <body>
    11. <h1>欢迎使用BootStrap</h1>
    13. <scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    14. <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
    15. <scriptsrc="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    16. </body>
    17. </html>

6.3 BootStrap样式

这一部分将给大家介绍BootStrap的内置的常用样式。

6.3.1 布局容器

布局容器，一般用于给页面设置外部容器，所有基于bootstrap的页面都会用他做外部容器。

  1. <body>
  2. <divstyle="height:48px;background-color:#499ef3;">
  3. <divclass="container">...</div>
  4. </div>
  5. </body>

  • container，支持响应式布局，当页面宽度变化时，内容的宽度会发生变化。

    1. .container {
    2. padding-right:15px;
    3. padding-left:15px;
    4. margin-right:auto;
    5. margin-left:auto;
    6. }
    7. @media(min-width:768px){
    8. .container {
    9. width:750px;
    10. }
    11. }
    12. @media(min-width:992px){
    13. .container {
    14. width:970px;
    15. }
    16. }
    17. @media(min-width:1200px){
    18. .container {
    19. width:1170px;
    20. }
    21. }

  • container-fluid，不支持响应式。

    1. .container-fluid {
    2. padding-right:15px;
    3. padding-left:15px;
    4. margin-right:auto;
    5. margin-left:auto;
    6. }

6.3.2 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1. 基本使用

BootStrap为栅格系统提供了4种划分的方式：

  1. .col-xs-*永远按照百分比分配页面宽度。
  2. .col-sm-*屏幕大于750px时，才能根据利用栅格的12列进行分配页面宽度，否则，会按照块级标签占整行显示。
  3. .col-md-*屏幕大于970px时，才能根据利用栅格的12列进行分配页面宽度，否则，会按照块级标签占整行显示。
  4. .col-lg-*屏幕大于1170px时，才能根据利用栅格的12列进行分配页面宽度，否则，会按照块级标签占整行显示。
  1. <divclass="row">
  2. <divclass="col-xs-2">.col-md-2</div>
  3. <divclass="col-xs-10">.col-md-10</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-sm-6">.col-md-2</div>
  7. <divclass="col-sm-6">.col-md-10</div>
  8. </div>
  9. <divclass="row">
  10. <divclass="col-md-2">.col-md-2</div>
  11. <divclass="col-md-10">.col-md-10</div>
  12. </div>
  13. <divclass="row">
  14. <divclass="col-lg-3">.col-md-2</div>
  15. <divclass="col-lg-9">.col-md-10</div>
  16. </div>
2. 列偏移

根据栅格，对数据页面设置缩进和空白效果。

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

image-20191031152858755

  1. <divclass="row">
  2. <divclass="col-md-4">.col-md-4</div>
  3. <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  7. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  8. </div>
  9. <divclass="row">
  10. <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  11. </div>

6.3.3 顶部导航条

1.基础导航条

  1. <navclass="navbar navbar-default">
  2. <divclass="container-fluid">
  3. <divclass="navbar-header">
  4. <aclass="navbar-brand"href="#">
  5. <imgalt="Brand"src="...">
  6. </a>
  7. </div>
  8. </div>
  9. </nav>
2.带菜单的导航条

  1. <navclass="navbar navbar-default">
  2. <divclass="container">
  3. <divclass="navbar-header">
  4. <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"
  5. data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
  6. <spanclass="sr-only">Toggle navigation</span>
  7. <spanclass="icon-bar"></span>
  8. <spanclass="icon-bar"></span>
  9. <spanclass="icon-bar"></span>
  10. </button>
  11. <aclass="navbar-brand"href="#">Brand</a>
  12. </div>
  14. <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
  15. <ulclass="nav navbar-nav">
  16. <li><ahref="#">Link <spanclass="sr-only">(current)</span></a></li>
  17. <li><ahref="#">Link</a></li>
  18. </ul>
  19. </div><!-- /.navbar-collapse -->
  20. </div>
  21. </nav>
3.含有多种元素的导航条

  1. <navclass="navbar navbar-default">
  2. <divclass="container-fluid">
  3. <!-- Brand and toggle get grouped for better mobile display -->
  4. <divclass="navbar-header">
  5. <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
  6. <spanclass="sr-only">Toggle navigation</span>
  7. <spanclass="icon-bar"></span>
  8. <spanclass="icon-bar"></span>
  9. <spanclass="icon-bar"></span>
  10. </button>
  11. <aclass="navbar-brand"href="#">Brand</a>
  12. </div>
  14. <!-- Collect the nav links, forms, and other content for toggling -->
  15. <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
  16. <ulclass="nav navbar-nav">
  17. <liclass="active"><ahref="#">Link <spanclass="sr-only">(current)</span></a></li>
  18. <li><ahref="#">Link</a></li>
  19. <liclass="dropdown">
  20. <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown <spanclass="caret"></span></a>
  21. <ulclass="dropdown-menu">
  22. <li><ahref="#">Action</a></li>
  23. <li><ahref="#">Another action</a></li>
  24. <li><ahref="#">Something else here</a></li>
  25. <lirole="separator"class="divider"></li>
  26. <li><ahref="#">Separated link</a></li>
  27. <lirole="separator"class="divider"></li>
  28. <li><ahref="#">One more separated link</a></li>
  29. </ul>
  30. </li>
  31. </ul>
  32. <formclass="navbar-form navbar-left">
  33. <divclass="form-group">
  34. <inputtype="text"class="form-control"placeholder="Search">
  35. </div>
  36. <buttontype="submit"class="btn btn-default">Submit</button>
  37. </form>
  38. <ulclass="nav navbar-nav navbar-right">
  39. <li><ahref="#">Link</a></li>
  40. <liclass="dropdown">
  41. <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">Dropdown <spanclass="caret"></span></a>
  42. <ulclass="dropdown-menu">
  43. <li><ahref="#">Action</a></li>
  44. <li><ahref="#">Another action</a></li>
  45. <li><ahref="#">Something else here</a></li>
  46. <lirole="separator"class="divider"></li>
  47. <li><ahref="#">Separated link</a></li>
  48. </ul>
  49. </li>
  50. </ul>
  51. </div><!-- /.navbar-collapse -->
  52. </div><!-- /.container-fluid -->
  53. </nav>
4.导航条固定在页面顶部
  1. <navclass="navbar navbar-default navbar-fixed-top">
  2. <divclass="container-fluid">
  3. <divclass="navbar-header">
  4. <aclass="navbar-brand"href="#">
  5. <imgalt="Brand"src="...">
  6. </a>
  7. <ulclass="nav navbar-nav">
  8. <liclass="active"><ahref="#">Home</a></li>
  9. <li><ahref="#">Link</a></li>
  10. <li><ahref="#">Link</a></li>
  11. </ul>
  12. </div>
  13. </div>
  14. </nav>
  15. <divstyle="height:2000px;"></div>

6.3.4 面板

1.基础面板

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被.panel-heading 的样式所覆盖。

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

  1. <divclass="panel panel-default">
  2. <divclass="panel-heading">Panel heading without title</div>
  3. <divclass="panel-body">
  4. Panel content
  5. </div>
  6. </div>
  8. <divclass="panel panel-default">
  9. <divclass="panel-heading">
  10. <h3class="panel-title">Panel title</h3>
  11. </div>
  12. <divclass="panel-body">
  13. Panel content
  14. </div>
  15. </div>
2.带表格的面板

为面板中不需要边框的表格添加.table 类，是整个面板看上去更像是一个整体设计。如果是带有.panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。

  1. <divclass="panel panel-default">
  2. <!-- Default panel contents -->
  3. <divclass="panel-heading">Panel heading</div>
  4. <divclass="panel-body">
  5. <p>...</p>
  6. </div>
  8. <!-- Table -->
  9. <tableclass="table">
  10. ...
  11. </table>
  12. </div>
3.带列表组的面板

可以简单地在任何面版中加入具有最大宽度的列表组。

  1. <divclass="panel panel-default">
  2. <!-- Default panel contents -->
  3. <divclass="panel-heading">Panel heading</div>
  4. <divclass="panel-body">
  5. <p>...</p>
  6. </div>
  8. <!-- List group -->
  9. <ulclass="list-group">
  10. <liclass="list-group-item">Cras justo odio</li>
  11. <liclass="list-group-item">Dapibus ac facilisis in</li>
  12. <liclass="list-group-item">Morbi leo risus</li>
  13. <liclass="list-group-item">Porta ac consectetur ac</li>
  14. <liclass="list-group-item">Vestibulum at eros</li>
  15. </ul>
  16. </div>
4.带颜色的面板

像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。

 

 

  1. <divclass="panel panel-primary">...</div>
  2. <divclass="panel panel-success">...</div>
  3. <divclass="panel panel-info">...</div>
  4. <divclass="panel panel-warning">...</div>
  5. <divclass="panel panel-danger">...</div>

6.3.5 媒体对象

  1. <divclass="media">
  2. <divclass="media-left">
  3. <ahref="#">
  4. <imgclass="media-object"data-src="holder.js/64x64"alt="64x64"
  5. src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNmUyMTZhZjNjMCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2ZTIxNmFmM2MwIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
  6. data-holder-rendered="true"style="width:64px; height:64px;">
  7. </a>
  8. </div>
  9. <divclass="media-body">
  10. <h4class="media-heading">Top aligned media</h4>
  11. <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
  12. commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
  13. nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  14. <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
  15. penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  16. </div>
  17. </div>

6.3.6 分页

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

  1. <navaria-label="...">
  2. <ulclass="pagination">
  3. <liclass="disabled"><ahref="#"aria-label="Previous"><spanaria-hidden="true">«</span></a></li>
  4. <liclass="active"><ahref="#">1 <spanclass="sr-only">(current)</span></a></li>
  5. <li><ahref="#">2</a></li>
  6. <li><ahref="#">3</a></li>
  7. <li><ahref="#">4</a></li>
  8. <li><ahref="#">5</a></li>
  9. <li><ahref="#"aria-label="Next"><spanaria-hidden="true">»</span></a></li>
  10. </ul>
  11. </nav>

如果想要修改分页的尺寸的话，还可以设置一些其他属性：

  1. <navaria-label="..."><ulclass="pagination pagination-lg">...</ul></nav>
  2. <navaria-label="..."><ulclass="pagination">...</ul></nav>
  3. <navaria-label="..."><ulclass="pagination pagination-sm">...</ul></nav>

案例：博客系统

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Title</title>
  6. <!--引入BootStrap的样式，提供了大量的样式-->
  7. <linkhref="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
  8. </head>
  9. <style>
  10. body {
  11. margin:0;
  12. }
  13. </style>
  14. <body>
  15. <navclass="navbar navbar-default">
  16. <divclass="container">
  17. <divclass="navbar-header">
  18. <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"
  19. data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
  20. <spanclass="sr-only">Toggle navigation</span>
  21. <spanclass="icon-bar"></span>
  22. <spanclass="icon-bar"></span>
  23. <spanclass="icon-bar"></span>
  24. </button>
  25. <aclass="navbar-brand"href="#">博客系统</a>
  26. </div>
  28. <divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1">
  29. <ulclass="nav navbar-nav">
  30. <li><ahref="#">Python开发<spanclass="sr-only">(current)</span></a></li>
  31. <li><ahref="#">Linux架构</a></li>
  32. </ul>
  33. <ulclass="nav navbar-nav navbar-right">
  34. <liclass="dropdown">
  35. <ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"
  36. aria-expanded="false">武沛齐 <spanclass="caret"></span></a>
  37. <ulclass="dropdown-menu">
  38. <li><ahref="#">个人中心</a></li>
  39. <li><ahref="#">我的订单</a></li>
  40. <lirole="separator"class="divider"></li>
  41. <li><ahref="#">注销</a></li>
  42. </ul>
  43. </li>
  44. </ul>
  45. </div><!-- /.navbar-collapse -->
  46. </div>
  47. </nav>
  50. <div>
  51. <divclass="container">
  52. <divclass="col-md-9"style="padding-left:0">
  53. <divclass="media">
  54. <divclass="media-left">
  55. <ahref="#">
  56. <imgclass="media-object"data-src="holder.js/64x64"alt="64x64"
  57. src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNmUyMTZhZjNjMCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2ZTIxNmFmM2MwIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
  58. data-holder-rendered="true"style="width:64px; height:64px;">
  59. </a>
  60. </div>
  61. <divclass="media-body">
  62. <h4class="media-heading">Top aligned media</h4>
  63. <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
  64. commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
  65. nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  66. <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
  67. penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  68. </div>
  69. </div>
  70. <divclass="media">
  71. <divclass="media-left">
  72. <ahref="#">
  73. <imgclass="media-object"data-src="holder.js/64x64"alt="64x64"
  74. src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNmUyMTZhZjNjMCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2ZTIxNmFmM2MwIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40NjA5Mzc1IiB5PSIzNi41Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
  75. data-holder-rendered="true"style="width:64px; height:64px;">
  76. </a>
  77. </div>
  78. <divclass="media-body">
  79. <h4class="media-heading">Top aligned media</h4>
  80. <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
  81. commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
  82. nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  83. <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
  84. penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  85. </div>
  86. </div>
  87. <navaria-label="...">
  88. <ulclass="pagination">
  89. <liclass="disabled"><ahref="#"aria-label="Previous"><spanaria-hidden="true">«</span></a></li>
  90. <liclass="active"><ahref="#">1 <spanclass="sr-only">(current)</span></a></li>
  91. <li><ahref="#">2</a></li>
  92. <li><ahref="#">3</a></li>
  93. <li><ahref="#">4</a></li>
  94. <li><ahref="#">5</a></li>
  95. <li><ahref="#"aria-label="Next"><spanaria-hidden="true">»</span></a></li>
  96. </ul>
  97. </nav>
  98. </div>
  99. <divclass="col-md-3"style="padding-left:0;padding-right:0;">
  100. <divclass="panel panel-default">
  101. <divclass="panel-heading">Panel heading without title</div>
  102. <divclass="panel-body">
  103. Panel content
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  110. <scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  111. <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
  112. <scriptsrc="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  113. </body>
  114. </html>

6.3.7 表单

1.基本表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

  1. <form>
  2. <divclass="form-group">
  3. <labelfor="exampleInputEmail1">Email address</label>
  4. <inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email">
  5. </div>
  6. <divclass="form-group">
  7. <labelfor="exampleInputPassword1">Password</label>
  8. <inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password">
  9. </div>
  10. <divclass="form-group">
  11. <labelfor="exampleInputFile">File input</label>
  12. <inputtype="file"id="exampleInputFile">
  13. <pclass="help-block">Example block-level help text here.</p>
  14. </div>
  15. <divclass="checkbox">
  16. <label>
  17. <inputtype="checkbox"> Check me out
  18. </label>
  19. </div>
  20. <buttontype="submit"class="btn btn-default">Submit</button>
  21. </form>
2.水平排列表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

  1. <formclass="form-horizontal">
  2. <divclass="form-group">
  3. <labelfor="inputEmail3"class="col-sm-2 control-label">Email</label>
  4. <divclass="col-sm-10">
  5. <inputtype="email"class="form-control"id="inputEmail3"placeholder="Email">
  6. </div>
  7. </div>
  8. <divclass="form-group">
  9. <labelfor="inputPassword3"class="col-sm-2 control-label">Password</label>
  10. <divclass="col-sm-10">
  11. <inputtype="password"class="form-control"id="inputPassword3"placeholder="Password">
  12. </div>
  13. </div>
  14. <divclass="form-group">
  15. <divclass="col-sm-offset-2 col-sm-10">
  16. <divclass="checkbox">
  17. <label>
  18. <inputtype="checkbox"> Remember me
  19. </label>
  20. </div>
  21. </div>
  22. </div>
  23. <divclass="form-group">
  24. <divclass="col-sm-offset-2 col-sm-10">
  25. <buttontype="submit"class="btn btn-default">Sign in</button>
  26. </div>
  27. </div>
  28. </form>
3.被支持控件

  • 输入框
    包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

  • 文本域

  • 支持多行文本的表单控件。可根据需要改变 rows 属性。

      

  • 多选和单选
    多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

    1. <divclass="checkbox">
    2. <label>
    3. <inputtype="checkbox"value="">
    4. Option one is this and that—be sure to include why it's great
    5. </label>
    6. </div>
    7. <divclass="checkbox disabled">
    8. <label>
    9. <inputtype="checkbox"value=""disabled>
    10. Option two is disabled
    11. </label>
    12. </div>
    14. <divclass="radio">
    15. <label>
    16. <inputtype="radio"name="optionsRadios"id="optionsRadios1"value="option1"checked>
    17. Option one is this and that—be sure to include why it's great
    18. </label>
    19. </div>
    20. <divclass="radio">
    21. <label>
    22. <inputtype="radio"name="optionsRadios"id="optionsRadios2"value="option2">
    23. Option two can be something else and selecting it will deselect option one
    24. </label>
    25. </div>
    26. <divclass="radio disabled">
    27. <label>
    28. <inputtype="radio"name="optionsRadios"id="optionsRadios3"value="option3"disabled>
    29. Option three is disabled
    30. </label>
    31. </div>

  • 内联单选和多选
    通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

    1. <labelclass="checkbox-inline">
    2. <inputtype="checkbox"id="inlineCheckbox1"value="option1"> 1
    3. </label>
    4. <labelclass="checkbox-inline">
    5. <inputtype="checkbox"id="inlineCheckbox2"value="option2"> 2
    6. </label>
    7. <labelclass="checkbox-inline">
    8. <inputtype="checkbox"id="inlineCheckbox3"value="option3"> 3
    9. </label>
    10. <labelclass="radio-inline">
    11. <inputtype="radio"name="inlineRadioOptions"id="inlineRadio1"value="option1"> 1
    12. </label>
    13. <labelclass="radio-inline">
    14. <inputtype="radio"name="inlineRadioOptions"id="inlineRadio2"value="option2"> 2
    15. </label>
    16. <labelclass="radio-inline">
    17. <inputtype="radio"name="inlineRadioOptions"id="inlineRadio3"value="option3"> 3
    18. </label>

  • 下拉列表
    注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

    image-20191031160045459

4.静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 ` 元素添加.form-control-static` 类即可。

image-20191031160126221

  1. <formclass="form-horizontal">
  2. <divclass="form-group">
  3. <labelclass="col-sm-2 control-label">Email</label>
  4. <divclass="col-sm-10">
  5. <pclass="form-control-static">email@example.com</p>
  6. </div>
  7. </div>
  8. <divclass="form-group">
  9. <labelfor="inputPassword"class="col-sm-2 control-label">Password</label>
  10. <divclass="col-sm-10">
  11. <inputtype="password"class="form-control"id="inputPassword"placeholder="Password">
  12. </div>
  13. </div>
  14. </form>
5.禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

6.带颜色控件

状态和图标你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框<input class="form-control">元素上.

  1. <divclass="form-group has-success has-feedback">
  2. <labelclass="control-label"for="inputSuccess2">Input with success</label>
  3. <inputtype="text"class="form-control"id="inputSuccess2"aria-describedby="inputSuccess2Status">
  4. <spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span>
  5. <spanid="inputSuccess2Status"class="sr-only">(success)</span>
  6. </div>
  7. <divclass="form-group has-warning has-feedback">
  8. <labelclass="control-label"for="inputWarning2">Input with warning</label>
  9. <inputtype="text"class="form-control"id="inputWarning2"aria-describedby="inputWarning2Status">
  10. <spanclass="glyphicon glyphicon-warning-sign form-control-feedback"aria-hidden="true"></span>
  11. <spanid="inputWarning2Status"class="sr-only">(warning)</span>
  12. </div>
  13. <divclass="form-group has-error has-feedback">
  14. <labelclass="control-label"for="inputError2">Input with error</label>
  15. <inputtype="text"class="form-control"id="inputError2"aria-describedby="inputError2Status">
  16. <spanclass="glyphicon glyphicon-remove form-control-feedback"aria-hidden="true"></span>
  17. <spanid="inputError2Status"class="sr-only">(error)</span>
  18. </div>
  19. <divclass="form-group has-success has-feedback">
  20. <labelclass="control-label"for="inputGroupSuccess1">Input group with success</label>
  21. <divclass="input-group">
  22. <spanclass="input-group-addon">@</span>
  23. <inputtype="text"class="form-control"id="inputGroupSuccess1"aria-describedby="inputGroupSuccess1Status">
  24. </div>
  25. <spanclass="glyphicon glyphicon-ok form-control-feedback"aria-hidden="true"></span>
  26. <spanid="inputGroupSuccess1Status"class="sr-only">(success)</span>
  27. </div>
7.控件尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

 

 

案例：用户登录

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Title</title>
  6. <!--引入BootStrap的样式，提供了大量的样式-->
  7. <linkhref="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
  8. </head>
  9. <style>
  10. body {
  11. margin:0;
  12. }
  13. </style>
  14. <body>
  16. <divstyle="width:500px;margin:50pxauto0auto;border:1px solid #dddddd;padding: 10px 15px;">
  17. <h2style="text-align: center;margin-top:10px;margin-bottom:20px;">用户登录</h2>
  18. <formclass="form-horizontal">
  19. <divclass="form-group">
  20. <labelfor="userName"class="col-sm-2 control-label">用户名</label>
  21. <divclass="col-sm-10">
  22. <inputtype="email"class="form-control"id="userName"placeholder="请输入用户名">
  23. </div>
  24. </div>
  25. <divclass="form-group">
  26. <labelfor="password"class="col-sm-2 control-label">密码</label>
  27. <divclass="col-sm-10">
  28. <inputtype="password"class="form-control"id="password"placeholder="请输入密码">
  29. </div>
  30. </div>
  31. <divclass="form-group">
  32. <divclass="col-sm-offset-2 col-sm-10">
  33. <divclass="checkbox">
  34. <label>
  35. <inputtype="checkbox"> 记住密码
  36. </label>
  37. </div>
  38. </div>
  39. </div>
  40. <divclass="form-group">
  41. <divclass="col-sm-offset-2 col-sm-10">
  42. <buttontype="submit"class="btn btn-primary">登 录</button>
  43. </div>
  44. </div>
  45. </form>
  46. </div>
  49. <scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  50. <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
  51. <scriptsrc="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  52. </body>
  53. </html>

案例：用户注册

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Title</title>
  6. <!--引入BootStrap的样式，提供了大量的样式-->
  7. <linkhref="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
  8. </head>
  9. <style>
  10. body {
  11. margin:0;
  12. }
  14. .register{
  16. width:400px;
  17. margin-top:30px;
  18. margin-left:auto;
  19. margin-right:auto;
  20. border:1px solid #f0f0f0;
  21. padding:10px30px30px30px;
  22. -webkit-box-shadow:5px10px10px rgba(0,0,0,.05);
  23. box-shadow:5px10px10px rgba(0,0,0,.05);
  25. }
  26. </style>
  27. <body>
  30. <divclass="register">
  31. <divstyle="font-size:25px; font-weight: bold;text-align: center;">
  32. 用户注册
  33. </div>
  34. <formid="fm"method="POST"novalidate>
  35. <divclass="form-group">
  36. <labelfor="id_username">用户名</label>
  37. <inputtype="text"name="username"maxlength="32"minlength="4"class="form-control"
  38. placeholder="请输入用户名"requiredid="id_username"/>
  39. <spanclass="error-msg"></span>
  40. </div>
  42. <divclass="form-group">
  43. <labelfor="id_password">密码</label>
  44. <inputtype="password"name="password"maxlength="64"minlength="8"class="form-control"
  45. placeholder="请输入密码"requiredid="id_password"/>
  46. <spanclass="error-msg"></span>
  47. </div>
  49. <divclass="form-group">
  50. <labelfor="id_confirm_password">确认密码</label>
  51. <inputtype="password"name="confirm_password"maxlength="64"minlength="8"class="form-control"
  52. placeholder="请输入确认密码"requiredid="id_confirm_password"/>
  53. <spanclass="error-msg"></span>
  54. </div>
  57. <divclass="form-group">
  58. <labelfor="id_telephone">手机号</label>
  59. <inputtype="text"name="telephone"class="form-control"placeholder="请输入手机号"required
  60. id="id_telephone"/>
  61. <spanclass="error-msg"></span>
  62. </div>
  64. <divclass="form-group">
  65. <labelfor="id_code">短信验证码</label>
  66. <divclass="row">
  67. <divclass="col-xs-7">
  68. <inputtype="text"name="code"class="form-control"placeholder="请输入短信验证码"required
  69. id="id_code"/>
  70. <spanclass="error-msg"></span>
  71. </div>
  72. <divclass="col-xs-5">
  73. <inputid="smsBtn"type="button"class="btn btn-default"value="点击获取验证码">
  74. </div>
  75. </div>
  76. </div>
  78. <divclass="row">
  79. <divclass="col-xs-3">
  80. <inputid="submit"type="button"class="btn btn-primary"value="注 册"/>
  81. </div>
  82. </div>
  83. </form>
  84. </div>
  86. <scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  87. <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
  88. <scriptsrc="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  89. </body>
  90. </html>

6.3.8 表格

1.基本示例

为任意 <table> 标签添加 .table样式类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

2.条纹状表格

通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。
注意：条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

3. 带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

4.鼠标悬停

通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

5.紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

6.表格颜色

通过这些状态类可以为行或单元格设置颜色。

7.响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

  1. <divclass="table-responsive">
  2. <tableclass="table table-bordered">
  3. <thead>
  4. <tr>
  5. <th>#</th>
  6. <th>Table heading</th>
  7. <th>Table heading</th>
  8. <th>Table heading</th>
  9. <th>Table heading</th>
  10. <th>Table heading</th>
  11. <th>Table heading</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <th>1</th>
  17. <td>Table cell</td>
  18. <td>Table cell</td>
  19. <td>Table cell</td>
  20. <td>Table cell</td>
  21. <td>Table cell</td>
  22. <td>Table cell</td>
  23. </tr>
  24. <tr>
  25. <th>2</th>
  26. <td>Table cell</td>
  27. <td>Table cell</td>
  28. <td>Table cell</td>
  29. <td>Table cell</td>
  30. <td>Table cell</td>
  31. <td>Table cell</td>
  32. </tr>
  33. <tr>
  34. <th>3</th>
  35. <td>Table cell</td>
  36. <td>Table cell</td>
  37. <td>Table cell</td>
  38. <td>Table cell</td>
  39. <td>Table cell</td>
  40. <td>Table cell</td>
  41. </tr>
  42. </tbody>
  43. </table>
  44. </div>

6.3.9 按钮

对于可作为按钮使用的标签或元素 <a>、<button> 或 <input>元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

1.基本使用

  1. <aclass="btn btn-default"href="#"role="button">Link</a>
  2. <buttonclass="btn btn-default"type="submit">Button</button>
  3. <inputclass="btn btn-default"type="button"value="Input">
  4. <inputclass="btn btn-default"type="submit"value="Submit">
2.预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

  1. <!-- Standard button -->
  2. <buttontype="button"class="btn btn-default">（默认样式）Default</button>
  4. <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  5. <buttontype="button"class="btn btn-primary">（首选项）Primary</button>
  7. <!-- Indicates a successful or positive action -->
  8. <buttontype="button"class="btn btn-success">（成功）Success</button>
  10. <!-- Contextual button for informational alert messages -->
  11. <buttontype="button"class="btn btn-info">（一般信息）Info</button>
  13. <!-- Indicates caution should be taken with this action -->
  14. <buttontype="button"class="btn btn-warning">（警告）Warning</button>
  16. <!-- Indicates a dangerous or potentially negative action -->
  17. <buttontype="button"class="btn btn-danger">（危险）Danger</button>
  19. <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  20. <buttontype="button"class="btn btn-link">（链接）Link</button>
3.尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

  1. <p>
  2. <buttontype="button"class="btn btn-primary btn-lg">（大按钮）Large button</button>
  3. <buttontype="button"class="btn btn-default btn-lg">（大按钮）Large button</button>
  4. </p>
  5. <p>
  6. <buttontype="button"class="btn btn-primary">（默认尺寸）Default button</button>
  7. <buttontype="button"class="btn btn-default">（默认尺寸）Default button</button>
  8. </p>
  9. <p>
  10. <buttontype="button"class="btn btn-primary btn-sm">（小按钮）Small button</button>
  11. <buttontype="button"class="btn btn-default btn-sm">（小按钮）Small button</button>
  12. </p>
  13. <p>
  14. <buttontype="button"class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  15. <buttontype="button"class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
  16. </p>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

 

 

  1. <buttontype="button"class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
  2. <buttontype="button"class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
4.禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

  1. <buttontype="button"class="btn btn-lg btn-primary"disabled="disabled">Primary button</button>
  2. <buttontype="button"class="btn btn-default btn-lg"disabled="disabled">Button</button>

6.3.10 按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

1.基本使用

  1. <divclass="btn-group"role="group"aria-label="...">
  2. <buttontype="button"class="btn btn-default">Left</button>
  3. <buttontype="button"class="btn btn-default">Middle</button>
  4. <buttontype="button"class="btn btn-default">Right</button>
  5. </div>
2.尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

  1. <divclass="btn-group btn-group-lg"role="group"aria-label="Large button group">
  2. <buttontype="button"class="btn btn-default">Left</button>
  3. <buttontype="button"class="btn btn-default">Middle</button>
  4. <buttontype="button"class="btn btn-default">Right</button>
  5. </div>
  6. <br>
  7. <divclass="btn-group"role="group"aria-label="Default button group">
  8. <buttontype="button"class="btn btn-default">Left</button>
  9. <buttontype="button"class="btn btn-default">Middle</button>
  10. <buttontype="button"class="btn btn-default">Right</button>
  11. </div>
  12. <br>
  13. <divclass="btn-group btn-group-sm"role="group"aria-label="Small button group">
  14. <buttontype="button"class="btn btn-default">Left</button>
  15. <buttontype="button"class="btn btn-default">Middle</button>
  16. <buttontype="button"class="btn btn-default">Right</button>
  17. </div>
  18. <br>
  19. <divclass="btn-group btn-group-xs"role="group"aria-label="Extra-small button group">
  20. <buttontype="button"class="btn btn-default">Left</button>
  21. <buttontype="button"class="btn btn-default">Middle</button>
  22. <buttontype="button"class="btn btn-default">Right</button>
  23. </div>

6.3.13 路径导航

  1. <olclass="breadcrumb">
  2. <li><ahref="#">Home</a></li>
  3. <li><ahref="#">Library</a></li>
  4. <liclass="active">Data</li>
  5. </ol>

案例：实现后台管理系统

6.3.14 图标

BootStrap中包括250多个来自 Glyphicon Halflings 的字体图标。

  1. <spanclass="把图标的样式放在这里，就能展示出图标"aria-hidden="true"></span>
  3. <!-- 例如：下面的图标 -->
  4. <spanclass="glyphicon glyphicon-exclamation-sign"aria-hidden="true"></span>
  5. <spanclass="glyphicon glyphicon-upload"aria-hidden="true"></span>

更多图标可以参考：https://v3.bootcss.com/components/#glyphicons

6.3.15 警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。

1.基础警告框

  1. <divclass="alert alert-success"role="alert">...</div>
  2. <divclass="alert alert-info"role="alert">...</div>
  3. <divclass="alert alert-warning"role="alert">...</div>
  4. <divclass="alert alert-danger"role="alert">...</div>
2.可关闭警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

  1. <divclass="alert alert-warning alert-dismissible"role="alert">
  2. <buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button>
  3. <strong>Warning!</strong> Better check yourself, you're not looking too good.
  4. </div>
3. 警告框中的链接

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。

  1. <divclass="alert alert-success"role="alert">
  2. <ahref="#"class="alert-link">...</a>
  3. </div>
  4. <divclass="alert alert-info"role="alert">
  5. <ahref="#"class="alert-link">...</a>
  6. </div>
  7. <divclass="alert alert-warning"role="alert">
  8. <ahref="#"class="alert-link">...</a>
  9. </div>
  10. <divclass="alert alert-danger"role="alert">
  11. <ahref="#"class="alert-link">...</a>
  12. </div>

6.3.16 进度条

1.基本进度条

  1. <divclass="progress">
  2. <divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%;">
  3. 60%
  4. </div>
  5. </div>
2.多颜色进度条

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。

  1. <divclass="progress">
  2. <divclass="progress-bar progress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width:40%">
  3. <spanclass="sr-only">40% Complete (success)</span>
  4. </div>
  5. </div>
  6. <divclass="progress">
  7. <divclass="progress-bar progress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width:20%">
  8. <spanclass="sr-only">20% Complete</span>
  9. </div>
  10. </div>
  11. <divclass="progress">
  12. <divclass="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%">
  13. <spanclass="sr-only">60% Complete (warning)</span>
  14. </div>
  15. </div>
  16. <divclass="progress">
  17. <divclass="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width:80%">
  18. <spanclass="sr-only">80% Complete (danger)</span>
  19. </div>
  20. </div>

6.3.17 标题

HTML 中的所有标题标签，到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

1. 普通标题

  1. <h1>h1. Bootstrap heading</h1>
  2. <h2>h2. Bootstrap heading</h2>
  3. <h3>h3. Bootstrap heading</h3>
  4. <h4>h4. Bootstrap heading</h4>
  5. <h5>h5. Bootstrap heading</h5>
  6. <h6>h6. Bootstrap heading</h6>
2. 副标题

除此之外，在标题内还可以包含 ` 标签或赋予.small` 类的元素，可以用来标记副标题。

  1. <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
  2. <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
  3. <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
  4. <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
  5. <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
  6. <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

6.3.18 代码

1. 内联代码

通过 <code> 标签包裹内联样式的代码片段。

  1. For example, <code><section></code> should be wrapped as inline.
2.用户输入

  1. To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
  2. To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
3.代码块

  1. <pre><p>Sample text here...</p></pre>

总结

以上是BootStrap中最常见的内容，基于BootStrap开发可以大大提升工作效率。在BootStrap中还有很多其他的操作，不在课程中一一列举，更多请查阅官网 https://v3.bootcss.com/

posted @ 2021-05-09 21:00  风hua  阅读(66)  评论(0)  编辑  收藏  举报