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.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
随机推荐
- 利用PHP脚本辅助MySQL数据库管理4-两个库表结构差异比较
<?php define('DATABASE1', 'coffeetest'); $dbi1 = new DbMysql; $dbi1->dbh = 'mysql://root:mysql ...
- 简单rmi示例
User类 注意:需要实现序列化 package study.rmi.server; import java.io.Serializable; public class User i ...
- zk实现分布式锁
public interface lock { void getLock(); void unLock(); } public abstract class ZkAbstractLock implem ...
- socketserver实例化过程
一.创建server对象时__init__的执行 找继承中的__init__ 这是ThreadingMixIn类中的方法 这是TCPServer类中的方法(父类BaserServer中还会用到fini ...
- 学会谈判zz
经常有人问我,为什么谈判到你手里就变得那么容易?你有什么诀窍?其实只要是谈判,涉及双方利益,就绝不会轻松.之所以能谈判成功,仔细想想秘诀无非是两个字:“双赢”.要想成功,就要双方都受益.如果你一开始就 ...
- pipenv知识积累
pip install pipenv 安装pipenv pipenv --python 3.6 指定某一Python版本创建环境 pipenv --py 显示Python解释器信息 pipenv -- ...
- 利用xshell远程连接centos安装oracle11g时在图形界面登录
1.首先给centos安装桌面环境.( yum groupinstall ‘GNOME Desktop’) 2.安装Xmanager软件 3.打开xshell,新建连接 填好主机和名称后,点击左侧连接 ...
- windows10; ERROR 1010 (HY000): Error dropping database (can't rmdir './test/', errno: 17);默认数据库位置查找
1.想要导入数据到一个数据库中,但是,无法导入,同时也无法删除数据库重新建立-----------------------------备份当前数据库 2,分析:很多资料显示说数据库下有异常文件,于是就 ...
- 不同数据源之间的数据同步jdbc解决方案
最近项目中用到的数据要从一个数据源获取存进另一个数据源,简单的jdbc解决方案. package com.sh.ideal.test.syns; import java.sql.Connection; ...
- 解决FileZilla Server因路径错误导致无法启动问题详细图文教程
问题背景 我作为一个配置无数服务器环境的人,对服务器的配置也算有所了解,不管是在linux平台还是win平台都比较熟悉,但这次帮一个朋友配置win2003服务器的时候却遇到了一个问题:前面配置IIS和 ...