Bootstrap栅栏布局

Bootstrap栅格布局

bootstrap栅栏系统css中的col-xs-、col-sm-、col-md-* 、col-lg-*的意义：

小于 768px 的时候，用 col-xs-12 类对应的样式；

在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；

在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；

大于 1200px 的时候，用 col-lg-3 类对应的样式；

关键字解释

1、col-column：列；

2、xs-maxsmall：超小； sm-small：小； md-medium：中等； lg-large：大；

3、-*表示占列，即占自动每行row分12列栅格系统比；

4、.col-xs-*超小屏幕手机 (<768px)，超小屏幕时使用；
.col-sm-*小屏幕平板 (≥768px)，小屏幕时使用；
.col-md-*中等屏幕桌面显示器 (≥992px)(栅格参数)，中等屏幕时使用；
.col-lg-*大屏幕大桌面显示器 (≥1200px)，大屏幕时使用。

5、不管在哪种屏幕上，栅格系统都会自动的每行row分12列 col-xs-和col-sm- 和col-md-*后面跟的参数表示在当前的屏幕中每个div所占列数。例如

这个div在屏幕中占的位置是： .col-xs-6 在超小屏幕中占6列也就是屏幕的一半（12/6列=2个div），.col-md-3 在中单屏幕中占3列也就是1/4（12/3列=4个div）。

6、反推，如果我们要在小屏幕上并排显示3个div(12/3个=每个占4 列 )，则col-xs-4；在大屏幕上显示6个div(12/6个=每个占2列 ) ，则 col-md-2；这样我们就可以控制我们自己想要的什么排版了。

Bootstrap栅栏布局相关推荐

bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法
(1)概括一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段 1.col是column简写:列: 2.xs是maxsmall简写:超小, sm是small简写:小, md ...
bootstrap-dist的下载和使用bootstrap可视化布局代码无样式解决
bootstrap-dist目前我自己用到的范围也就是bootstrap可视化布局后复制生成好的HTML,然后引用链接,也就这么多 1.下载官网地址点我博主下载好的文件点我(官网下载的)提取码:2 ...
Bootstrap精巧布局
转载地址:http://www.see-source.com/blog/300000033/280 Bootstrap提供俩种布局方式固定(网格)布局和流式(网格)布局.结合上篇文章所讨论的栅格系统来 ...
bootstrap栅栏系统
bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col ...
HTML创建12列小屏幕网格,Bootstrap 网格系统布局详解
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平 ...
根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第三节 bootstrap的布局容器
咱们大部分围绕着两个问题来叙述是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
html栅栏布局,bootstrap12栅格布局
bootstrap栅格布局列高怎么设置 bootstrap栅格占多行栅格系统只占列,和行无关. 按你上图,就是第一次分成2列,第二列放地图一.第一列里面含三个大DIV各占一行 1.1第一行分成3列 ...
bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...
(1)概括一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段 1.col是column简写:列: 2.xs是maxsmall简写:超小, sm是small简写:小, m ...

Bootstrap栅栏布局

Bootstrap栅栏布局相关推荐

最新文章

热门文章