Bootstrap栅格系统,栅格参数,列偏移,列嵌套

原创 2018年04月15日 20:16:46

什么是栅格系统?

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

栅格系统用于通过一系列的行(row)与列(col)的组合来创建页面布局,内容就可以放入这些创建好的布局中

注意:

”行(row)“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。

		<div class="container">
			<div class="row">	
				<div class="col-md-3">我是文本</div>
				<div class="col-md-3">我是文本</div>
				<div class="col-md-3">我是文本</div>
				<div class="col-md-3">我是文本</div>
			</div>
		</div>

表示一个 div 占3列。

栅格参数

 超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container 最大宽度None (自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12
最大列(column)宽自动~62px~81px~97px
槽(gutter)宽30px (每列左右均有 15px)
可嵌套
偏移(Offsets)
列排序

现在有一个需求:

如果是大屏幕,一行显示6列

如果是中屏幕,一行显示4列

如果是小屏幕,一行显示3列

如果是超小屏幕,一行显2列

		<div class="container">
			<div class="row">	
				<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</div>
				<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</div>
				<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</div>
				<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</div>
				<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</div>
				<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</div>
			</div>
		</div>

列偏移

.col-lg-offset-*

* " 偏移几个位置

		<div class="container">
			<div class="row">	
				<div class="col-lg-2 col-lg-2">我是文本</div>
			</div>
		</div>

在大屏幕的页面下便宜两个格子

列嵌套

		<div class="container">
			<div class="row">	
				<div class="col-lg-5">
					<div class="row">
						<div class="col-lg-2">我是文本</div>
						<div class="col-lg-2">我是文本</div>
					</div>
				</div>
			</div>
		</div>
在列里面再进行一次嵌套,会把列的大小平均分成12份再计算。
版权声明: https://blog.csdn.net/dfggffdd/article/details/79952206

bootstarp学习4--栅格系统之列偏移

列偏移 xs-offset-* *表示需要偏移几个栅格,但是是固定的向右偏移,即相当于左边界的margin  列偏移...
  • bbaibb1009
  • bbaibb1009
  • 2017-04-01 10:19:27
  • 374

Bootstrap之栅格系统偏移

Bootstrap之栅格系统偏移         Bootstrap之栅格系统偏移:           在Bootstrap中可能会使用到offset(偏移),具体语法格式如下:       ...
  • XLjiqimaobuchiyu
  • XLjiqimaobuchiyu
  • 2017-09-04 17:47:23
  • 804

bootstrap栅格系统自定义列

bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列 简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: /*一行5列*/ .col-md-5ths{pos...
  • nuli888
  • nuli888
  • 2016-07-07 14:47:45
  • 10292

2.2Bootstrap栅格系统案例

1、栅格选项 2、从堆叠到水平排列 3、移动设备和
  • a316212802
  • a316212802
  • 2014-05-03 11:52:30
  • 10557

为什么Bootstrap要默认12列

为什么Bootstrap要默认12列今天被问了一个问题:”有没有想过为什么Bootstrap要默认是12列?“ 呃,好吧,用了Bootstrap一段时间,的确没想过为什么要默认是12列,隐隐约约觉得...
  • boycycyzero
  • boycycyzero
  • 2015-03-18 00:22:32
  • 2895

bootstrap中栅格系统的嵌套使用

bootstrap中栅格系统的嵌套使用
  • mr_muli
  • mr_muli
  • 2018-03-17 20:15:53
  • 80

深入理解BootStrap之栅格系统(布局)

1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootst...
  • q121516340
  • q121516340
  • 2016-05-26 14:11:20
  • 16699
收藏助手
不良信息举报
您举报文章:Bootstrap栅格系统,栅格参数,列偏移,列嵌套
举报原因:
原因补充:

(最多只允许输入30个字)