什么是网格（Grid）？

摘自维基百科：

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

什么是 Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

  • 内容

    • 决定什么是最重要的。
  • 布局
    • 优先设计更小的宽度。
    • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强
    • 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */

/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */

@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */

@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */

@media (min-width: @screen-lg-min) { ... }



网格选项


下表总结了 Bootstrap 网格系统如何跨多个设备工作：






 
超小设备手机（<768px）
小型设备平板电脑（≥768px）
中型设备台式电脑（≥992px）
大型设备台式电脑（≥1200px）




网格行为
一直是水平的
以折叠开始，断点以上是水平的
以折叠开始，断点以上是水平的
以折叠开始，断点以上是水平的




最大容器宽度
None (auto)
750px
970px
1170px




Class 前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-




列数量和
12
12
12
12




最大列宽
Auto
60px
78px
95px




间隙宽度
30px
（一个列的每边分别 15px）		
30px
（一个列的每边分别 15px）		
30px
（一个列的每边分别 15px）		
30px
（一个列的每边分别 15px）		




可嵌套
Yes
Yes
Yes
Yes




偏移量
Yes
Yes
Yes
Yes




列排序
Yes
Yes
Yes
Yes






bootstrip排版




Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：

<h1>我是标题1 h1</h1>

<h2>我是标题2 h2</h2>

<h3>我是标题3 h3</h3>

<h4>我是标题4 h4</h4>

<h5>我是标题5 h5</h5>

<h6>我是标题6 h6</h6>




结果如下：




内联子标题






<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>

<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>

<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>

<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>




内联子标题


结果如下：




缩放




<abbr title="World Wide Web">WWW</abbr><br>

<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>




结果如下：




地址（Address）




<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 地址</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<address>




结果如下：




按钮






类
描述
 




.btn
为按钮添加基本样式





.btn-default
默认/标准按钮





.btn-primary
原始按钮样式（未被操作）





.btn-success
表示成功的动作





.btn-info
该样式可用于要弹出信息的按钮





.btn-warning
表示需要谨慎操作的按钮





.btn-danger
表示一个危险动作的按钮操作





.btn-link
让按钮看起来像个链接 (仍然保留按钮行为)





.btn-lg
制作一个大按钮





.btn-sm
制作一个小按钮





.btn-xs
制作一个超小按钮





.btn-block
块级按钮(拉伸至父元素100%的宽度)





.active
按钮被点击





.disabled
禁用按钮









<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 按钮选项</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<!-- 标准的按钮 -->

<button type="button" class="btn btn-default">默认按钮</button>

<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->

<button type="button" class="btn btn-primary">原始按钮</button>

<!-- 表示一个成功的或积极的动作 -->

<button type="button" class="btn btn-success">成功按钮</button>

<!-- 信息警告消息的上下文按钮 -->

<button type="button" class="btn btn-info">信息按钮</button>

<!-- 表示应谨慎采取的动作 -->

<button type="button" class="btn btn-warning">警告按钮</button>

<!-- 表示一个危险的或潜在的负面动作 -->

<button type="button" class="btn btn-danger">危险按钮</button>

<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->

<button type="button" class="btn btn-link">链接按钮</button>

</body>

</html>




结果如下：




按钮状态


Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。


激活状态


按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。


下表列出了让按钮元素和锚元素呈激活状态的 class：






元素
Class




按钮元素
添加 .active class 来显示它是激活的。




锚元素
添加  .active class 到 <a> 按钮来显示它是激活的。






图片


Bootstrap 提供了三个可对图片应用简单样式的 class：


  • .img-rounded：添加 border-radius:6px 来获得图片圆角。
    • 

  • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
    • 

  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。




<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">

<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">

<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">




结果如下：




其他：






.pull-left
元素浮动到左边





.pull-right
元素浮动到右边





.center-block
设置元素为 display:block 并居中显示





.clearfix
清除浮动





.show
强制元素显示





.hidden
强制元素隐藏





.sr-only
除了屏幕阅读器外，其他设备上隐藏元素





.sr-only-focusable
与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)





.text-hide
将页面元素所包含的文本内容替换为背景图





.close
显示关闭按钮





.caret
显示下拉式功能




												


											
bootstrip CSS的更多相关文章
	

    
								
  1. Matplotlib数据可视化（3）：文本与轴
		
      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
    
		
    2. 
						
  2. PC网站CSS分享
		
    这里想总结些编写网页的经验,以PC端的为主,前面总结过后台的,今天写些前台的,参考了bootstrap3.3.5.bootstrip2.3.2和模版matrix. 前段时间还写过一篇<前端基础学 ...
    
		
    3. 
						
  3. CSS的未来
		
    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
    
		
    4. 
						
  4. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
		
    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
    
		
    5. 
						
  5. 前端css兼容性与易混淆的点
		
    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
    
		
    6. 
						
  6. 理解CSS外边距margin
		
    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
    
		
    7. 
						
  7. 理解CSS视觉格式化
		
    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
    
		
    8. 
						
  8. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
		
    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
    
		
    9. 
						
  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
		
    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Flutter 拖拽排序组件 ReorderableListView
			
    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 ReorderableListView是通过长按拖动某一项 ...
    
			
    2. 
						
  2. Redis（十一）：哨兵模式架构设计分析
			
    业务最初的应用场景中,我们也许使用单机redis就可以应付业务要求,但并非一直可行. 比如单机的读写能力问题,单机的可用性问题,单机的数据安全性问题.这些都是许多互联网应用经常会遇到的问题,也基本上都 ...
    
			
    3. 
						
  3. Python 【面向对象】
			
    前言 Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过面向对象的编程语言 ...
    
			
    4. 
						
  4. 检测js对象是不是数组类型？
			
    面试时候被人问如何检测一个未知变量是不是数组类型,丢脸啊,老祖宗的脸都丢没了,这都不会,回家啃书本去吧!!! var a = [];方法一:Array.isArray([])  //true type ...
    
			
    5. 
						
  5. Generator的异步编程
			
    对比下常用的异步处理的方案: 1,回调 我们常说的 “回调地狱”,就是多个异步操作时候,代码多重嵌套,异步之前形成强耦合,如果修改一处,其他地方也是跟着修改.(callback hell). 2,pr ...
    
			
    6. 
						
  6. java递归树形菜单显示
			
    今天写权限整好涉及到一些菜单的显示,最先想到的是递归遍历输出,但是呢在网上找了很多有关的资料没有符合自己需求的所以就自己写了一个,如果觉得靠谱 请点点关注!!!赞一个 首先看一些设计的数据库设计 菜单 ...
    
			
    7. 
						
  7. 获取View的快照
			
    //获取快照 - (UIView*)customSnapshotInView:(UIView*)inview { UIView *snapshot = [inview snapshotViewAfte ...
    
			
    8. 
						
  8. Markdown使用说明
			
    # Markdown 使用说明 Markdown 是一种**轻量级标记语言** 使用规则: 1. 标题   2. 列表 3. 引用 4. 图片与链接 5. 粗体与斜体 6.表格 7. 代码框 8. 分 ...
    
			
    9. 
						
  9. Eureka停更了？试试Zookpper和Consul
			
    在Spring Cloud Netflix中使用Eureak作为注册中心,但是Eureka2.0停止更新,Eureka1.0 进入了维护状态.就像win7一样,同样可以用,但是官方对于新出现的问题并不 ...
    
			
    10. 
						
  10. 通过nodejs实现文件的上传
			
    通过nodejs实现文件的上传 主要内容 本文将用来讲述如何通过nodejs进行文件上传,将会涉及到以下知识点: 通过express模块进行服务器的搭建 通过multer模块将上传的文件保存到指定目录 ...
    
			
    11.