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> [phone]
</address>
 
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[e-mail]</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>

就介绍这么多。