BootStrap介绍

1.Bootstrap

• Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架（半成品）。其预定义一套CSS样式和与样式对象的jQuery代码，我们只需要提供固定的HTML结构，添加固定的class样式，就可以完成指定效果的实现
• Bootstrap是在jQuery的基础上工作的，即Bootstrap是jQuery的一个插件。
• Bootstrap使得Web开发更加快捷，代码优雅，美观大方

 

2.Bootstrap包含的内容

• 全局CSS：基本的 HTML 元素均可以通过 class 设置样式并得到增强效果，还有栅格系统
• 组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能
•  JavaScript 插件：是jQuery插件，带了一些其它的功能，eg：轮播图

 

 3.Bootstrap模板文件创建步骤（ Bootstrap的下载  http://www.bootcss.com，下载用于生产环境的Bootstrap即可）

只需要创建一次，以后可直接复制这个模板使用

•  复制三个文件夹css、js、fonts到项目目录下
•  复制jQuery框架到js目录下
•  复制“开始 ==> 基本模板"的代码到HTML中

 

4.栅格系统

​ （1）响应式布局

• 响应式布局是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本
• 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验
• Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query(媒体查询)

（2）栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，我们的内容就可以放入这些创建好的布局中

Bootstrap 栅格系统的特点：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适

  的排列（aligment）和内间距（padding）

• 通过“行（row）”在水平方向创建一组“列（column）”

• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素

• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来

  创建

• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整

  体另起一行排列