Boostrap基础排版

h1 h2 h3 标题

<span class="h1">Bootstrap权威指南</span><br>
    <span class="h2">Bootstrap权威指南</span><br>
    <span class="h3">Bootstrap权威指南</span><br>
    <span class="h4">Bootstrap权威指南</span><br>

---

.lead 页面主题 lead样式主要是增大文字大小、粗细、行间距和margin-bottom

<p class="lead">Bootstrap权威指南</p>

small strong em cite

<strong>Bootstrap权威指南</strong>
<em>Bootstrap权威指南</em>
<small>Bootstrap权威指南</small>

.text-left|对齐方式

   <p class="text-left">Bootstrap权威指南</p>
    <p class="text-right">Bootstrap权威指南</p>
    <p class="text-center">Bootstrap权威指南</p>

---

< abbr > 缩略语

 <abbr title="设计模式是一本专业书籍">设计模式</abbr>

---

address 地址元素

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

---

blockquote引用

<blockquote>
    <p>Bootstrap权威指南Bootstrap权威指南Bootstrap权威指南Bootstrap权威指南</p>
</blockquote>

<blockquote class="pull-right">可以右对齐

---

Boostrap列表
Boostrap有六种形式的列表，分别是：普通列表、有序列表、去点列表、内敛列表、描述列表和水平描述列表

去点列表

<ul class="list-unstyled">
    <li></li>
</ul>

定义列表

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

水平定义列表

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

---

代码

代码有内联代码< code >、用户输入代码 < kbd >、多行代码块 < pre >

---

基础表单

<form>
    <fieldset>
        <legend>用户登录</legend>
        <div class="form-group">
            <label>登陆账户</label>
            <input type="email"  class="form-control" placeholder="请输入用户名或Email">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password"  class="form-control" placeholder="请输入用户名或Email">
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-default">登陆</button>
    </fieldset>
</form>

内联表单
把上面的form加上样式<form class="form-inline">

控件状态

<div class="form-group has-success has-feedback">
    <label class="control-label" >Input With success</label>
    <input type="text" class="form-control" id="input1">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

<div class="form-group has-error has-feedback">
    <label class="control-label" >Input With error</label>
    <input type="text" class="form-control input" id="input2">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>

<div class="form-group has-warning has-feedback">
    <label class="control-label" >Input With warning</label>
    <input type="text" class="form-control input-lg" id="input3">
    <span class="glyphicon glyphicon-bed form-control-feedback"></span>
</div>