Bootstrap3.X初识_by二卷

keywords: Bootstrap


说在前面

1.Bootstrap需要的文档类型

Bootstrap使用HTML5元素，需要使用HTML5文档类型

<!DOCTYPE html>
<html>
</html>

2.Bootstrap3.X移动设备优先

为了让Bootstrap开发的网站对移动设备友好确保适当的绘制和触屏缩放需要在网页的head之中添加 viewport meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3.响应式布局

响应式布局就是： 一个网站能够兼容多个终端，网页智能地根据用户行为以及使用的设备环境进行相对应的布局
Bootstrap有响应式图像（img-responsive）

<img src="..." class="img-responsive" alt="响应式图像">

4.容器

Bootstrap用 container类来包裹页面上的所有内容，默认情况下容器是不可嵌套的

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


Bootstrap的网格系统（Grid System）

刚开始看这个的时候有点理解不了，在用过Bootstrap写网页后终于觉得二卷貌似懂了


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

1.工作原理

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
  • 使用行来创建列的水平组 .row class
  • 内容应该放置在列内，且唯有列可以是行的直接子元素
    预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局

2.基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">
   </div>
</div>
<div class="container">
  1. 首先添加容器container
  2. 接着一行为单位组织内容
  3. 行中设置列，每行12个单元，一行中列的单元数加和<=12
  4. 列所含单元的设置，对不同的设备class不同

超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
.col-xs-n .col-sm-n .col-md-n .col-lg-n

3.列相关的操作

1.偏移列
.col-md-offset-* 类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11

2.嵌套列

<div class = "container">
  <div class = "row">

    <div class="col-md-3"></div>

    <div class="col-md-9">

      <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
      </div>

      <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
      </div>

    </div>

  </div>
</div>

3.列排序
.col-md-push-n ：将该列往后推n个单元
.col-md-pull-n ：将该列往前拉n个单元
（n 1~11）

posted @ 2017-03-03 23:14  咿呀静候轮回  阅读(173)  评论(1)  编辑  收藏  举报