2. 发现很多都不会 于是开始学bootstrap的教程 w3c 英文版的

BS Get Started

1. What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

 

2. Containers

Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container
2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Note: Containers are not nestable (you cannot put a container inside another container).

container-fluid的width是100％，而container的width是用媒体查询获得的动态尺寸。两者样式肯定是不一样的。并且由于padding的原因两者不可用嵌套，他们就是提供两种视觉风格。

BS Grid System

First; create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.

The Bootstrap grid system has four classes:

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

e.x.  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2,

 

http://v3.bootcss.com/css/#grid 这个必读

1.xs sm md lg 四个分别针对不同屏幕大小上面有介绍，一种用法就是：

<div class="row">
<div class="col-xs-6 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-3 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-3 col-md-4">.col-xs-6 .col-md-4</div>
</div>

针对不同的屏幕进行不同的排列，如上第1row，小屏（xs）就是 各6（一行的总数是12），大屏就是按 8 4 分的，可以参考9.html这个例子。

 

Bootstrap Text/Typography

http://v3.bootcss.com/css/#type

http://v3.bootcss.com/css/#code

http://v3.bootcss.com/css/#type-lists

1.这里很多需要针对不同情况需要用到的标签，没必要记住，现查就可以

 

Bootstrap Tables

http://v3.bootcss.com/css/#tables

1. 将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
<table class="table">
<thead>
<tr>

2 .table 有thead tfoot tbody