Base 。 Bootstrap

官网文档

file:///C:/Users/Administrator/Desktop/bootstrap-2.3.2/docs/base-css.html#buttons

1、标题

<h1> 到<h6>

2、文本

<p>...</p>

3、铅正文

<p class="lead">...</p>

4、小题正文

<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>

5、<strong>

<strong>rendered as bold text</strong>

6、斜体

<em>rendered as italicized text</em>

7、对其

<p class="text-left">Left aligned text.</p>       左对齐
<p class="text-center">Center aligned text.</p>    居中对其
<p class="text-right">Right aligned text.</p>   右对齐

8、重点标示

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

9、悬停语句

<abbr title="attribute">attr</abbr>

10、大写悬停语句

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

11、地址语句

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>

12、标题语句

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

13、大段引用

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

14、大段引用 位置

<blockquote class="pull-right">
...
</blockquote>

15、清单 无序

<ul>
<li>...</li>
</ul>

16、清单 有序

<ol>
<li>...</li>
</ol>

<ul class="unstyled">
<li>...</li>
</ul>

17、横向排序

<ul class="inline">
<li>...</li>
</ul>

18、标题 内容 格式 （山下 布局)

<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

19、标题 内容 格式 （左右布局）

<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

20、table 格式

<table class="table table-striped">

<tr>

<td>1</td>

<td>TB - Monthly</td>

<td>01/04/2012</td>

<td>Approved</td>

</tr>

</table>

21、from 表单提交

<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>

<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>

22、内嵌表单

<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>

23、卧式表单

<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="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</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>

24、文本框

<input type="text" placeholder="Text input">

25、内容框

<textarea rows="3"></textarea>

26、checkboxes 和 radios

<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>

<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>

27、oher checkboxes style

<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

28、下拉框

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

29、扩展表单空间

<div class="input-prepend">
<span class="add-on">@</span>
<input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>
<div class="input-append">
<input class="span2" id="appendedInput" type="text">
<span class="add-on">.00</span>
</div>

30、输入框大小控制

<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">

31、禁止输入 复选框

<span class="input-xlarge uneditable-input">Some value here</span>

32、输入框 只能输邮件

<input class="span3" type="email" required>

32、禁止输入 输入框 灰色

<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

33、image

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

34、Boot starp 提供了 很多个小图标 自行查看

<i class="icon-search"></i>

<i class="icon-search icon-white"></i>

就介绍这么多。