这里是修真院web小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解web知识/技能，本篇分享的是：
【 bootstrap有哪些常用组件】
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
什么是组件？
组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。
例如bootstrap的轮播图就是一个组件。他可以应用在不同的网站开发中。
目前常用的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"用来表示指向哪个菜单
示例代码：
响应式导航条
创建一个默认的响应式导航条的步骤如下:
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"
示例代码：
如何处理现有插件不能满足需求的问题
bootstrap可以根据需要定制，BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。
如果不想整体上修改，也可以在组件上直接添加一个自定义的类，来覆盖bootstrap的默认属性。需要注意的是bootstrap的样式权重很高，有可能需要我们使用!important来增加权重。
参考文献：
参考二：菜鸟教程
作者：自娱自楽
链接：https://www.jianshu.com/p/513dddacddae
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地