Bootstrap前端开发框架

1.Bootstrap简介

来自Twiter，用于开发响应式布局、移动设备优先的web项目

框架：有一套比较完整的网页功能解决方案，控制权在于框架本身，有现成的方案可以拿过来用，在此基础上可以进行修改

2.Boostrap的使用

2.1步骤：

1.创建文件夹结构

2.创建html骨架结构

3.引入相关样式文件

4.书写内容

直接拿来预先定义好的样式来使用

修改bootstrap原来的样式，增加类名，注意权重问题

学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式实现了什么样的效果

2.2 布局容器

1 .container类

响应式布局的容器，固定宽度：大屏(>=1200px ) 宽度1170px

					      中屏(>=992px )  宽度970px

					      小屏(>=768px )  宽度750px

					      超小屏(100%)

2.container-fluid 类

• 流式布局容器 百分百宽度
• 占据全部视口(viewport)的容量
• 适合于单独做移动端开发

3.栅格系统

3.1简介

它是指将页面布局(container)划分为等宽的列。

bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列

3.2栅格选项参数

栅格系统通过行row和列col的组合来创建页面布局的（12列）

• 行必须放到container布局容器中

• 实现列的平均划分需要给列添加类前缀 : .col-xs-、.col-sm-、.col-md-、.col-lg-

• xs-extra small: 超小；sm-small：小；md-medium：中等；lg-large：大

• 每一列默认有左右15像素的padding（可以通过css去掉）

• 可以同时为一列指定多个设备的类名(多类名方式)，以便划分不同份数：class=“col-md-4 col-sm-6” 中等屏幕下一行放3列，小屏幕下一行放2列

注：通栏的盒子不需要container；container里面分行row再分列col

3.3列嵌套

栅格系统内置的栅格系统将内容再次嵌套。一个列内再分为若干份（12）的小列

列嵌套最好加一个行row，这样可以取消父元素的padding值，而且高度自动和父级一样高

3.4列偏移

使用 .col-md-offset-偏移份数 可以将列向右侧偏移，偏移的份数=12-盒子数

实际是通过使用*选择器为当前元素增加了左侧的边距

所有盒子贴着左侧对齐，所以要偏移右侧的盒子

3.5列排序

使用 .col-md-push- 和 .col-md-pull- 可以改变列的顺序

• push推(往右移) 左侧盒子向右推 推多少？推右侧盒子的列数
• pull拉(往左移) 右侧盒子向左拉 拉多少？拉左侧盒子的列数

3.6响应式工具

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

相反，visible-xs、visible-md、visible-lg 可以显示某个页面内容