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="https://simg.open-open.com/show/03543594060d616e8a4ecd27ded04954.png" />

图片的三种形状

        <img class="img-rounded" src="https://simg.open-open.com/show/3477532cbbc4e55b55849e714ad54c36.jpg" />          <img class="img-thumbnail" src="https://simg.open-open.com/show/3477532cbbc4e55b55849e714ad54c36.jpg" />          <img class="img-circle" src="https://simg.open-open.com/show/3477532cbbc4e55b55849e714ad54c36.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 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>h1标题样式</h1>        <h4>h4标题样式</h4>        <h5>h5标题样式</h5>        <h6>h6标题样式</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>

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

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

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

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

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

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

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

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

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

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

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

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