Bootstrap，浅入一下。

        

目录

响应式布局原理：

Bootstrap简介：

1.优点

Bootstrap使用

Bootstrap栅格系统

Bootstrap列嵌套：

Bootstrap列偏移：

bootstrap列排序：

响应式工具：

---

 

响应式布局原理：

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

响应式尺寸划分：

• 超小屏幕(手机,小于768px) : 设置宽度为100%

• 小屏幕(平板，大于等于768px) :设置宽度为750px

• 中等屏幕(桌面显示器,大于等于992px) : 宽度设置为970px

• 大屏幕(大桌面显示器，大于等于1200px) : 宽度设置为1170px

Bootstrap简介：

1.优点

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

Bootstrap使用

1. 创建文件夹结构

2. 创建html骨架

3. 引入相关样式文件

4. 书写内容

Bootstrap栅格系统

它是指将页面布局划分为等宽的列 ,然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、 移动设备优先的流式栅格系统,随着屏幕或视口( viewport)尺寸的增加， 系统会自动分为最多12列。 Bootstrap里面container宽度是固定的,但是不同屏幕下, container的宽度不同,我们再把container划分为12等份

栅格选项参数

 

按照不同屏幕划分为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"

Bootstrap列嵌套：

 

Bootstrap列偏移：

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

 

注：如果只有一个盒子那么，偏移(12-盒子所占的分数）/2

bootstrap列排序：

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

 

响应式工具：

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