BOOTSTRAP有哪些常用组件

一、背景介绍

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。 
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

二、知识剖析

目前常用的bootstrap组件：

字体图标

下拉菜单

响应式导航栏

为什么要使用bootstrap的下拉菜单

因为html的select下拉菜单样式无法完全自定义，尤其是文字的居中方式。
bootstrap的下拉菜单是用div+ul+li实现的，可以完全实现样式的自定义。

三、常见问题

何使用这些bootstrap组件？

四、解决方案

字体图标

1.像span元素添加glyphicon glyphicon-menu-left类名
2.确保span内容为空

下拉菜单

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。
给下拉按钮添加dropdown-toggle类和指向性用id，如id="menu1",data-toggle用来控制弹出框元素
给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

响应式导航条

创建一个默认的响应式导航条的步骤如下:
1.向nav标签添加 class .navbar、.navbar-default。
2.向上面的元素添加 navbar-header，navbar-header
3.给navbar-header的button添加data-toggle="collapse" data-target="#example-navbar-collapse"。
4.给下面的div添加class="collapse navbar-collapse" id="example-navbar-collapse"

具体代码                            

<nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse"
                 data-target="#example-navbar-collapse">
            <!--<span class="sr-only">切换导航</span>-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">IT修真院</a>
      </div>
      <div class="collapse navbar-collapse" id="example-navbar-collapse">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN <span class="glyphicon glyphicon-wrench"></span></a></li>
            <li><a href="#">git</a></li>
         </ul>
      </div>
   </div>
</nav>                  

1.navbar-toggle样式是控制3根斑马线的。
2.navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中。
3.collapsed是为了响应折叠插件的。
4.data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容。

五、编码实战

六、拓展思考

如何处理现有插件不能满足需求的问题

bootstrap可以根据需要定制，BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。

如果不想整体上修改，也可以在组件上直接添加一个自定义的类，来覆盖bootstrap的默认属性。需要注意的是bootstrap的样式权重很高，有可能需要我们使用!important来增加权重.

如何处理现有插件不能满足需求的问题

bootstrap可以根据需要定制，BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。

如果不想整体上修改，也可以在组件上直接添加一个自定义的类，来覆盖bootstrap的默认属性。需要注意的是bootstrap的样式权重很高，有可能需要我们使用!important来增加权重。

七、参考文献

参考一：入门 Hello bootstrap。

参考二： 菜鸟教程。

八、更多讨论

如何使用原生js+css写出bootstrap的组件。