bootstrap定义的标签

定义标记内容

<mark></mark>

定义删除的文本和无用文本

/*被删除*/
<del></del>

/*无用*/
<s></s>

插入文本和带下划线的文本

/插入/
<ins></ins>

/下划线/
<u></u>

小号文本，文字为父容器文字大小的85%

<small></small>
或者
<div class=".small"></div>

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写

/小写/
<p class="text-lowercase">Lowercased text.</p>
/全大写/
<p class="text-uppercase">Uppercased text.</p>
/首字母大写/
<p class="text-capitalize">Capitalized text.</p>

引用还可以这样？没错

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

列表什么的都没什么变化，看dl，使用下列代码会将dl变成左边是dt，右边是dd;

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

用户输入的信息和内联代码

<code>&lt;code&lt;</code>
<kbd></kbd>

bootstrap为我们定义了表格样式，使用以下代码可以添加表格

/基础表格/
<table class="table"></table>
/条纹表格/
<table class="table-striped"></table>
/带边框的表格/
<table class="table-bordered"></table>
/悬停变色表格/
<table class="table-hover"></table>
/紧缩表格/(框架内设的padding会减半)
<table class="table-condensed"></table

我们还能通过状态类可以改变单元格或者行的颜色

/鼠标悬停在行或单元格上设置的颜色/
<tr class="active"></tr>

/成功或积极的动作/
<tr class="success"></tr>

/标识普通的提示信息或动作/
<tr class="info"></tr>

/标识警告/
<tr class="warning"></tr>

/危险或带来负面影响/
<tr class="danger"></tr>

---

表单内容

在bootstrap v3的中文文档中，提供给我们了一个这样的实例

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">check again
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

我们可以对整个表单设置form-inline来使整个内容表现为inline-block级别的控件，并且原表单中他的width=100% 可以根据我们的需要去手动设置.

input输入控件要求我们在前面加上label标签，以便屏幕阅读器正确识别，对于form-inline的表单，可以通过对label设置class="sr-only" 来隐藏label内容

我们还能通过栅格布局和表单类form-horizontal 来设置成水平排列的表单;下面贴一个v3拷过来的代码

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

文本域加入form-control类可以添加框架编写的样式

<textarea class="form-control"></textarea>

表单的checkbox和radio，可以同时对他们的input设置disabled和对他们的父元素设置disabled类使得文字也不可选.

<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

内联单选和多选框是对其设置checkbox-inline或radio-inline类

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

在Bootstrap中，若想显示一行纯文本例如p标签,他的高度和label中的高度是不一致的,若想要一致可以给p标签添加一个form-control-static 类

有时候我们会用fieldset来编写一段表单,对于fieldset这个标签,bootstrap添加了一个disabled类来禁用fieldset中的一切表单元素来和页面交互;

bootstrap提供了has-warning has-error has-success 类添加到这些控件的父元素同时还给予了has-feedback 方法提供额外的图标

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div

bootstrap提供了form-group-lg 或form-group-sm 类来帮助我们改变控件的高度;还可以通过col-xx-x 来改变长度

<div class="form-group form-group-lg">
//
<div class="col-xs-2">