20190430-Bootstrapの组件

写在前面的乱七八糟：今天务必要把BT盘完~任重道远~

1、字体图标

2、下拉菜单

3、按钮组

4、输入框组

5、导航

5.1标签页

5.2胶囊式标签页

5.3路径导航/面包屑导航

6、导航条

7、分页

8、标签

9、徽章

0、巨幕

11、页头

12、缩略图

13、警告框

14、进度条

15、媒体对象

内容

1、字体图标

由 Glyphicon Halflings免费提供的字体图标，故带glyphicon类名

1.1使用i标签或span标签

1.2标签内容为空

1.3不与其他组件混用，不与其他类名一起

PS：刚测试了一下，其实是可以共用的，但这并不符合BT的规则

<i class="glyphicon glyphicon-menu-left">卧室</i>

<button class="btn btn-defult glyphicon glyphicon-menu-left"></button>

所以还是乖乖地改回来~

<i class="glyphicon glyphicon-menu-left"></i><span>卧室</span>

<button class="btn btn-defult">

     <i class="glyphicon glyphicon-menu-left"></i>

</button>

虽然呈现上是米有什么区别的~

2、下拉菜单

2.1组成：下拉菜单由一个类名为dropdown的容器，与一个带dropdown-toggle下拉切换类名的按钮和一个带dropdown-menu类名的无序列表组成

2.2实例：

<div class="dropdown">

     //dropdown容器，data-toggle通过该自定义属性执行切换JS操作

     <button class="btn btn-default" data-toggle="dropdown">

            下拉菜单<span class="caret"></span>//箭头按钮

     </button>

     <ul class="dropdown-menu">//通过dropdown-menu与按钮关联

           <li><a class="#">首页<a/></li>

           <li><a class="#">新闻<a/></li>

     </ul>

</div>

2.3参数：

3、按钮组

3.1按钮组

将多个.btn放一起组成.btn-group

<div class="btn-group">

    <button class="btn btn-default"><i class="glyphicon glyphicon-zoom-in"></i></button>

    <button class="btn btn-default"><i class="glyphicon glyphicon-zoom-out"></i></button>

</div>

3.2按钮工具栏

将多个.btn-group放一起组成.btn-toolbar，没什么特别~只是为了可读性

<div class="btn-toolbar">

  <div class="btn-group">...</div>

  <div class="btn-group">...</div>

  <div class="btn-group">...</div>

</div>

3.3尺寸：.btn-group-*

3.4嵌套：将一个.btn-group放在另一个.btn-group中

3.5参数：

3.6按钮式下拉菜单

emmm，是按钮跟下拉菜单的下一代吗？？

前面的下拉菜单触发时，使用类名dropdown，而此处将该类名更改为.btn-group。

而分列式按钮组只是在按钮前再加上一个按钮，确定不是来？？增加学习成本的吗？

4、输入框组

4.1组成：输入框组由一个display：inline-table的.input-group的div，分成.input-group-addon的span与.form-control的input

4.2参数：

5、导航

5.1标签页

.nav .nav-tabs的ul无序列表

5.2胶囊式标签页

.nav .nav-pills的ul无序列表

.nav .nav-pills .nav-stacked的垂直ul无序列表

.nav .nav-justified的两端对齐无序列表

li.disabled禁用 active点击 .dropdown下拉列表

5.3路径导航/面包屑导航

6、导航条

.navbar的nav容器

.container/.container-fluid的容器

.navbar-header的容器下的navbar-brand的a中放着logo

.collapse navbar-collapse折叠导航，即到768px时，导航会折叠成为一个垂直点击的导航