布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

Copy
<div class="container">
...
</div>

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

Copy
<div class="container-fluid">
...
</div>
现在的container类

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.row {
margin-right: -15px;
margin-left: -15px;
}

.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 {
  1. position: relative;
  2. min-height: 1px;
  3. padding-right: 15px;
  4. padding-left: 15px;

布局原理:

http://www.cnblogs.com/willian/p/3558180.html

英文原文:http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

bootstrap 3.x笔记的更多相关文章

  1. 《深入理解bootstrap》读书笔记:第4章 CSS组件(下)

    十. 标签(.label类,label-xxx) 高亮一些标题部分. 1 2 3 4 5 6 <h1>HELLO<span class="label label-defau ...

  2. 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)

    bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...

  3. 《深入理解bootstrap》读书笔记:第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  4. 《深入理解bootstrap》读书笔记:第二章 整体架构

    一.  整体架构   1. CSS-12栅格系统 把网页宽度均分为12等分(保留15位精度)--这是bootstrap的核心功能. 2.基础布局组件 包括排版.按钮.表格.布局.表单等等. 3.jQu ...

  5. 《深入理解bootstrap》读书笔记:第一章 入门准备

    一.bootstrap框架简介 Bootstrap是最流行的前端开发框架. 什么是框架:开发过程的半成品. bootstrap具有以下重要特性: (1)完整的CSS样式插件 (2)丰富的预定义样式表 ...

  6. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...

  7. Bootstrap使用后笔记

      Bootstrap Modal 垂直居中 在 bootstrap.js中修改如下代码: Modal.prototype.adjustDialog = function () { var modal ...

  8. Bootstrap 3学习笔记 -栅格

    这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块 ...

  9. Bootstrap 基础学习笔记(一)

    排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

  10. bootstrap 新手学习笔记 代码整理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 菜鸟学习Struts——配置Struts环境

    刚开始学习Struts,它通过采用JavaServlet/JSP技术,实现了基于Java EEWeb应用的MVC设计模式的应用框架,是MVC经典设计模式中的一个经典产品. 要用到Struts就要学会配 ...

  2. IOS 控件的生命周期

    ViewController的生命周期包括: Initialize ViewDidLoad ViewWillAppear ViewDidAppear ViewWillDisappear ViewDid ...

  3. CentOS 6.2编译安装Nginx1.2.0+MySQL5.5.25+PHP5.3.13+博客系统WordPress3.3.2

    说明: 操作系统:CentOS 6.2 32位 系统安装教程:CentOS 6.2安装(超级详细图解教程): http://www.osyunwei.com/archives/1537.html 准备 ...

  4. SAP如何使用关于序列号的表

  5. spicy及remote-viewer登录方法

    spicy登录: $sudo spicy remote-viewer登录: $ sudo /usr/local/bin/remote-viewer $ spice://192.168.70.158:4 ...

  6. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  7. XCode签名证书死活不能选

    Editors>Show Values on Xcode , then you can select the code sign instead of typing

  8. Spring3+hibernate4+struts2整合的 过程中发生如下错误

    严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...

  9. Matlab中min/max函数的误解

    1.C= min(a):返回最小值:我原来以为如果a是行向量,min(a)返回a本身,因为我记得min(a,1)是按列找最小,这是默认的.doc min发现,只要a是向量,那么返回最小值. 2.C= ...

  10. specular map normal map gloss map

    http://www.marmoset.co/toolbag/learn/materials http://digitalerr0r.wordpress.com/2009/03/26/xna-shad ...