简述Bootstrap栅格布局方式

栅格系统用于通过行(row)和列(column)组合创建页面布局,内容可以放入创建好的布局中。

Bootstrap栅格系统的工作原理:

  • “行(row)”必须包含在 .container中,以便为其赋予合适的排列(aligment)和内补(padding)通过    点container可以将界面放入浏览器的中间位置。
  • 使用“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

根据不同的屏幕情况选择不同的前缀  小屏幕设备 (<768px)使用.col-xs- 格式大小

小屏幕设备 平板 (≥768px)  .col-sm-

中等屏幕设备 桌面 (≥992px)   .col-md-                                                                                                    大屏幕设备 桌面 (≥1200px)   .col-lg-

12列式:每格60PX间距为20PX(最常用)一般为336或者363等等

16列式:每格40PX 间距为20PX

24列式:每格30PX 间距为20PX

32列式:每格20PX 间距为20PX

不同的内容使用相应的格式,在同样的列中使用不同的前缀效果不同大的相对小的是堆叠的而小的相对大的是平面的并排的如果在使用小屏幕的时候堆叠在一起了么可以使用超小屏幕来实现那么他就不会堆叠了

列偏移:使用.col-md-offset-大小 可以将列偏移到右侧。使用*选择器将所有列增加了列的左侧margin。

例如 .A .col-md-offset-3  将A 向左侧偏移3格

同样在这里面也可以使用嵌套方式去完成不同的格式

时间: 2024-10-08 15:57:13

简述Bootstrap栅格布局方式的相关文章

响应式设计(2)--引入bootstrap栅格布局

bootstrap为我们内置了栅格系统布局,通过它,我们可以非常快速的在不同宽度的屏幕下进行自适应布局. [grid栅格系统]http://v3.bootcss.com/css/#grid  [响应式工具]http://v3.bootcss.com/css/#responsive-utilities 不了解bootstrap栅格布局的同学,可以先看看上面的链接,了解个大概. 你真的了解吗?只要你了解个大概的话,就能回答的出下面几个问题,回答不出来的话,点开上面的链接好好看一遍 1)bootstr

bootstrap栅格布局-v客学院知识分享

今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义class为container.目的一是为了在响应式的布局上给宽度约束,二是提供padding以至于不让内容贴住浏览器的边缘. Class为row的盒子是指行的容器,bootstrap把一行分成了12等分,下面讲解下col-xx-是怎么使用的吧. Bootstrap栅格布局中css中有四个类,分别是col

bootstrap栅格布局学习历程

了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户的判断纯在一定的精准性问题,目前来讲实现响应式方式有两种:css3 @media :第三方的开源框架.    框架帮我们解决的工作量,低端浏览器不支持的css3的问题,不同分辨率下的网页布局的展示.他是移动优先的前端框架. 这里的话,我只用里面的栅格布局,其他的样式什么的,就自己定制. 当然在开始之

CSS:谈谈栅格布局

检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: 1 * { 2 box-sizing: border-box; 3 } 4 html, body{ 5 width: 100%; 6 height: 100%; 7 margin: 0; 8 } 9 .container{ 10 width:100%; 11 } 12 .container:after{ 13 di

Python用户界面编程PyQt5的四种的布局方式

1.QT是C++编写的跨平台GUI库,GUI是指桌面程序应用. 2.开发基于pyqt5的桌面应用程序必须要使用两个类Qapplication和Qwidget类,都在PyQt5.Qt.widgets里面 3.pycharm里面讲QTdesigner文件产生的ui文件转换为.py文件需要使用pygui转换扩展工具,主要有以下两种方式:(1)python -m PyQt5.uic.pyuic filename.ui -o filename.py(2)直接调用anaconda里面安装的pyuic5即可(

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

[bootstrap] 栅格系统和布局

1.简介 栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁.是从平面栅格系统演变而来. Bootstrap建立在12列栅格系统.布局.组件之上.以规则的网格阵列来指导和规范网页中的版面布局以及信息分布 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe. 2.设计原理 http://ued.taobao.org/blog/

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

bootstrap记录二(关于栅格布局)

栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需要定义一层来包含行(.row),这个外层为(.container)或者(.container-fluid),定义这一层是为了方便为行(.row)赋予合适的排列(aligment)和内补(padding). (.container)表示固定宽度,即行的宽度是固定的,而且水平居中,即使行的元素是块级元素