字体

<kbd>强调字体</kbd>
<code>代码字体</code>
<span class="text-info">info样式</span>
<span class="text-success">success样式</span>
<span class="text-danger">danger样式</span>
<span class="text-warning">warning样式</span>
<span class="text-muted">muted样式</span>
<span class="bg-info">背景info样式</span>
强调字体 代码字体 info样式 success样式 danger样式 warning样式 muted样式 背景info样式

按钮

<button class="btn btn-default">default</button>
<button class="btn btn-info">info</button>
<button class="btn btn-success">success</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-warning">warning</button>

表格

<table class="table table-bordered table-responsive table-striped table-hover table-condensed">
      <thead>
      <tr><th>表头1</th><th>表头2</th><th>表头3</th><th>表头4</th></tr>
      </thead>
      <tbody>
      <tr><td>100</td><td>100</td><td>100</td><td>100</td></tr>
      <tr><td>100</td><td>100</td><td>100</td><td>100</td></tr>
      <tr class="success"><td>100</td><td>100</td><td>100</td><td>100</td></tr>
      </tbody>
</table>
表头1表头2表头3表头4
100100100100
100100100100
100100100100

图片

<img class="img-rounded img-responsive" src="Naruto.jpg">
<img class="img-responsive img-circle" src="Naruto.jpg">
<img class="img-responsive img-thumbnail" src="Naruto.jpg">

媒体

<div class="media "style="border: 1px solid">
    <div class="media-left"><a href="#"><img style="max-width: 100px" src="Naruto.jpg"> </a> </div>
    <div class="media-body"><h3 class="media-heading">交通运输学院</h3>
        <p class="text-muted">
             北京交大一看名字就知道交通肯定是个好专业。
         </p>
    </div>
</div>

交通运输学院

北京交大一看名字就知道交通肯定是个好专业。呵呵。毕业就分配交警工作，直接就是副处级。根本不愁赚不到钱。当然这肯定是开玩笑的，三分靠颜值，七分靠打拼的道理大家都懂。

布局

<div class="jumbotron">
    <div class="container">
        <h1>案例</h1>
        <h4>校园内各种事件都会发生...</h4>
    </div>
</div>
此处可设置background-img的style来代替eee变成背景色
    
        

案例

        

校园内各种事件都会发生...

    

布局

<div class="container" style="background-color: #006dcc">container根据大、中、小、超小分别响应</div>
<div class="container-fluid" style="background-color: dimgrey">container-fluid始终100%响应</div>
<div class="well">well嵌入式div</div>
container根据大、中、小、超小分别响应
container-fluid始终100%响应
well嵌入式div

响应式

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6" style="background-color: #006dcc">div1</div>
    <div class="col-md-3 col-sm-4 col-xs-6" style="background-color: yellowgreen">div2</div>
    <div class="col-md-3 col-sm-4 col-xs-6" style="background-color: #006dcc">div3</div>
    <div class="col-md-3 col-sm-4 col-xs-6" style="background-color: yellowgreen">div4</div>
</div>
div1
div2
div3
div4

响应式2

<div class="btn-group">
<button class="btn btn-danger visible-lg">大屏显示</button>
<button class="btn btn-danger visible-md">中屏显示</button>
<button class="btn btn-danger visible-sm">小屏显示</button>
<button class="btn btn-danger visible-xs">超小屏显示</button>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-success hidden-lg">大屏隐藏</button>
<button class="btn btn-success hidden-md">中屏隐藏</button>
<button class="btn btn-success hidden-sm">小屏隐藏</button>
<button class="btn btn-success hidden-xs">超小屏隐藏</button>
</div>

手风琴

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.