Bootstrap 栅格基本模板使用

Bootstrap 3 学习使用：官方下载及文档

Bootstrap  简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

注意：Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入

一，建立基本模本

    
    
    
    
    
    
    
    Bootstrap 3 demo

    
    
    


    bootstrap 基本模本

1、视口的设置

     1）视口以及视口的作用：

       在移动浏览器中（手机基本默认宽度都是980px），当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面装到容器里，然后缩放到设备这么大，然后就可以正常展示出页面上的所有内容。

     2）参数说明

此meta 为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）

     width：视口的宽度

     initial-scale：初始化缩放

     user-scalable：是否允许用户自行缩放（值：yes/no; 1/0）

     minimum-scale：最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放

     maximum-scale：最大缩放

二、布局容器

      Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

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

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

 加了边距
 100%内容 

三、栅格系统布局

    1）介绍

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

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 把容器总宽度平分为12等份

    2）栅格参数

超小屏幕 手机 (