Bootstrap

起步(Startup)

1. 是一个HTML/CSS/JS框架
2. HTML: 对H5标签添加了扩展属性 data-*
3. CSS: 6800行
   • CSS Reset
   • 1000+个class
4. JS: 基于jQuery提供了十几个插件
5. 适用于响应式Web项目开发
6. 下载css、fonts、js
7. 模板
8. Bootlint
9. 实例
10. 禁用响应式
11. 兼容性

全局样式(Global)

1. 按钮 .btn .btn-default .btn-danger/success/warning/info/primary .btn-lg/sm/xs .btn-block

2. 图片 .img-rounded .img-circle .img-thumbnail .img-responsive

3. 文本 .text-danger/success/warning/info/primary .bg-danger/success/warning/info/primary .text-uppercase .text-lowercase .text-capitalize .text-left/right/center/justify

4. 辅助类 .caret .close .pull-left/right .clearfix

5. 字体和排版 .list-unstyled .list-inline

6. 表格 .table .table-bordered .table-striped .table-hover .table-responsive

7. 栅格系统 .container / .container-fluid .row .col-lg/md/sm/xs-1/2/3... .col-lg/md/sm/xs-offset-1/2/3... .hidden-lg/md/sm/xs

8. 表单

默认表单

<

行内表单

<

水平表单

<

组件(Component)

1. 图标字体 .glyphicon .glyphicon-*

2. 按钮组 .btn-group > .btn

3. 下拉菜单 .dropdown > data-toggle="dropdown" + .dropdown-menu

4. 导航 .nav .nav-tabs .nav .nav-pills .nav .navbar-nav

5. 进度条 .progress > .progress-bar

6. 面包屑 .breadcrumb

7. 分页条 .pagination

8. 分页器 .pager

9. 标签 .label .label-五种颜色

10. 徽章 .badge

11. 巨幕 .jumbotron

12. 水井 .well

13. 页头 .page-header

14. 缩略图 .thumbnail > .caption

15. 媒体对象 .media > .media-left + .media-body + .media-right

16. 面板 .panel .panel-四种颜色 > .panel-heading + .panel-body + .panel-footer

17. 导航条 .navbar .navbar-default/inverse .navbar-fixed-top/bottom .container .navbar-header .navbar-brand .navbar-toggle .icon-bar .navbar-collapse .navbar-nav .nav .navbar-btn .navbar-text .navbar-link.navbar-text .navbar-form

JS插件(Plugin)

定制(Customize)