bootstrap 栅格系统
来源：互联网 发布：matlab 数组写入txt 编辑：程序博客网 时间：2024/06/07 08:02
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)。
- Bootstrap中的栅格栅格系统
- Bootstrap栅格系统研究
- CSS Bootstrap 栅格系统
- Bootstrap 栅格系统
- Bootstrap栅格系统研究
- Bootstrap栅格系统研究
- bootstrap 栅格系统
- Bootstrap-栅格系统
- Bootstrap栅格系统研究
- Bootstrap栅格系统研究
- bootstrap--栅格系统
- Bootstrap 栅格系统
- BootStrap栅格系统
- Bootstrap 栅格系统
- Bootstrap 栅格系统
- Bootstrap 栅格系统
- bootstrap 栅格系统
- Bootstrap 栅格系统
- 计算机网络基础--1概述②
- 链表_第10章_基本数据结构_算法导论
- 优先级位图算法
- oracle for windows使用NFS远程备份报错之O/S-Error: (OS 1326) 用户名或密码不正确
- 数据库事务的四大特性以及事务的隔离级别
- bootstrap 栅格系统
- 跨平台C语言，double、long、unsigned、int、char类型数据所占字节数
- C语言——使用函数指针数组实现简单的计算器
- 每日练习|Day019
- Tp5.0 PHPMailer邮件发送
- linux系统下的gcc版本过低，以及安装中文输入法和sublim.text3的配置
- java集合框架
- tf.Reducemean
- 在 Linux 中删除超大文件的技巧
