如何使用bootstrap网格系统实现响应

禁止响应式布局有以下步骤:1 .去掉这个CSS文档中提到的设置浏览器视口的标签:。2.属性设置宽度值来重写框架的默认宽度设置。容器类，比如宽度:970px！重要；。确保所有这些设置都放在默认的引导CSS文件后面。注意，如果放在媒体查询里，也可以省略！重要的.3.如果您使用导航栏，您需要删除所有导航栏的折叠和行为。4.对于网格布局，添加。col-xs-*分类或替换。col-md-*和。col-lg-*。别担心，超小屏幕设备的网格系统可以在所有分辨率环境下工作。5.对于IE8还是需要引入Respond.js文件(因为还是使用了浏览器对媒体查询的支持，所以还是需要处理)。这将禁用Bootstrap对移动设备的响应支持。

elvui怎么调整布局？

通过Col组件的:span属性调整Layout布局，分为24栏。

1

2

3

el-row>

<el-col :span="24"><p class="grid-content bg-purple-dark"></p></el-col>

</el-row>

　　

2.分栏间隔

通过Row组件的:gutter属性来调整布局之间的宽度

1

2

3

4

<el-row :gutter="20">

<el-col :span="6"><p class="grid-content bg-purple"></p></el-col>

<el-col :span="6"><p class="grid-content bg-purple"></p></el-col>

</el-row>

　　

3.分栏漂移

通过Col组件的:offset属性调整栅格的偏移位置（每次1格/24格）。

1

2

3

4

<el-row :gutter="20">

<el-col :span="6" :offset="6"><p class="grid-content bg-purple"></p></el-col>

<el-col :span="6" :offset="6"><p class="grid-content bg-purple"></p></el-col>

</el-row>

　　

4.对齐方式

通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有

start 居前（默认）

center 居中

end 居后

space-between 分布自适应（两边–中间，两边没有空隙）

around （中间–两边，两边会有空隙）

1

2

3

4

<el-row type="flex" class="row-bg" justify="center">

<el-col :span="6"><p class="grid-content bg-purple"></p></el-col>

<el-col :span="6"><p class="grid-content bg-purple-light"></p></el-col>

</el-row>

　　

5.响应式布局

参考bootstrap的响应式，预设四个尺寸

xs <768px

sm ≥768px

md ≥992

lg ≥1200

1

2

3

4

5

6

<el-row :gutter="10">

<el-col :xs="8" :sm="6" :md="4" :lg="3"><p class="grid-content bg-purple"></p></el-col>

<el-col :xs="4" :sm="6" :md="8" :lg="9"><p class="grid-content bg-purple-light"></p></el-col>

<el-col :xs="4" :sm="6" :md="8" :lg="9"><p class="grid-content bg-purple"></p></el-col>

<el-col :xs="8" :sm="6" :md="4" :lg="3"><p class="grid-content bg-purple-light"></p></el-col>

</el-row>

　　

ICON图标

今后可以使用<i>来做图标，给其class添加el-icon-iconName即可。

可以在<button>上添加icon属性。

bootstrap式创业特点？

优点：

可以实现响应式布局，开发响应式布局网站很便捷

统一的编码风格

简单易写

详细的说明文档，可快速开发

移动设备优先

性能成熟，在大量项目中使用测试过

缺点：

有兼容性问题，ie6以下不支持

不支持sass

使用定制会产生大量冗余代码

解释响应式布局，怎么实现的？有几种方法实现？

1.原生代码实现。

在国内目前设计网页的时候，一般会分成PC端和移动端两套页面，但在一定的情况下，必须满足只设计一个页面的情况下，满足不同端口都能正常使用，

因此会用用到自适应的方法。

用原生代码实现的根本在于媒体查询@media的设置。

@media screen 可以查询当前浏览器的尺寸，因此可采用该方法对同一个页面设置不同的CSS样式，来满足不同分辨率要求。

2.采用bootstrap框架布局

bootstrap框架布局完成的页面，是自动对应的自适应效果。

但是在书写的时候，应该严格按照bootstrap的书写规范，才不会出现怪异性问题。

写法举例：

说明：最后的数字对应该p所占栅栏的列数。

col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。

col-sm-6 代表在平板上也显示p占当前行的一半。

col-xs-12 代表在手机端显示为当前行的百分之百填充。

3.还有其他方式，如JQuery和专门做响应式的JS文件，比如nicebox均能实现自适应效果，实现响应式布局。