BootStrap框架

一.BootStrap框架简介

BootStrap框架用来快速开发响应式网页
Bootstrap 是由 Twitter 公司开发维护的前端 UI框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果

中文官网: https://www.bootcss.com/

二.BootStrap使用步骤

首先引入:BootStrap提供的CSS代码，注意不要引错文件，要引入bootstrap.css文件，引入bootstrap.min.css文件也可以，该文件被压缩过加载速度更快
在头部区域引入：

然后就可以调用相关类(Bootstrap提供的样式)
比如：
container:响应式布局版心类
相关组件与插件使用还得引入js文件，下面会提及

1.常用类(容器)

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和.col类名定义栅格布局的行和列
注意
1.container类自带间距15px;
2.row类自带间距-15px
例子（加row类删除container类自带的间距）：

<div class = "container">
   <div class = "row">
   </div>
</div>

前后效果：

三.Bootstrap栅格系统

BootStrap栅格系统用来布局响应式网页
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
框架相关定义如下：

其中原理是通过媒体查询来创建关键的分界点阈值实现效果

/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { … }
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { … }
/ 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }

其中要记住各种屏幕的别名还有类前缀，类前缀中的*表示占几份，份数算法是12除以子元素个数，比如有两个就各占6份，再加上是在中等屏幕的前提下，那么类的书写为：col-md-6

下面是相关示例(只给出body代码)：

<div class="container">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="container">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="container">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="container">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

效果如下：

也可以混合使用，比如是大屏幕时各占1份中等屏幕时各占4份
代码：

<div class="container">
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
  <div class="col-lg-1 col-md-4">.col-md-1</div>
</div>

这样拖拽网页宽度就能看到效果了

四.全局样式

掌握BootStrap手册用法，使用全局CSS样式美化标签
手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
网站首页——>Bootstrap3中文文档 ——>全局css样式——> 按分类导航查找目标类
导航在网站右侧：

例子(使用按钮样式)：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

效果：

五.组件

组件是BootStrap提供的常见功能，包含了HTML结构和CSS样式

使用方法：
引入BootStrap样式
复制结构，修改内容

使用字体图标，直接复制类名即可使用：

    <div class="glyphicon glyphicon-cloud"></div>

使用下拉菜单：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">gt;Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

效果：

我们可以根据结合自身需求对代码内容结构进行修改
如果弹不出菜单，因为这属于交互效果，由于没有引入相关js文件所以没效果，下面讲述插件会引入

六.插件

插件的使用步骤：
引入BootStrap样式
引入js文件:jQuery;js + BootStrap.min.js
在body中引入

相关插件使用跟组件差不多，具体查看官网各取所需

七.定制

你可以自己修改less变量反映出你想要的效果，通过导航找到需要的模块修改对应变量

也可以导入自己的配置文件进行定制

八.响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类
有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
部分示例：