bootstrap基础学习小记（三）网格简介
网格系统：网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>实现原理</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head> <body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
<div class="col-md-1">.col-md-</div>
</div>
</div>
</body>
</html>
网格分成3个12份
页面效果：
当屏幕变窄以后自适应的DIV块：
工作原理：Bootstrap框架的网格系统工作原理如下：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
<div class="container">
<div class="row"></div>
</div>
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
为了更好的理解Bootstrap框架的网格系统工作原理，我们来看一张草图：
简单对图解释一下：
1、最外边框，带有一大片白色区域，就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果，其带有四种类型的浏览器（超小屏，小屏，中屏和大屏），其断点（像素的分界点）是768px、992px和1220px。
2、第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率，其宽度也不一样：自动、750px、970px和1170px。在bootstrap.css的第736行～第756行进行设置：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
3、２号横条阐述的是，将容器的行（.row）平分了12等份，也就是列。每个列都有一个“padding-left:15px”(图中粉红色部分)和一个“padding-right:15px”(图中紫色部分)。这样也导致了第一个列的padding-left和最后一列的padding-right占据了总宽度的30px，从而致使页面不美观，当然，如果你需要留有一定的间距，这个做法是不错的。如bootstrap.css中第767行~第772行所示：
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col
4、３号横条就是行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”，用来抵消第一个列的左内距和最后一列的右内距。在bootstrap.css的第763行~第767行可以看到：
.row {
margin-right: -15px;
margin-left: -15px; }
5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果，第一列和最后一列与容器（.container）之间没有间距。横条５只是想向大家展示，你可以根据需要，任意组合列与列，只是他们的组合数之和不要超过总列数。
具体使用：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基本用法</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head> <body>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</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-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div>
</body>
</html>
页面效果：
bootstrap基础学习小记（三）网格简介的更多相关文章
- bootstrap基础学习小记（二）排版、列表、代码风格、表格
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...
- bootstrap基础学习小记（一）简介模板、全局样式
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- bootstrap基础学习【网格系统】（三）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【导航条、分页导航】（五）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【排版】（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript 基础 学习（三）
JavaScript 基础 学习(三) 事件三要素 1.事件源: 绑定在谁身上的事件(和谁约定好) 2.事件类型: 绑定一个什么事件 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
随机推荐
- Sketch 和 PS中的设计图如何实现“自动切图”？
切图是很多UI设计师的一项日常工作.平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感. 但有的认为前 ...
- Maximum Average Subarray I LT643
Given an array consisting of n integers, find the contiguous subarray of given length k that has the ...
- js实现环形菜单效果
点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- 一个简单的NodeJs静态页面的web服务器
主要功能 1 显示www文件夹下静态html或文本类型的文件. 2 缺省访问文件功能. 通过config.js的defaultfile属性设置 3 如果文件夹下没有缺省文件,显示文件夹下文件列表 4 ...
- Jvm(jdk8)源码分析1-java命令启动流程详解
JDK8加载源码分析 1.概述 现在大多数互联网公司都是使用java技术体系搭建自己的系统,所以对java开发工程师以及java系统架构师的需求非常的多,虽然普遍的要求都是需要熟悉各种java开发框架 ...
- 2019.01.21 bzoj3674: 可持久化并查集加强版（主席树+并查集）
传送门 题意:维护可持久化并查集,支持在某个版本连边,回到某个版本,在某个版本 询问连通性. 思路: 我们用主席树维护并查集fafafa数组,由于要查询历史版本,因此不能够用路径压缩. 可以考虑另外一 ...
- matlab柱面图
f=@(x,y)log(y); % ln(x)函数,平行于x轴ezsurf(f,[-pi*2,pi*2,0,20])
- elasticsearch中文发行版 安装
参见: https://github.com/medcl/elasticsearch-rtf 具体步骤参见:ubuntu安装elasticsearch-rtf elasticsearch-head 安 ...
- HDU 1517 A Multiplication Game (SG函数找规律)
题意:两个玩家玩一个游戏,从 p = 1,开始,然后依次轮流选择一个2 - 9的数乘以 p,问你谁先凑够 p >= n. 析:找规律,我先打了一下SG函数的表,然后就找到规律了 我找到的是: 1 ...
- Linux学习（2）－ 正则表达式基础
Linux学习(2)- 正则表达式基础 一.基础正则表达式介绍与练习 学习内容 正则表达式特殊符号 [:alnum:]代表英文大小写字母及数字 [:alpha:]代表英文大小写字母 [:blank:] ...