Bootstrap第一天

1、代码引入：

第一步：在html5文档

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

<!-- 最新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>

    <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

第二步：在body最下面，引入JS文件

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>

2、栅格系统

<div class=" container "></div>主要区域

<div class=" row "></div>一行区域

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

<div class=" col-md-7 "></div>两个 col-md-* 加起来在一个row中，共为12个格； col-ms-* 、 col-xs-* 、 col-lg-*

栅格推移 col-md-offset-* 推移*个格

div栅格整体推移 col-md-pull-* 整体前拉 col-md-push-*

3、排版

A:<h1>...<h6>字体大小 <small></small>小号字 <h1>Title<small>subtitle</small></h1> subtitle为title的80%

B:全局字体设置为14px

C:<p></P>两个<p>之间设置了1/2行高的间距，可以加 .lead 样式，使段落更加突出，加粗。

D:<strong></strong>着重，<em></em>倾斜，类似于html5中的<b></b> <i></i>

E:对齐方式 .text-left , .text-center , text-right

F:强调CSS  . text-muted 灰色 . text-primary 淡蓝色 . text-success 绿色 . text-info 深蓝色 . text-danger 棕色 . text-warning 橙色

G:缩略语 <attr title="完整注释">.....</attr>

H:地址 <address></address>，常与<p>和<small>结合使用

块级元素整体更改位置 .pull-right .pull-left

I：列表

无序列表：<ul><li>111</li>...</ul>

有序列表：<ol><li>111</li>...</ol>

无样式列表:在ul中使用.list-unstyled样式

内联列表:.list-inline 各个项在同一行上

J:描述

竖排描述：

<dl>

<dt>强调描述</dt>

<dd>一般描述</dd>

</dl>

横排描述 dl使用 .dl-horizontal 就可以将各个描述放置于一行。

K：代码 <code></code>内联代码块 <pre></pre>基本代码块 对pre引用 .pre-scrollable, 可以将代码块设置为默认高度350px，并在垂直方向展示滚动条。

L：表格

默认表格样式 .table 样式<table class="table"></table> 少量padding加水平横线

斑马条纹样式 .table-striped <table class="table table-striped"></table> 给tbody中间隔行加灰色条纹

带边框样式 .table-bordered <table class="table table-bordered"></table>

鼠标悬停样式 .table-hover 鼠标滑过有悬停效果

紧缩表格样式 .table-condensed 行高减小

状态class，加于 <td>、<tr> : .active 灰色 .success 暗绿色 .warning 淡橙色 .danger 淡紫色

响应式表格：

<div class=" table-responsive "> <table class="table"> ... </table> </div>

M:表单

<form role="form">...</form> 使用.form-horizontal 可以水平排列各项

在form里面中各行，使用<div class="form-group">...</form>组合，其中包含

<label for=" inputEmail " class=" control-label col-sm-2 ">Email</label>

<div class="col-sm-10"><input type="email" class=" form-control " id=" inputEmail " placehoder ="Email" /></div>

一个选择框排列示例：

<div class=" form-group ">

<div class=" col-sm-offset-2 col-sm-10 ">

<div class=" checkbox ">

<label><input type="checkbox" class=" checkbox " />选择项111</label>

</div>

</div>

</div>