bootstrap 栅格系统

1.栅格系统的实现原理


栅格系统是通过定义容器大小,平分12份,再调整内外边距,最后再结合媒体查询


就制作出了强大的响应式的栅格系统。


Bootstrap默认的栅格系统平分为12份,在使用的时候也可以通过重新编译LESS源码


来修改这12个数值。



2.栅格系统的主要工作原理如下:


(1).一行数据(row)必须包含在.container中,以便为其赋予合适的对齐方式和内边距(padding)。


(2).使用行(row)在水平方向创建一组列(column)。


(3).具体内容应当放置于列(column)内,而且只有列(column)可以作为行(row)的直接子元素。


(4).内置一大堆样式,可以使用像.row和.col-xs-4(占4列宽度)这样的样式来快速创建栅格布局。

Bootstrap源码中定义的mixin也可以用来创建语义化的布局。


(5).通过设置padding从而创建列(column)之间的间隔,然后通过为第一列和最后一列设置负值的

margin从而抵消padding的影响。


(6).栅格系统中的列是通过指定1到12的值来表示其跨越的范围的。例如:要让屏幕分为3个等宽的

部分,可以使用3个.col-xs-4来创建。



3.栅格系统的基本用法


栅格系统的基本用法,其实就是列的组合。有以下4种基本用法:


(1).列组合


列组合就是通过更改数字来合并列,类似于表格中的colspan。具体用法请看如下代码1:


代码1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 栅格系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</body>
</html>


其效果如图1所示:



图1


列组合的实现方式非常简单,只涉及两个CSS特性:左浮动和宽度百分比。不同的类名


所具有的宽度是不一样的,根据表格中它们所占的百分比就能很直观的体现出来。


(2).列偏移


当我们不想让两个相邻的列挨在一起时,就可以通过栅格系统的列偏移(offset)功能来实现,而


不必再定义margin值。使用.col-md-offset-*形式的样式就可以将列偏移到右侧,例如,


.col-md-offset-4将.col-md-4向右移动了4个列的宽度。


例如,可以选取代码1的一部分进行测试:


代码2:

<div class="row">
<div class="col-md-6 col-md-offset-1">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>


有代码2可知,此时将图1的最后一行代码向右平移了1个列的宽度,得到图2:



图2


(3).列嵌套


栅格系统支持列嵌套,即在一个列里再声明一个或者多个行(row)。但有一点


要注意:内部所嵌套的row的宽度为100%时,就是当前外部列的宽度。


row中列的宽度是按照百分比来分配的,即在任何一个嵌套列里,不管宽度是多少,


都可以再进行12等分,并可以进一步组合。


(4).列排序


列排序其实就是改变列的方向,也就是改变左右浮动并且设置浮动的距离。


在栅格系统里,可以通过.col-md-push-*和.col-md-pull-*来改变列的方向。



4.响应式栅格


Bootstrap为不同的屏幕尺寸(4种类型)提供了不同的栅格样式,这4种分别是:


超小(xs)、小型(sm)、中型(md)、大型(lg)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值