Bootstrap3 CSS样式基本用法总结

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

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

按钮

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

a标签按钮

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

预置样式

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

按钮大小

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

状态类

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

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

           <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>            <div class="form-group">             <label class="radio-inline">               <input type="radio" name="myradio">选择1             </label>             <label class="radio-inline">               <input type="radio" name="myradio">选择2             </label>             <label class="radio-inline">               <input type="radio" name="myradio">选择3             </label>           </div> 

静态控件 .form-control-static

       <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>h1标题样式</h1>       <h4>h4标题样式</h4>       <h5>h5标题样式</h5>       <h6>h6标题样式</h6> 

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

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

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

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

下划线-<ins>或<u>

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

小号文本-<small>

这是小号文本

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

强调-<strong>

这是加强字体，用strong

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

斜体-<em>

这是斜体，用em

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

对齐

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

改变大小写

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

缩略语 <abbr>标签

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

引用

基本引用

         <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<stdio></code> 

用户输入 kbd

请按 F5 刷新

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

代码块 pre

<div>This is a tag name div </div>

           <pre><div>This is a tag name div </div></pre> 

变量 var

a

           <var>a</var> 

程序输出 samp

Hello World!

           <samp>Hello World!</samp> 

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

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

bootstrap4 即将到来，期待！