Bootstrap学习笔记
一、布局：
1.12列栅格系统，支持列偏移
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
2.划定内容区域
<body>
<div class="container">
...
</div>
</body>
3.支持流式布局
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
二、排版：
1.标题
h1,h2,h3,h4,h5,h6
2.段落
<p>...</p>
<p class="lead">段落突出显示</p>
4.强调
<strong>粗体</strong>
<em>斜体</em>
5.缩写
<abbr class="initialism" title="完整信息">缩写</abbr>
6.引用
<blockquote class="pull-right">
<p>内容</p>
<small>出处</small>
</blockquote>
7.颜色警示
<p class="muted">减弱</p>
<p class="text-warning">警告</p>
<p class="text-error">错误</p>
<p class="text-info">提示</p>
<p class="text-success">成功</p>
三、列表
1.无序
<ul>
<li>无序列表</li>
</ul>
2.有序
<ol>
<li>有序列表</li>
</ol>
3.无样式
<ul class="unstyled">
<li>无样式列表</li>
</ul>
4.描述
<dl class="dl-horizontal">
<dt>定义</dt>
<dd>描述</dd>
</dl>
四、表格
<table class="table table-striped table-bordered table-condensed">
<caption>标题</caption>
<thead>
<tr class="success">
<th>表头</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>错误内容</td>
<td>...</td>
</tr>
<tr class="warning">
<td>警告内容</td>
<td>...</td>
</tr>
<tr class="info">
<td>提示内容</td>
<td>...</td>
</tr>
</tbody>
</table>
五、表单
1.布局
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputAge">Age</label>
<div class="controls">
<select id="inputAge">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
2.控件前置/后置
<div class="input-prepend input-append">
<span class="add-on">前置字符</span>
<button class="btn" type="button">前置按钮</button>
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">后置字符</span>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
后置按钮菜单
</ul>
</div>
</div>
3.控件大小设置
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
利用栅格系统
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
4.提交按钮
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存</button>
<button type="button" class="btn">取消</button>
</div>
5.控件提示
<input type="text"><span class="help-inline">短提示</span>
<input type="text"><span class="help-block">长提示</span>
6.控件状态
<input class="span3" type="email" required />必填
<input type="text" disabled />禁用
<span class="uneditable-input">只读</span>
<div class="control-group warning">
<label class="control-label" for="inputWarning">警告</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">错误</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputError">提示</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">成功</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
六、按钮
1.按钮状态
<button class="btn" type="button">默认</button>
<button class="btn btn-primary" type="button">首要</button>
<button class="btn btn-info" type="button">信息</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-inverse">相反</button>
<button class="btn btn-link" type="button">链接</button>
2.按钮大小
<button class="btn btn-large" type="button">大号</button>
<button class="btn" type="button">默认大小</button>
<button class="btn btn-small" type="button">小号</button>
<button class="btn btn-mini" type="button">迷你</button>
<button class="btn btn-large btn-block" type="button">最大</button>
3.搭载元素
<a> <button> <input>
七、图片
<img src="..." class="img-rounded">圆角
<img src="..." class="img-circle">圆形
<img src="..." class="img-polaroid">带边框
八、图标
1.使用
<i class="icon-search"></i> 有120个图标供选择
<i class="icon-search icon-white"></i> 图标反白
2.注意
图标和文字间要留空格
1.12列栅格系统，支持列偏移
<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
2.划定内容区域
<body>
<div class="container">
...
</div>
</body>
3.支持流式布局
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
二、排版：
1.标题
h1,h2,h3,h4,h5,h6
2.段落
<p>...</p>
<p class="lead">段落突出显示</p>
4.强调
<strong>粗体</strong>
<em>斜体</em>
5.缩写
<abbr class="initialism" title="完整信息">缩写</abbr>
6.引用
<blockquote class="pull-right">
<p>内容</p>
<small>出处</small>
</blockquote>
7.颜色警示
<p class="muted">减弱</p>
<p class="text-warning">警告</p>
<p class="text-error">错误</p>
<p class="text-info">提示</p>
<p class="text-success">成功</p>
三、列表
1.无序
<ul>
<li>无序列表</li>
</ul>
2.有序
<ol>
<li>有序列表</li>
</ol>
3.无样式
<ul class="unstyled">
<li>无样式列表</li>
</ul>
4.描述
<dl class="dl-horizontal">
<dt>定义</dt>
<dd>描述</dd>
</dl>
四、表格
<table class="table table-striped table-bordered table-condensed">
<caption>标题</caption>
<thead>
<tr class="success">
<th>表头</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr class="error">
<td>错误内容</td>
<td>...</td>
</tr>
<tr class="warning">
<td>警告内容</td>
<td>...</td>
</tr>
<tr class="info">
<td>提示内容</td>
<td>...</td>
</tr>
</tbody>
</table>
五、表单
1.布局
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputAge">Age</label>
<div class="controls">
<select id="inputAge">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
2.控件前置/后置
<div class="input-prepend input-append">
<span class="add-on">前置字符</span>
<button class="btn" type="button">前置按钮</button>
<input class="span2" id="appendedPrependedInput" type="text">
<span class="add-on">后置字符</span>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
后置按钮菜单
</ul>
</div>
</div>
3.控件大小设置
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
利用栅格系统
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
4.提交按钮
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存</button>
<button type="button" class="btn">取消</button>
</div>
5.控件提示
<input type="text"><span class="help-inline">短提示</span>
<input type="text"><span class="help-block">长提示</span>
6.控件状态
<input class="span3" type="email" required />必填
<input type="text" disabled />禁用
<span class="uneditable-input">只读</span>
<div class="control-group warning">
<label class="control-label" for="inputWarning">警告</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">错误</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputError">提示</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">成功</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
六、按钮
1.按钮状态
<button class="btn" type="button">默认</button>
<button class="btn btn-primary" type="button">首要</button>
<button class="btn btn-info" type="button">信息</button>
<button class="btn btn-success">成功</button>
<button class="btn btn-warning">警告</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-inverse">相反</button>
<button class="btn btn-link" type="button">链接</button>
2.按钮大小
<button class="btn btn-large" type="button">大号</button>
<button class="btn" type="button">默认大小</button>
<button class="btn btn-small" type="button">小号</button>
<button class="btn btn-mini" type="button">迷你</button>
<button class="btn btn-large btn-block" type="button">最大</button>
3.搭载元素
<a> <button> <input>
七、图片
<img src="..." class="img-rounded">圆角
<img src="..." class="img-circle">圆形
<img src="..." class="img-polaroid">带边框
八、图标
1.使用
<i class="icon-search"></i> 有120个图标供选择
<i class="icon-search icon-white"></i> 图标反白
2.注意
图标和文字间要留空格
