1、背景介绍

       Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架?他是由美国的Twitter 公司开发的一款简洁、直观、强悍的 前端开发框架，作用就是使得 Web 开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目 国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。

2、知识剖析

（1）什么是组件？

        组件:一般就是是指软件系统的一部分，每个承担了特定的职责，他呢可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。比如我们可以写一个官网的响应式导航栏组件，什么时候官网扩增页面了，然后就是我们可以直接拉过来重复使用。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。

（2）目前常用的组件有哪些？

        目前常用的bootstrap组件：1、轮播图 2、下拉菜单3、响应式导航栏

3、常见问题

（1）为什么使用bootstrap？

（2）背景颜色还有字体怎么更改

（3）导航栏介绍

4、解决方案

（1）首先队对于我们这些初学者来说，就是简单容易上手：只要你具备 HTML 和 CSS 的基础知识，你就可以开始学习Bootstrap。然后移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式，现在的bootstap4 ，用的flex布局可以更简洁直观，浏览器支持：所有的主流浏览器都支持 Bootstrap。

（2）关于背景字体颜色，直接在开发者工具里找到其对应颜色属性进行修改

（3）导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

5、编码实战

6、拓展思考

使用bootstrap需要注意的问题？

（1）一定要把行和列包裹在.container中，如果不包裹，行内元素会占据整个body，而container是固定宽度1170px

（2）Bootstrap是基于border-box为盒模型基准尺寸，即box-sizing属性为border-box，意思是为元素指定的宽和高等于内容+内边距+边框的大小（房屋面积含墙体），所以增加内边距会使内容尺寸变小Bootstrap是基于border-box为盒模型基准尺寸，即box-sizing属性为border-box，意思是为元素指定的宽和高等于内容+内边距+边框的大小（房屋面积含墙体），所以增加内边距会使内容尺寸变小

（3）在每一行中最多可以指定12列，指定的列越多，每一列所分得的列宽也越小，当列宽不足以盛下元素时，溢出部分会被隐藏，这提示我们overflow属性设置为hidden。所以当你设置col-lg-3时，意味着你可以在这一行下写4个这样宽度的列，你若多写一个会自动换行。

（4）若要做成响应式的网页，千万不要让你的块级元素有固定的较大宽度，或者元素的内外边距有固定的较大宽度，否则在移动设备上会有页边出现，或者有元素溢出。哪怕是margin-left:50%这样的都要小心用，因为你使用这条语句的目标元素自身的宽度很可能会在小屏幕上超过50%的屏幕像素，除非该元素本身也是响应式的。 

（5）负的外边距在右或下时，对独立的元素而言，周围会产生一个磁场，一右边或下边有元素，就会被吸进这个黑洞（减掉相应的外边距）；负的外边距在左或上时，会使元素左移或上移相应外边距的距离。