1 介绍

  Bootstrap是美国**Twitter公司**的设计师Mark Otto和Jacob Thornton合作**基于HTML、CSS、JavaScript**开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。  Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

boostrap中文网：https://www.bootcss.com/
boostrap4下载地址：https://v4.bootcss.com/docs/getting-started/download/

  目前使用较广的是版本2、3和4，其中2的最新版本的是2.3.2，3的最新版本是3.4.1，4的最新版本是4.5.1,在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面：
（1）从 Less 迁移到 Sass
（2）改进网格系统
（3）缺省弹性框支持
（4）Dropped wells, thumbnails, and panels for cards
（5）合并所有 HTML resets 到一个新的模块中：Reboot
（6）全新自定义选项
（7）不再支持 IE8
（8）重写所有的 JavaScript 插件
（9）改进工具提示和 popovers 的自动定位
（10）改进文档

bootstrap的优点：
（1）移动设备优先。
（2）自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
（3）各种浏览器的支持。
（4）容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
（5）快速开发：bootstrap给我提供了大量的样式，布局解决方案和插件库，可以让程序员从基本的样式设计和调试上解放，快速搭建项目。同时bootstrap还给我们提供了大量的常用网页组件，可以让我们直接复制代码后,简单修改即可使用。ctrl-c ctrl-v
（6）响应式设计：Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
（7）它为开发人员创建接口提供了一个简洁统一的解决方案。
（8）包含了功能强大的内置组件，易于定制。
（9）提供了基于 Web 的定制。
（10）完全开源。

2 使用方法

（1）先去官网下载相应的CSS和JavaScirpt封装的Bootstrap包

（2）解压数据，然后复制到自己的web项目中

（3）创建你要编写的页面，然后用

cdn方式

（4）从官网中招相应你想要的组件，然后复制相应的代码到自己的项目中

 
 
 
 
 Primary
 Secondary
 Success
 Danger
 Warning
 Info
 Light
 DarkLink
 
 

效果就出来了，如下图

总结:

（1）bootstrap是一款优秀的前端框架，它能够让我们快速搭建项目，现有大量样式库可以供我们使用，可以帮助我们实现快速开发，使用bootstrap的感受基本上就是ctrl+c然后ctrl+v ，修改一下就可以实现前端页面的快速开发。
（2）bootstrap在导入js文件时，要求顺序是先导入jQuery，然后是popper.js(包含于bootstrap.bundle.min.js中)，最后是bootstrap.min.js
（3）不同的版本对于jQuery版本的要求时不一致的，导入时要注意jQuery的版本。

3 流容器和固定容器

什么是容器？
  Bootstrap 4 需要一个容器元素来包裹网站的内容，说白了就是要用一些标签来装其他的标签，这样便于我们对网页做整体的布局设计，一般我们选择用div来做容器，对应的容器类有两个，一个是固定容器 .container 一个是流容器 .container-fluid。

容器类介绍
（1）.container 类用于固定宽度并支持响应式布局的容器。
（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器（会自适应变化）。

 
 
 
 
 
我的第一个 Bootstrap 页面
这是一些文本。
 
我的第一个 Bootstrap 页面
使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。
 
 
 
 

两者区别：
（1）固定容器的响应式布局规则是当窗口大小变化时，在指定的宽度范围内使用固定的宽度。
（2）流容器的响应式布局规则是随着窗口大小的变化一同变化，横向全部占满。

固定容器的阈值如下图:

4 栅格系统

  Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要定义列数。

Bootstrap 4 网格系统有以下 5 个类:
（1）.col- 针对所有设备
（2）.col-sm- 平板 - 屏幕宽度等于或大于 576px
（3）.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
（4）.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
（5）.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则:
（1）网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
（2）使用行来创建水平的列组class=row。
（3）内容需要放置在列中，并且只有列可以是行的直接子节点。
（4）预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
（5）列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
（6）网格列是通过跨越指定的 12 个列来创建。 （例如，设置三个相等的列，需要使用三个.col-sm-4 来设置。）
（7）Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。

案例

 
 
 
 
 
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
 
 

5 导航栏

 
 
 
 
 
欢迎学习导航栏

主页
导航栏1
导航栏2
导航栏3

主页
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

导航栏1
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

导航栏2/h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

优秀学员
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
 
 
 
 

6 轮播图

 
 
 
 
江河
Nulla vitae elit libero, a pharetra augue mollis interdum.
山川
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
公路
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
火车
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
PreviousNext