Bootstrap浅析

定义

Bootstrap是由Twitter研发的一个基于HTML、CSS、JavaScript的开源框架。

该框架代码简单、视觉优美，具有简单灵活的特性，拥有样式库、组件和插件。因为响应式布局的特性，可以兼容PC、PAD、手机移动端的页面访问。

特点

1. 跨设备、跨浏览器：可以兼容现在的所有浏览器

2. 响应式布局：不但支持PC各种分辨率，还支持移动端的响应式切换显示

3. 全面的组件：提供了实用性很强的组件，包括导航、标签、按钮等，方便调用

4. jQuery插件：提供了很实用的jQuery插件，方便实现常规特效

5. 支持HTML5和CSS3：HTML5的语义化标签和CSS3的属性都得到了很好的支持

6. 支持CSS预处理器：支持less动态样式，使用变量、嵌套操作混合编码

使用

下载

下载Bootstrap库

引入

页面中引入库

<!-- 引入Bootstrap的css(层叠样式) -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
……
<!-- 必须在Bootstrap核心库引入之前引入jQuery库 -->
<!-- 引入JQuery库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Bootstrap的类库 -->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

标签

在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。

栅格系统

栅格系统又称网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。

行和列

Bootstrap栅格将页面布局划分为等宽的列，随着屏幕或视口尺寸的增加，自动分为1~12列。通过一系列的行（row)与列(column）的组合来创建页面布局。

开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

基本使用方法

• Bootstrap栅格系统为不同屏幕宽度定义了不同的类，直接给标签添加类名使用

• 行必须包含在布局容器中，方便赋予合适的排列

• 通过行可以在水平方向创建一组列，并且只有列可以作为行的子元素

• 行使用样式row，列使用样式cloumn，内容放置在列里面

组件

组件是构成页面的独立结构单元，是对结构的抽象，它主要以页面结构形式存在，复用性很强。

每个组件拥有自己的作用域，组件区域之间独立工作互不影响。组件可以有自己的属性和方法，不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。

特点

复用性强，提高开发效率

降低代码耦合程度，使代码更容易维护和管理