小课堂【郑州第五十九期】

一、背景介绍

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。 

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

二、知识剖析

组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。 例如V8引擎是Chrome浏览器的一部分，负责运行javascript代码，这里V8引擎就可以视为一个组件。V8引擎同时也是Node.js的javascript解释器，这体现了组件的可复用性。

目前常用的bootstrap组件：

下拉菜单

导航栏

分页

输入框组

。。。

下拉式菜单：在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。 下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。 下拉菜单内的项目可以据需要设置为多选或单选，可以用来替代一组复选框（设置为多选）或单选框（设置为单选）。这样比复选框组或单选框组的占用位置小，但不如它们直观。

三、常见问题

如何使用这些bootstrap组件

四、解决方案

下拉菜单，如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。

给下拉按钮添加dropdown-toggle类和指向性用id，如id="menu1"

给菜单列表添加dropdown-menu类和aria-labelledby="menu1"用来表示指向哪个菜单，因为有可能有多个菜单

导航栏，创建一个默认的导航栏的步骤如下：

1.向nav标签添加 class .navbar、.navbar-default。

2.向上面的元素添加 role="navigation"，有助于增加可访问性。

3.向div元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的a元素。这会让文本看起来更大一号。

4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

五、编码实战

六、拓展思考

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

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

Bootstrap的使用非常灵活，可以对各种组件进行合并使用，建议使用过程中实时参考官方文档，官方文档有更详细的下载及使用说明。

七、参考文献

参考一：入门 Hello bootstrap

参考二： 菜鸟教程

八、更多讨论

如何写出自己的组件库

ppt链接：https://ptteng.github.io/PPT/PPT/css-08-bootstrap component.html

视频链接：