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>