定义标记内容
<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><code<</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">