BootStrap系列：BootStrap组件

BootStrap组件

---

一、按钮

二、表格

1. 基本表格  

    table.table>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n   table.table>caption+(thead>tr>th*n)+tbody>tr*n>td*n

2. 可选的表格类1：条纹表格  

    table.table.table-striped>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n

3. 可选的表格类2：边框表格  

    table.table.table-bordered>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n

4. 可选的表格类3：悬停表格   

   table.table.table-hover>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n

5. 可选的表格类4：精简表格   

   table.table.table-condensed>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n

6. 上下文类 

     table.table>caption+(thead>tr>th*n)+tbody>((tr.颜色>td*n))*n

7. 响应式表格   

    div.table-responsive>table.table>caption+(thead>tr>th*n)+tbody>((tr>td*n))*n

三、表单

1. 表单布局
• 垂直表单（默认）
• 内联表单
• 水平表单
2. 垂直或基本表单
• 向父 <form> 元素添加 role="form"
• 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 
3. 内联表单
• 向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline
4. 水平表单
• 向父 <form> 元素添加 class .form-horizontal
• 把标签和控件放在一个带有 class .form-group 的 <div> 中
• 向标签添加 class .control-label
5. 支持的表单控件
• 输入框Input       类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 、color
• 文本框Textarea       属性rows  <textarea class="form-control" rows="3"></textarea>
• 复选框Checkbox        .checkbox-inline ，控制它们显示在同一行上。
• 单选框Radio         .radio-inline，控制它们显示在同一行上。
• 选择框Select          想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框
• 静态控件           在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static
• 表单控件大小             .input-lg等 和 .col-lg等-* 来设置表单的高度和宽度
• 表单帮助文本            为了添加一个占用整个宽度的内容块，在 <input> 后使用 .help-block
6. 输入框组     http://www.runoob.com/bootstrap/bootstrap-input-groups.html
• 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
• 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
• 把该 <span> 放置在 <input> 元素的前面或者后面。

四、布局组件

1. 字体图标Glycerines  http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
• <span class="glyphicon glyphicon-search"></span>
• 在线定制字形图标 http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
2. 下拉菜单dropdowns http://www.runoob.com/bootstrap/bootstrap-dropdowns.html
3. 按钮组【见上图】 http://www.runoob.com/bootstrap/bootstrap-button-groups.html
4. 按钮下拉菜单【见上图】 http://www.runoob.com/bootstrap/bootstrap-button-dropdowns.html
5. 导航元素
• 以一个带有 .nav 的无序列表开始。
• 添加  .nav-tabs
• 标签式 的导航菜单 ul.nav.nav-tabs>li*n>a
• 胶囊式 的导航菜单【普通】 ul.nav.nav-pills>li*n>a
• 标签式 的导航菜单【垂直】 ul.nav.nav-tabs.nav-stacked>li*n>a
• 两端对齐 的导航菜单 ul.nav.nav-justified>li*n>a
• 带有下拉框 的标签 在需要有下拉框的一个li里的a加 class="dropdown-toggle" data-toggle="dropdown"  在li下加ul.dropdown-menu>li>a
• 动态标签1 tab-content  http://www.runoob.com/try/try.php?filename=trybs_ref_comp_nav-toggle&basepath=0
• 动态标签2 tab-pane  http://www.runoob.com/try/try.php?filename=trybs_ref_comp_nav-toggle&basepath=0
6. 导航栏
• 向 <nav> 标签添加 class .navbar、.navbar-default。
• 向上面的元素添加 role="navigation"，有助于增加可访问性。
• 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。会让文本看起来更大一号。
• 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
• 响应式导航栏
• 要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中
• 折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。
• 第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。
• 三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮
• 这些会切换为 .nav-collapse <div> 中的元素
• 导航栏中的表单：  .navbar-form
• 导航栏中的按钮：  .navbar-btn
• 导航栏中的文本：  .navbar-text
• 导航栏中的对齐方式：  .navbar-left|right
• 固定到顶部|底部： .navbar-fixed-top|bottom
• 静态的顶部|底部： .navbar-static-top
• 反色的导航栏： .navbar-inverse
• 面包屑导航栏：breadcrumb
7. 徽章Badges  <span class="badge"></span>
8. 超大屏幕Jumbotron   <div class="jumbotron"> </div> 这个标签会出现灰色的背景颜色
9. 页面标题Page Header   <div class="page-header"> <h1>页面标题实例 <small>子标题</small> </h1> </div>
10. 缩略图
• 在图像周围添加带有 class .thumbnail 的 <a> 标签。
• 这会添加四个像素的内边距（padding）和一个灰色的边框。
• 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
11. 进度条  http://www.runoob.com/bootstrap/bootstrap-progress-bars.html
• 添加一个带有 class .progress 的 <div>。
• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
• 添加一个带meiy有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。
12. 多媒体对象Media Object
• 媒体对象可以用更少的代码来实现媒体对象与文字的混排
• http://www.runoob.com/bootstrap/bootstrap-media-object.html
13. 分页Pagination  http://www.runoob.com/bootstrap/bootstrap-pagination.html
14. 列表组 http://www.runoob.com/bootstrap/bootstrap-list-group.html
15. 面板Panels
• http://www.runoob.com/bootstrap/bootstrap-panels.html
• <div class="panel panel-default"> <div class="panel-heading"> 不带 title 的面板 </div> <div class="panel-body"> 内容 </div> </div>
16. Wells  一种会引起内容凹陷显示或插图效果的容器 <div>   <div class="well">您好，我在 Well 中！</div>