AI专业者开发社区 1 号成员
  •  0 回帖  •  9 浏览  •  5 个月前
   

Bootstrap3 CSS样式基本用法总结

出于学习需要，自觉得把基本的 bootstrap 用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。

可点击左边的目录，方便速查。

按钮

a,input,button 都可以设置为按钮

a 标签按钮 button 标签按钮
        <a class="btn btn-default" href="#" role="button">a 标签按钮</a>
        <input type="button" class="btn btn-default" value="input 的 button 标签按钮" />
        <input type="submit" class="btn btn-default" value="input 的 submit 标签按钮" />
        <button class="btn btn-default">button 标签按钮</button>

 

预置样式

default 样式 primary 样式 success 样式 info 样式 warning 样式 danger 样式 link 样式
        <button class="btn btn-default">default 样式</button>
        <button class="btn btn-primary">primary 样式</button>
        <button class="btn btn-success">success 样式</button>
        <button class="btn btn-info">info 样式</button>
        <button class="btn btn-warning">warning 样式</button>
        <button class="btn btn-danger">danger 样式</button>
        <button class="btn btn-link">link 样式</button>

 

按钮大小

大按钮 btn-lg 默认按钮 小按钮 btn-sm 超小按钮 btn-xs
        <button class="btn btn-info btn-lg">大按钮 btn-lg</button>
        <button class="btn btn-info">默认按钮</button>
        <button class="btn btn-info btn-sm">小按钮 btn-sm</button>
        <button class="btn btn-info btn-xs">超小按钮 btn-xs</button>

 

块级按钮 -btn-block

块级按钮，与父元素等宽 块级按钮，与父元素等宽
        <button class="btn btn-success btn-block">块级按钮，与父元素等宽</button>
        <button class="btn btn-warning btn-lg btn-block">块级按钮，与父元素等宽</button>

 

禁用状态 class="disabled"

被禁用的按钮
        <button class="btn btn-success disabled">被禁用的按钮</button>

 

激活状态 class="active"

激活状态的按钮
        <button class="btn btn-success active">激活状态的按钮</button>

 

图片

响应式图片 -img-responsive

        <img class="img-responsive" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/783931/o_%e8%83%8c%e6%99%af%e5%9b%be1.png" />

 

图片的三种形状

        <img class="img-rounded" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
        <img class="img-thumbnail" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
        <img class="img-circle" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />

 

表格

基本表格 .table

表格标题表格标题表格标题
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元 
        <table class="table">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
          </tbody>
        </table>

 

斑马线表格 .table .table-striped

表格标题表格标题表格标题
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元 
        <table class="table table-striped">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
          </tbody>
        </table>

 

带边框表格 .table .table-bordered

表格标题表格标题表格标题
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元 
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
          </tbody>
        </table>

 

鼠标悬停表格 .table .table-hover

表格标题表格标题表格标题
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元 
        <table class="table table-hover">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
          </tbody>
        </table>

 

紧凑表格 .table .table-condensed

表格标题表格标题表格标题
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元 
        <table class="table table-condensed">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
          </tbody>
        </table>

 

响应式表格 .table .table-responsive

表格标题表格标题表格标题
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元
表格单元 表格单元 表格单元 
      <div class="myborder">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
             <tr>
              <td>表格单元</td>
              <td>表格单元</td>
              <td>表格单元</td>
            </tr>
          </tbody>
        </table>

 

状态类

表格标题表格标题表格标题
状态 active 状态 active 状态 active
状态 success 状态 success 状态 success
状态 info 状态 info 状态 info
状态 warning 状态 warning 状态 warning
状态 danger 状态 danger 状态 danger 
        <table class="table">
          <thead>
            <tr>
              <th>表格标题</th>
              <th>表格标题</th>
              <th>表格标题</th>
            </tr>
          </thead>
          <tbody>
            <tr class="active">
              <td>状态 active</td>
              <td>状态 active</td>
              <td>状态 active</td>
            </tr>
             <tr class="success">
              <td>状态 success</td>
              <td>状态 success</td>
              <td>状态 success</td>
            </tr>
             <tr class="info">
              <td>状态 info</td>
              <td>状态 info</td>
              <td>状态 info</td>
            </tr>
            <tr class="warning">
              <td>状态 warning</td>
              <td>状态 warning</td>
              <td>状态 warning</td>
            </tr>
            <tr class="danger">
              <td>状态 danger</td>
              <td>状态 danger</td>
              <td>状态 danger</td>
            </tr>
          </tbody>
        </table>

 

表单

基本表单 -.from-control 和.from-group 搭配

用户名
密码
记住密码
确定
        <form>
            <div class="form-group">
              <label for="userName">用户名</label>
              <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" class="form-control" name="password" placeholder="请输入密码"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">记住密码</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">确定</button>
          </div>
        </form>

 

内联表单 -.from-inline

用户名
密码
记住密码
确定
       <form class="form-inline">
            <div class="form-group">
              <label for="userName">用户名</label>
              <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="password" class="form-control" name="password" placeholder="请输入密码"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">记住密码</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">确定</button>
          </div>
        </form>

 

移动端注意 (隐藏 label)

用户名
密码
记住密码
确定
       <form class="form-inline">
            <div class="form-group">
              <label class="sr-only" for="userName">用户名</label>
              <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
              <label class="sr-only" for="password">密码</label>
              <input type="password" class="form-control" name="password" placeholder="请输入密码"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">记住密码</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">确定</button>
          </div>
      </form>

 

input 的内联组合

前面
后面
提交
        <form class="form-inline">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-addon">前面</div>
                <input class="form-control" type="text" placeholder="输入测试" />
              <div class="input-group-addon">后面</div>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
          </div>
        </form>

 

水平排列表单 (用栅格系统)

用户名
密码
记住密码
确定
       <form class="form-horizontal">
            <div class="form-group">
              <label for="userName" class="control-label col-sm-2">用户名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/>
              </div>
            </div>
            <div class="form-group">
              <label for="password" class="control-label col-sm-2">密码</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" name="password" placeholder="请输入密码"/>
              </div>  
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox">记住密码</input>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-info">确定</button>
              </div>
            </div>
      </form>

 

单选框和复选框的内联形式

选择 1 选择 2 选择 3
选择 1 选择 2 选择 3 
          <label class="checkbox-inline">
            <input type="checkbox">选择 1
          </label>
          <label class="checkbox-inline">
            <input type="checkbox">选择 2
          </label>
          <label class="checkbox-inline">
            <input type="checkbox">选择 3
          </label>

      <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="form-group"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">label </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="radio-inline"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
          <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="radio"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="myradio"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">选择1
        </span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">label </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="radio-inline"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
          <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="radio"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="myradio"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">选择2
        </span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
        <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">label </span><span style="color: rgba(255, 0, 0, 1)">class</span><span style="color: rgba(0, 0, 255, 1)">="radio-inline"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
          <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="radio"</span><span style="color: rgba(255, 0, 0, 1)"> name</span><span style="color: rgba(0, 0, 255, 1)">="myradio"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)">选择3
        </span><span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">label</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
      <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>

 

静态控件 .form-control-static

用户名

Tab Weng

      <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <p class="form-control-static">Tab Weng</p>
            </div>
        </div>
      </form>

 

标题

（提示：由于默认的 h1~h7 在博客园编辑器中受默认样式的影响，所以无法显示 bootstrap 的样式，其具体样式与下面的 class="h1" 等相同）

h1 标题样式

h4 标题样式

h5 标题样式
h6 标题样式
      <h1>h1 标题样式</h1>
      <h4>h4 标题样式</h4>
      <h5>h5 标题样式</h5>
      <h6>h6 标题样式</h6>

 

标题也可用 class="h1" 设置

通过 class="h1" 来设置样式
通过 class="h4" 来设置样式
通过 class="h5" 来设置样式
通过 class="h6" 来设置样式
        <div class="h1">通过 class="h1" 来设置样式</div>
        <div class="h4">通过 class="h4" 来设置样式</div>
        <div class="h5">通过 class="h5" 来设置样式</div>
        <div class="h6">通过 class="h6" 来设置样式</div>

 

副标题 -<small>(或 class="small")

设置样式 h1这里是副标题
设置样式 h4这里是副标题
设置样式 h5这里是副标题
设置样式 h6这里是副标题
        <div class="h1">设置样式 h1<small>这里是副标题</small></div>
        <div class="h4">设置样式 h4<small>这里是副标题</small></div>
        <div class="h5">设置样式 h5<small>这里是副标题</small></div>
        <div class="h6">设置样式 h6<small>这里是副标题</small></div>

 

页面内容

p 标签

Web 前端开发工程师，主要职责是利用 (X)HTML/CSS/JavaScript/DOM/Flash 等各种 Web 技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发 JavaScript 以及 Flash 模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的 Web 开发，致力于通过技术改善用户体验。

        <p>
          Web 前端开发工程师，主要职责是利用 (X)HTML/CSS/JavaScript/DOM/Flash 等各种 Web 技术进行产品的界面开发。
          制作标准优化的代码，并增加交互动态功能，开发 JavaScript 以及 Flash 模块，同时结合后台开发技术模拟整体
          效果，进行丰富互联网的 Web 开发，致力于通过技术改善用户体验。
        </p>

 

突出段落 -class="lead"

Web 前端开发工程师，主要职责是利用 (X)HTML/CSS/JavaScript/DOM/Flash 等各种 Web 技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发 JavaScript 以及 Flash 模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的 Web 开发，致力于通过技术改善用户体验。

      <p class="lead">
        Web 前端开发工程师，主要职责是利用 (X)HTML/CSS/JavaScript/DOM/Flash 等各种 Web 技术进行产品的界面开发。
        制作标准优化的代码，并增加交互动态功能，开发 JavaScript 以及 Flash 模块，同时结合后台开发技术模拟整体
        效果，进行丰富互联网的 Web 开发，致力于通过技术改善用户体验。
      </p>

 

内联文本元素

标记 -<mark>

使用 mark 来标记一下
        使用 mark 来<mark>标记</mark>一下

 

删除线 -<del> 或 <s>

用 del 标签来删除这段话

用 s 标签来删除这段话

        <p><del>用 del 标签来删除这段话</del></p>
        <p><s>用 s 标签来删除这段话</s></p>

 

下划线 -<ins> 或 <u>

ins 标签表示插入文本

u 标签表示加上下划线
        <p><ins>ins 标签表示插入文本</ins></p>
        <u>u 标签表示加上下划线</u>

 

小号文本 -<small>

这是小号文本
        <small>这是小号文本</small>

 

强调 -<strong>

这是加强字体，用 strong
        <strong>这是加强字体，用 strong</strong>

 

斜体 -<em>

这是斜体，用 em
        <em>这是斜体，用 em</em>

 

对齐

居左对齐

居中对齐

居右对齐

[两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API 设计 和 OAuth 等等，比较前卫的项目，还会用到 Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

[没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API 设计 和 OAuth 等等，比较前卫的项目，还会用到 Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

      <p class="text-left">居左对齐</p>
      <p class="text-center">居中对齐</p>
      <p class="text-right">居右对齐</p>
      <p class="text-justify">
        [两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、
        前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API 设计
        和 OAuth 等等，比较前卫的项目，还会用到 Single Page Application、Web Socket、HTML5/CSS3
        这些技术以及像第三方开发像微信公众号微博应用等等。
      </p>
      <p class="text-nowrap">
         [没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、
        前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API 设计
        和 OAuth 等等，比较前卫的项目，还会用到 Single Page Application、Web Socket、HTML5/CSS3
        这些技术以及像第三方开发像微信公众号微博应用等等。
      </p>

 

改变大小写

LowerCase HahaHa

UpperCase Hahaha

capitalize haHaha

      <p class="text-lowercase">LowerCase HahaHa</p>
      <p class="text-uppercase">UpperCase Hahaha</p>
      <p class="text-capitalize">capitalize haHaha</p>

 

缩略语 <abbr> 标签

bootstrap 是一个高度集成化的开发框架 此处缩略
bootstrap 是一个高度集成化的开发框架 此处缩略 

  </div>

        <p class="lead">
          bootstrap 是一个高度集成化的开发框架 <abbr title="这里显示了缩略语的内容">此处缩略</abbr><br />
          bootstrap 是一个高度集成化的开发框架 <abbr class="initialism" title="这里加了类.initialism 所以变小了">此处缩略</abbr>
        </p>

 

引用

基本引用

这是 html 的基本引用标签 blockquote，bootstrap 为它左边添加了一个灰色带

        <blockquote>
          <p>这是 html 的基本引用标签 blockquote，bootstrap 为它左边添加了一个灰色带</p>
        </blockquote>

 

引用来源 <footer>

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。

比尔盖茨
        <blockquote>
          <p>这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。</p>
          <footer>比尔盖茨</footer>
        </blockquote>

 

居右的引用，添加类.blockquote-reverse

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。

比尔盖茨
        <blockquote class="blockquote-reverse">
          <p>这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。</p>
          <footer>比尔盖茨</footer>
        </blockquote>

 

列表

无样式列表.list-unstyled

  • 这里是列表
  • 这里是列表
    • 这里是二级列表
    • 这里是二级列表
    • 这里是二级列表
    • 这里是二级列表
  • 这里是列表
  • 这里是列表
  • 这里是列表
        <ul class="list-unstyled">
          <li>这里是列表</li>
          <li>这里是列表</li>
            <ul>
              <li>这里是二级列表</li>
              <li>这里是二级列表</li>
              <li>这里是二级列表</li>
              <li>这里是二级列表</li>
            </ul>
          <li>这里是列表</li>
          <li>这里是列表</li>
          <li>这里是列表</li>
        </ul>

 

内联列表 - 同一行显示.list-inline

  • 这里是列表
  • 这里是列表
    • 这里是二级列表
    • 这里是二级列表
    • 这里是二级列表
    • 这里是二级列表
  • 这里是列表
  • 这里是列表
  • 这里是列表
        <ul>
          <li>这里是列表</li>
          <li>这里是列表</li>
            <ul class="list-inline">
              <li>这里是二级列表</li>
              <li>这里是二级列表</li>
              <li>这里是二级列表</li>
              <li>这里是二级列表</li>
            </ul>
          <li>这里是列表</li>
          <li>这里是列表</li>
          <li>这里是列表</li>
        </ul>

 

普通描述

名言
如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。
比尔盖茨的名人名言是这样描述的
在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的 "寄生虫" 来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
        <dl>
          <dt>名言</dt>
          <dd>如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。</dd>
          <dt>比尔盖茨的名人名言是这样描述的</dt>
          <dd>在你出生之前，你的父母并非像他们现在这样乏味。
            他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。
            所以，如果你想消灭你父母那一辈中的 "寄生虫" 来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
          </dd>
        </dl>

 

水平排列描述.dl-horizontal

名言
如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。
比尔盖茨的名人名言是这样描述的
在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的 "寄生虫" 来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
        <dl class="dl-horizontal">
          <dt>名言</dt>
          <dd>如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。</dd>
          <dt>比尔盖茨的名人名言是这样描述的</dt>
          <dd>在你出生之前，你的父母并非像他们现在这样乏味。
            他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。
            所以，如果你想消灭你父母那一辈中的 "寄生虫" 来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
          </dd>
        </dl>

 

代码

内联代码 code

Let's add a headFile #include<stdio>
          Let's add a headFile <code>#include&lt;stdio&gt;</code>

 

用户输入 kbd

请按 F5 刷新
          请按 <kbd>F5</kbd> 刷新

 

代码块 pre

<div>This is a tag name div </div>
          <pre>&lt;div&gt;This is a tag name div &lt;/div&gt;</pre>

 

变量 var

a
          <var>a</var>

 

程序输出 samp

Hello World!
          <samp>Hello World!</samp>

 

 

本篇总结了一些常用的 bootstrap3 的 Css 样式，但并非所有。

详细的学习请参考 bootstrap 官网：http://getbootstrap.com

bootstrap4 即将到来，期待！