(imooc)bootstrap快速入门2

三、Bootstrap组件

       一个网站，一个app或者一个系统的构建

        一些零件的组合

       不同组件相互组合

（字体图标  下拉菜单  警告框  弹出框）

怪异的属性

1、role： HTML5的标签属性，标识普通标签使其语义化，方便浏览器对其具体功能进行识别，给特定的浏览器使用比如盲文浏览器。
2、aria-label：用在输入框，当焦点落到输入框时读屏软件可读出输入框的内容，配合读屏软件使用。
3、tabIndex：设置键盘的Tab键在控件中的移动，就是焦点的移动顺序，方便一些有障碍的人士浏览网页。
4、data-：HTML5新增的用于自定义的属性，不影响页面显示，管理自己想要实现的数据传递，包括数据交互的一些效果。涉及组件交互，比如下拉菜单、点击等

 

字体图标

        体积小，无需重复设计，方便引用( http://v3.bootcss.com/components/)

        大小颜色随意改变

   

下拉菜单

1   .dropdown  控制组件为下拉

2   .dropdown-menu-right    右对齐

3    divider 分割线

*****没有实现，下拉菜单显示不出来

控件组

1   .input-group   表示控件组

2   .input-group-addon   可放置额外内容及图标

导航

1   以一个带有class .nav的无序列表开始

2   .nav-tabs 代表可切换的导航

3   .nav-pills  代表胶囊导航       nav-stacked(变成垂直)

4   .nav-justified 使导航垂直

active  默认选中

分页

1  .pagination   在父元素中添加表示分页    pagination-lg/sm    变大/小

2   .pager    放置在翻页区域

3   .previous    把链接向左对齐        .next     把链接向右对齐

进度条

1   .progress 表示进度条

2    通过状态类改变进度条颜色

      progress-bar   进度条内容

3    .progress-bar-striped  使得进度条颜色渐变

列表

1  .list-group  代表列表组

      list-group-item  列表项

2  .badge    代表状态数

3   .active    代表选中状态

面板

1   .panel  代表面板

2   .panel-heading  面板头

     .panel-body  面板内容

3   .panel-footer   面板注脚

      

四、Bootstrap插件

bootstrap插件依赖于bootstrap.js bootstrap.js基于jquery (先后顺序)

1  通过data属性控制页面交互

2  $(document).off('.data-api')解除属性绑定

****没实现（为什么每次都涉及data-toggle?）