菜鸟云手机阅读

第一步：引入基本样式表

在head之间用 link标签引入基本样式表 rel="stylesheet" href="mb/bootcss/css/bootstrap.min.css" rel="stylesheet" href="mb/bootcss/css/bootstrap-theme.min.css" >

第二步：引用栅格系统

1.引入容器div 类名为container，则居中显示，类名为container-fluid则全屏显示

2.在container容器div内引入布局div 类名为row，即一行，实际也是容器的意思，不放具体内容

3.真正布局在row容器div内引入布局列div 类名为col-lg-*，*号为1-12的数字，bootsrap将屏幕分成12等份，各列数字为所占的等份，各列数字的和恰好等于12,则会保持在同一行，超过12则另起一行显示，lg是指大屏幕

第三步：样式解读

1.字体：1-6号标题

h1标题效果

h2标题效果

h3标题效果

h4标题效果

h4标题效果

h5标题效果

h6标题效果

2.字体：副标题，字体变小变灰,作用不明显

成对的small标签：

h1标题效果直接在h1h6之间放置

3.Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 body 元素和所有段落元素。另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

4.文本对齐样式

左对齐：类名text-left

居中对齐：类名text-center

右对齐：类名text-right

5.列表介绍

无序列表ul li
有序列表ol li

6.表格介绍

table 类可以为其赋予基本的样式，通过 .table-striped 类可以给 tbody 之内的每一行增加斑马条纹样式 添加 .table-bordered 类为表格和其中的每个单元格增加边框。 通过添加 .table-hover 类可以让 tbody 中的每一行对鼠标悬停状态作出响应。 通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
响应式表格 将任何 .table 元素包裹在 .table-responsive 元素div内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

7.表单多行和单行

Email address

Password

File input

Example block-level help text here.

Check me out

Submit

内联表单 为 form 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。 可能需要手动设置宽度 在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

Amount (in dollars)

$

.00

class="btn btn-primary"

焦点状态 我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。控件尺寸 通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。