bootstrap使用笔记

本文翻译自【http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem】

1、需要在H5的文档声明中使用；

2、如下一个简单的两列布局，先添加一个class=row,用class=span*来表示占几列。每一行的span加起来刚好是12；

<div class="row">

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

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

</div>

3、用.offset*表示右移多少。.offset4 moves .span4 over four columns.

4、嵌套列。新开辟一个row,在这个下面再添加span，但所有span之和为row的大小。e.g.

<div class="row">

  <div class="span9">

    Level 1 column

    <div class="row">

      <div class="span6">Level 2</div>

      <div class="span3">Level 2</div>

    </div>

  </div>

</div>

5、流式网格布局，采用的是百分比而不是像素大小。

基本流体，只需将.row 改为 .row-fluid.

<div class="row-fluid">

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

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

</div>

流体偏移，仍旧使用.offset*

<div class="row-fluid">

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

  <div class="span4 offset2">...</div>

</div>

流体嵌套

<div class="row-fluid">

  <div class="span12">

    Fluid 12

    <div class="row-fluid">

      <div class="span6">

        Fluid 6

        <div class="row-fluid">

          <div class="span6">Fluid 6</div>

          <div class="span6">Fluid 6</div>

        </div>

      </div>

      <div class="span6">Fluid 6</div>

    </div>

  </div>

</div>

2、布局

1、固定布局，只需<div class="container">

<body>

  <div class="container">

    ...

  </div>

</body>

2、流体布局 <div class="container-fluid">

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">

      <!--Sidebar content-->

    </div>

    <div class="span10">

      <!--Body content-->

    </div>

  </div>

</div>

3、响应式设计

要想使用响应式布局，需要添加相应的meta标签；同时还要添加bootstrap的响应式css。

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

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

支持设备

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label	Layout width	Column width	Gutter width
Large display	1200px and up	70px	30px
Default	980px and up	60px	20px
Portrait tablets	768px and above	42px	20px
Phones to tablets	767px and below	Fluid columns, no fixed widths
Phones	480px and below	Fluid columns, no fixed widths

/* Large desktop */

@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */

@media (max-width: 767px) { ... }

/* Landscape phones and down */

@media (max-width: 480px) { ... }

响应实用类

Responsive utility classes

可以用这些实用类在设备中显示或隐藏内容，下表是一个可用的类和他们在给定的设备中的效果，这些都可以在responsive.less中找到。

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones767px and below	Tablets979px to 768px	DesktopsDefault
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.

你可以用他们在不同的设备中呈现不同的显示。响应实用类不可以与表格一起用，因为它不支持表格。

e.g.