前端框架-BootStrap

BootStrap是什么？

    Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

BootStrap官网中文介绍：http://www.bootcss.com/

BootStrap 的特点

       Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。个人理解： 可以使用BootStrap框架开发一个响应式的页面，可以同时使用与pc端，pad端和手机端，并且不影响浏览的效果。

下载BootStrap

    去官网下载对应的版本

BootStrap的结构：

1、 全局CSS

    *BootStrap定义了一套CSS的样式表.

2、组件

    *BootStrap定义的一套按钮，导航条...

3、JS插件

    *BootStrap定义的一套JS的插件.

BootStrap的入门开发

引入4个外部的文件，先后顺序不能反

<meta charset="UTF-8">

        <!--BootStrap设计的页面支持响应式的 -->

       <meta name="viewport"content="width=device-width, initial-scale=1">

        <title></title>

        <!--引入BootStrap的CSS-->

        <link rel="stylesheet"href="../../css/bootstrap.css" type="text/css"/>

        <!--引入JQuery的JS文件：JQuery的JS文件要在BootStrap的js的文件的前面引入-->

        <script type="text/javascript"src="../../js/jquery-1.11.3.min.js" ></script>

        <!--引入BootStrap的JS的文件-->

        <script type="text/javascript"src="../../js/bootstrap.js" ></script>

【BootStrap布局容器】

【BootStrap的栅格系统】

响应式的设计：

    * CSS3的样式：媒体查询（即：根据不同设备的宽度定义了不同的样式）

栅格样式：

    * 设备的分辨率大于 1200 使用lg样式

    * 设备的分辨率大于 992 < 1200 使用md样式

    * 设备的分辨率大于768 < 992 使用sm样式

    * 设备的分辨率小于 768 使用xs样式

将一行分成12列.定义div元素 样式的和加一起等于12 即可.

【BootStrap的全局CSS】

定义了一套CSS

  * 对页面中的元素进行定义:

  * 列表元素，表单，按钮，图片...

代码实现：

使用BootStrap布局网站的首页：

需求：

使用BootStrap布局网站的首页.

步骤分析：

Ø  步骤一：新建一个html页面.引入bootStrap的相应js和css

Ø  步骤二：定义一个整体的div，将整体的div分成8个部分.

Ø  步骤三：完成每个部分的显示.

代码实现: