|
@@ -265,7 +265,7 @@
|
|
|
<div class="container-fluid">
|
|
<div class="container-fluid">
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="row">
|
|
|
- <div class="col-lg-12">
|
|
|
|
|
|
|
+ <div class="col-md-12">
|
|
|
<div class="card">
|
|
<div class="card">
|
|
|
<div class="card-header"><h4>标签</h4></div>
|
|
<div class="card-header"><h4>标签</h4></div>
|
|
|
<div class="card-body">
|
|
<div class="card-body">
|
|
@@ -324,10 +324,10 @@
|
|
|
<h5>普通折叠效果</h5>
|
|
<h5>普通折叠效果</h5>
|
|
|
<!--折叠效果-->
|
|
<!--折叠效果-->
|
|
|
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
|
- Link with href
|
|
|
|
|
|
|
+ 点击链接
|
|
|
</a>
|
|
</a>
|
|
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
|
- Button with data-target
|
|
|
|
|
|
|
+ 带data-target的按钮
|
|
|
</button>
|
|
</button>
|
|
|
<div class="collapse m-t-10" id="collapseExample">
|
|
<div class="collapse m-t-10" id="collapseExample">
|
|
|
<div class="well">
|
|
<div class="well">
|
|
@@ -447,7 +447,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="col-lg-12">
|
|
|
|
|
|
|
+ <div class="col-md-12">
|
|
|
<div class="card">
|
|
<div class="card">
|
|
|
<div class="card-header"><h4>列表组</h4></div>
|
|
<div class="card-header"><h4>列表组</h4></div>
|
|
|
<div class="card-body">
|
|
<div class="card-body">
|
|
@@ -486,48 +486,48 @@
|
|
|
</div>
|
|
</div>
|
|
|
<p>列表组中的元素也可以直接就是按钮(也同时意味着父元素必须是 <code><div></code> 而不能用 <code><ul></code> 了),并且无需为每个按钮单独包裹一个父元素。<strong class="text-danger">注意不要使用标准的 <code>.btn</code> 类!</strong></p>
|
|
<p>列表组中的元素也可以直接就是按钮(也同时意味着父元素必须是 <code><div></code> 而不能用 <code><ul></code> 了),并且无需为每个按钮单独包裹一个父元素。<strong class="text-danger">注意不要使用标准的 <code>.btn</code> 类!</strong></p>
|
|
|
<div class="list-group">
|
|
<div class="list-group">
|
|
|
- <button type="button" class="list-group-item">Cras justo odio</button>
|
|
|
|
|
- <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
|
|
|
|
|
- <button type="button" class="list-group-item">Morbi leo risus</button>
|
|
|
|
|
- <button type="button" class="list-group-item">Porta ac consectetur ac</button>
|
|
|
|
|
- <button type="button" class="list-group-item">Vestibulum at eros</button>
|
|
|
|
|
|
|
+ <button type="button" class="list-group-item">第一回 张天师祈禳瘟疫 洪太尉误走妖魔</button>
|
|
|
|
|
+ <button type="button" class="list-group-item">第二回 王教头私走延安府 九纹龙大闹史家村</button>
|
|
|
|
|
+ <button type="button" class="list-group-item">第三回 史大郎夜走华阴县 鲁提辖拳打镇关西</button>
|
|
|
|
|
+ <button type="button" class="list-group-item">第四回 赵员外重修文殊院 鲁智深大闹五台山</button>
|
|
|
|
|
+ <button type="button" class="list-group-item">第五回 小霸王醉入销金帐 花和尚大闹桃花村</button>
|
|
|
</div>
|
|
</div>
|
|
|
<p>为 <code>.list-group-item</code> 添加 <code>.disabled</code> 类可以让单个条目显示为灰色,表现出被禁用的效果。</p>
|
|
<p>为 <code>.list-group-item</code> 添加 <code>.disabled</code> 类可以让单个条目显示为灰色,表现出被禁用的效果。</p>
|
|
|
<div class="list-group">
|
|
<div class="list-group">
|
|
|
<a href="#!" class="list-group-item disabled">
|
|
<a href="#!" class="list-group-item disabled">
|
|
|
Cras justo odio
|
|
Cras justo odio
|
|
|
</a>
|
|
</a>
|
|
|
- <a href="#!" class="list-group-item">Dapibus ac facilisis in</a>
|
|
|
|
|
- <a href="#!" class="list-group-item">Morbi leo risus</a>
|
|
|
|
|
- <a href="#!" class="list-group-item">Porta ac consectetur ac</a>
|
|
|
|
|
- <a href="#!" class="list-group-item">Vestibulum at eros</a>
|
|
|
|
|
|
|
+ <a href="#!" class="list-group-item">第六回 九纹龙剪径赤松林 鲁智深火烧瓦罐寺</a>
|
|
|
|
|
+ <a href="#!" class="list-group-item">第七回 花和尚倒拔垂杨柳 豹子头误入白虎堂</a>
|
|
|
|
|
+ <a href="#!" class="list-group-item">第八回 林教头刺配沧州道 鲁智深大闹野猪林</a>
|
|
|
|
|
+ <a href="#!" class="list-group-item">第九回 柴进门招天下客 林冲棒打洪教头</a>
|
|
|
</div>
|
|
</div>
|
|
|
<p>为列表中的条目添加情境类,默认样式或链接列表都可以。还可以为列表中的条目设置 <code>.active</code> 状态。</p>
|
|
<p>为列表中的条目添加情境类,默认样式或链接列表都可以。还可以为列表中的条目设置 <code>.active</code> 状态。</p>
|
|
|
<ul class="list-group">
|
|
<ul class="list-group">
|
|
|
- <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
|
|
|
|
|
- <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
|
|
|
|
|
- <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
|
|
|
|
|
- <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
|
|
|
|
|
|
|
+ <li class="list-group-item list-group-item-success">第十回 林教头风雪山神庙 陆虞候火烧草料场</li>
|
|
|
|
|
+ <li class="list-group-item list-group-item-info">第十一回 朱贵水亭施号箭 林冲雪夜上梁山</li>
|
|
|
|
|
+ <li class="list-group-item list-group-item-warning">第十二回 梁山泊林冲落草 汴京城杨志卖刀</li>
|
|
|
|
|
+ <li class="list-group-item list-group-item-danger">第十三回 急先锋东郭争功 青面兽北京斗武</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
<div class="list-group">
|
|
<div class="list-group">
|
|
|
- <a href="#!" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
|
|
|
|
|
- <a href="#!" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
|
|
|
|
|
- <a href="#!" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
|
|
|
|
|
- <a href="#!" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
|
|
|
|
|
|
|
+ <a href="#!" class="list-group-item list-group-item-success">第十四回 赤发鬼醉卧灵官殿 晁天王认义东溪村</a>
|
|
|
|
|
+ <a href="#!" class="list-group-item list-group-item-info">第十五回 吴学究说三阮撞筹 公孙胜应七星聚义</a>
|
|
|
|
|
+ <a href="#!" class="list-group-item list-group-item-warning">第十六回 杨志押送金银担 吴用智取生辰纲</a>
|
|
|
|
|
+ <a href="#!" class="list-group-item list-group-item-danger">第十七回 花和尚单打二龙山 青面兽双夺宝珠寺</a>
|
|
|
</div>
|
|
</div>
|
|
|
<p>列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。</p>
|
|
<p>列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。</p>
|
|
|
<div class="list-group">
|
|
<div class="list-group">
|
|
|
<a href="#!" class="list-group-item active">
|
|
<a href="#!" class="list-group-item active">
|
|
|
- <h4 class="list-group-item-heading">List group item heading</h4>
|
|
|
|
|
- <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
|
|
|
|
|
+ <h4 class="list-group-item-heading">第十八回 美髯公智稳插翅虎 宋公明私放晁天王</h4>
|
|
|
|
|
+ <p class="list-group-item-text">当时何观察与兄弟何清道:“这锭银子,是官司信赏的,非是我把来赚你,后头再有重赏。</p>
|
|
|
</a>
|
|
</a>
|
|
|
<a href="#!" class="list-group-item">
|
|
<a href="#!" class="list-group-item">
|
|
|
- <h4 class="list-group-item-heading">List group item heading</h4>
|
|
|
|
|
- <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
|
|
|
|
|
+ <h4 class="list-group-item-heading">第十九回 林冲水寨大?火 晁盖梁山小夺泊</h4>
|
|
|
|
|
+ <p class="list-group-item-text">话说当下何观察领了知府台旨下厅来,随即到机密房里,与众人商议。</p>
|
|
|
</a>
|
|
</a>
|
|
|
<a href="#!" class="list-group-item">
|
|
<a href="#!" class="list-group-item">
|
|
|
- <h4 class="list-group-item-heading">List group item heading</h4>
|
|
|
|
|
- <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
|
|
|
|
|
+ <h4 class="list-group-item-heading">第二十回 梁山泊义士尊晁盖 郓城县月夜走刘唐</h4>
|
|
|
|
|
+ <p class="list-group-item-text">话说林冲杀了王伦,手拿尖刀,指着众人说道:“据林冲虽系禁军遭配到此,今日为众豪杰至此相聚,争奈王伦心胸狭隘,嫉贤妒能,推故不纳,因此火并了这厮,非林冲要图此位。</p>
|
|
|
</a>
|
|
</a>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
@@ -535,7 +535,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="col-lg-12">
|
|
|
|
|
|
|
+ <div class="col-md-12">
|
|
|
<div class="card">
|
|
<div class="card">
|
|
|
<div class="card-header"><h4>徽章</h4></div>
|
|
<div class="card-header"><h4>徽章</h4></div>
|
|
|
<div class="card-body">
|
|
<div class="card-body">
|