你的位置:首页 > 网页设计

[网页设计]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>

 

禁用状态


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

 

激活状态


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

 

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



     <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

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的样式,其具体样式与下面的等相同)

h1标题样式

h4标题样式

h5标题样式
h6标题样式

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

 

标题也可用设置

通过来设置样式
通过来设置样式
通过来设置样式
通过来设置样式

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

 

副标题-<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>

 

突出段落-

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是一个高度集成化的开发框架 此处缩略


    <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 即将到来,期待!