Bootstrap

• Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、Javascript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
• 凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。
• 它用于开发响应式布局、移动设备优先的 WEB 项目

官网下载

View Code

    
    
    
    
    ...    

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

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

  ...

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

  ...

• 固定宽度：.container
• 流式布局：.container-fluid

 
    
    
        标题
    
    
        标题
    

• 超小屏幕：小于 768px
• 小屏幕：大于等于 768px
• 中等屏幕：大于等于 992px
• 大屏幕：大于等于 1200px

将父级可用宽度(content)均分为12等份！

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

[object Object]
栅格参数：
[object Object]

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

• 超小屏幕：.col-xs-*
• 小屏幕：.col-sm-*
• 中等屏幕：.col-md-*
• 大屏幕：.col-lg-*

...

• 超小屏幕：.col-xs-offset-*
• 小屏幕：.col-sm-offset-*
• 中等屏幕：.col-md-offset-*
• 大屏幕：.col-lg-offset-*

...

...

...

...

...

...
...

...

...
...

官方文档

Time the study pain is temporary,has not learned the pain is life-long.

原文出处：https://www.cnblogs.com/wanlei/p/10197657.html