大家好，我是IT修真院郑州分院第6期的学员王栋，一枚正直、纯洁、善良的前端程序员今天给大家分享一下，修真院官网CSS（职业）任务8，深度思考中的知识点——bootstrap有哪些常用组件
undefined_腾讯视频
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
二、知识剖析
什么是组件
组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。
比如我们可以写一个官网的响应式导航栏组件，什么时候官网扩增页面了，可以直接拉过来重复使用。
目前常用的bootstrap组件：
1.轮播图
2.下拉菜单
3.响应式导航栏
为什么要使用bootstrap的下拉菜单
因为…………方便啊！！！！！ html的select下拉菜单不美观，而且自定义样式很麻烦。 bootstrap的下拉菜单是用div+ul+li实现的，可以完全实现样式的自定义，而且使用多级下拉菜单的时候也很方便
三、常见问题
如何使用这些bootstrap组件？
使用bootstrap是需要注意的问题
四、解决方案
下拉菜单
如需使用下拉菜单，首先要引入bootstrap文件，一般都是引入网上别人提供的cdn，当然，自己可以引入自己定制好的bootstrap文件。 然后只需要在 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"
1）.navbar-toggle样式是控制3根斑马线的。
2）.navbar-collapse 样式使导航链接可以在小屏幕状态下收纳到一个菜单按钮中
3）.collapsed是为了响应折叠插件的
4）.data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容
使用bootstrap的注意事项
bootstrap文件里面有很多默认设置，可能会在页面上起作用，这个要注意一下。 还有就是.当我们引入bootstrap.js和jquery.js文件时我们要注意引入该文件的先后顺序，要先引入jquery.js在引入bootstrap.js按照这样的顺序来引入文件， 否则就会报错。 因为bootstarp.js文件的开发是基于jquery开发的，所以要先引入jquery.js才可以使用bootstrap。 而且引入网上cdn的话要注意http和https的区别，有时候应用不对的话也会报错
五、编码实战
如上所述
六、拓展思考
如何处理现有插件不能满足需求的问题
bootstrap可以根据需要定制，BootStrap提供了根据自己需要的组件及jquery插件进行定制，使用者也可以直接修改Less源码。
如果不想整体上修改，也可以在组件上直接添加一个自定义的类，来覆盖bootstrap的默认属性。 需要注意的是bootstrap的样式权重很高，有可能需要我们使用!important来增加权重.
七、参考文献
参考二：菜鸟教程
八、更多讨论
如何不使用bootstrap制作响应式导航栏
使用jQury的foundation也可以快速的实现响应式的导航栏，当然还有很多方法大家可以多练习
鸣谢
叶紫阳︱熊凡
网友评论