bootstrap | day 1

Bootstrap 样式

行 .row , 如：

...

横跨多少列 .span*, 网格布局包含 12 列，所以 * 加起来必须等于 12。(3-6-3、4-8、3-5-4、2-8-2)

...

...

平移列 .offset，向右平移列， 用于指定平移的列数。

...

...

嵌套列，在相应的 .span中再增加一个 .row，再包含与父容器列数相等的 .span 即可。

Level 1 of column

Level 2

Level 2

流式网格系统

只需把 .row 改为 .row-fluid，.offset*...其他一样

...

...

...

...

流式网格中的嵌套有点不一样，因使用百分比的情况下，每个 .row 都会把列数重置为 12。如，在一个 .span8 中嵌套两个等宽的列，不能使用两个 .span4，应使用 .span6。

...

...

容器布局

固定宽度、居中的布局:

...

流式布局，内容封装到一个容器：

...

响应式设计

添加
,

Chapter 2 Bootstrap 预定义的 CSS 样式

字体栈：Helvetica Neue, Helvetica, Arial, sans-serif
字体大小：页面正文 font-size = 14px, line-height = 20px, 所有段落的 margin-bottom = 10px
(行高是怎么定义的呢？)

强调段落：class="lead"

强调内容：使用 small 标签 ....

粗体：...

斜体：...

颜色强调类，应用于

或，如：
.muted, .text-warning, .text-error, .text-info, .text-success.

搜索表单

Search

行内表单

Remember me

Sign in

横向表单

• 为
  元素添加 .form-horizontal 类；
• 把成对的标签和空间包装在类为 .control-group 的 div 中；
• 为其中每个标签添加 .control-label 类；
• 把其中每个控件包装在一个类为 .controls 的
  中，一边对齐

Email

...

Remember me

Submit