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