简洁、直观、强悍的Bootstrap前端开发框架

简洁、直观、强悍的Bootstrap前端开发框架，让我们的web开发变得更迅速、简单.

在我们学习Bootstrap前端开发框架之前,我们先来了解一个概念!

什么是框架?

框架顾名思义就是一套架构,框架有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。
使用者必须按照框架所规定的某种规范进行开发。

了解完框架以后,我们接下来开始学习Bootstrap.

Bootstrap简介

Bootstrap来自Twitter（推特是目前最受欢迎的前端框架)。
Bootstrap是基于 HTML 、 CSS 和 JavaScript的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap下载链接

Bootstrap中文官网

优点

标准化的 HTML+ CSS 编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

版本

2.x.x ：停止维护兼容性好代码不够简洁，功能不够完善。
3.x.x ：目前使用最多、稳定但是放弃了IE6、IE7 。对 IE8支持但是界面效果不好偏向用于开发响应式布局、移动设备优先的 WEB 项目。
4.x.x ：最新版，目前还不是很流行

好了,好了,说了这么多,不如直接教给大家怎么使用才是最重要的!

Bootstrap的使用

Bootstrap的使用控制权在框架本身,使用者必须按照框架所规定的的某种规范进行开发.

Bootstrap的使用四步走战略

1. 创建HTML文件夹结构

2. 创建HTML骨架结构

3. 引入相关的样式文件

4. 书写页面内容

创建HTML文件夹结构

这第一步创建HTML文件夹结构,就不用多说了吧!大家都心知肚明的.

创建HTML骨架结构

这一步需要注意的地方还是很多的!

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><!--要求当前网页使用 IE 浏览器最高版本的内核来渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口的设置：视口的宽度和设备一致，默认的缩放比例和 PC 端一致，用户不能自行缩放--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head><body><h1>你好，世界！</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body></html>

引入相关的样式文件

<!--Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

书写页面内容

我们在书写页面内容的时候,可以直接拿Bootstrap预先定义好的样式来使用
修改Bootstrap原来的样式的时候,注意权重问题
学好Bootstrap的关键在于知道它定义了那些样式,以及这些样式能实现什么样的效果

布局容器

Bootstrap需要为页面内容和栅格系统包裹一个 container 容器，它提供了两个作此用处的类。

container类

响应式布局的容器固定宽度
大屏 ( 1200px ) 宽度定为 1170px
中屏 ( 992px ) 宽度定为 970px
小屏 ( 768px ) 宽度定为 750px
超小屏 (100%)

container-fluid 类

流式布局容器百分百宽度
占据全部视口（ viewport ）的容器。

栅格系统简介

栅格系统英文为“grid systems也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（ viewport ）尺寸的增加，系统会自动分为最多 12 列。

栅格选项参数

栅格系统用于通过一系列的行（row）与列 (column) 的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

按照不同屏幕划分为 1~12 等份
行（ row）可以去除父容器作用15px的边距，以及外边距
xs -extra small：超小； sm -small：小； md -medium：中等； lg -large：大；
列（ column）大于 12 ，多余的“列 column ”所在的元素将被作为一个整体另起一行排列
每一列默认有左右 15 像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class="col-md-4 col-sm-6"

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。
简单理解就是一个列内再分成若干份小列
我们可以通过添加一个新的 .row 元素和一系列 .col sm --*元素到已经存在的.col sm --*元素内。

<!--列嵌套-->
<div class="col-sm-4"><div class="row"><div class="col-sm-6">小列 </div><div class="col-sm-6"> 小列 </div></div>
</div>

列偏移

使用.col md offset --*类可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin )。

<!--列偏移-->
<div class="row"><div class="col-lg-4">1</div><div class="col-lg-4 col-lg-offset-4">2</div>
</div>

列排序

通过使用.col md push --* 和.col md pull --*类就可以很容易的改变列column 的顺序。

<!--列排序-->
<div class="row"><div class="col-lg-4 col-lg-push-8"> 左侧 </div><div class="col-lg-8 col-lg-pull-4"> 右侧 </div>
</div>

响应式工具

为了加快对移动设备的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

相反的是visible-xs、visible-sm、visible-md、visible-lg是显示某个页面内容

Bootstrap其他(按钮、表单、表格等等)请进入Bootstrap中文官网参考 Bootstrap 文档 ,进行学习.