百科名医网新版个人中心统一样式说明文档——基本样式

说明:以下绿色字表示Demo的实际代码

标题

标题1

<h1>标题1</h1>

标题2

<h2>标题1</h2>

标题3

<h3>标题3</h3>

标题4

<h4>标题4</h4>



字号
12号字
<div class="font_12">12号字</div>
14号字
<div class="font_14">14号字</div>
16号字
<div class="font_16">16号字</div>
18号字
<div class="font_18">18号字</div>



路径导航
<ol class="breadcrumb">
<li><a class="ljdj" href="#">Home</a></li>
<li><a class="ljdj" href="#">Library</a></li>
<li class="active">Data</li>
</ol>



区块
980像素居中
<div class="w_980">宽度为980像素居中的区块</div>
宽度为972像素居中的区块
<div class="w_972">宽度为972像素居中的区块</div>
宽度为457像素的区块
<div class="w_457">宽度为457像素的区块</div>
宽度为315像素的区块
<div class="w_315">宽度为315像素的区块</div>
宽度为300像中的区块
<div class="w_300">宽度为300像素的区块</div>
宽度为268像中的区块
<div class="w_268">宽度为268像素的区块</div>
宽度为w_240像中的区块
<div class="w_240">宽度为240像素的区块</div>
宽度为w_202像中的区块
<div class="w_202">宽度为202像素的区块</div>
宽度为172像素的区块
<div class="w_172">宽度为172像素的区块</div>
宽度为300像素居左的区块
<div class="w_300 fl">宽度为300像素的区块</div>
宽度为300像素居右的区块
<div class="w_300 fr">宽度为300像素的区块</div>




圆角&边框
边框矩形
<div class="border">边框矩形</div>


灰色边框矩形
<div class="border_gray">灰色边框矩形</div>


5像素圆角矩形
<div class="border_radius_all_5 border">5像素圆角矩形</div>


10像素圆角矩形
<div class="border_radius_all_10 border">5像素圆角矩形</div>


5像素上圆角矩形
<div class="border_radius_top_5 border">5像素圆角矩形</div>




面板
基本面板
<div class="panel panel-default">
<div class="panel-body">
基本面板
</div>
</div>

 

标题
带标题的面板
<div class="panel panel-default">
<div class="panel-heading">标题</div>
<div class="panel-body">
带标题的面板
</div>
</div>

 

标题
带标题的面板
<div class="panel panel-primary">
<div class="panel-heading">标题</div>
<div class="panel-body">
带标题的面板
</div>
</div>

 

标题
带标题的面板
<div class="panel panel-success">
<div class="panel-heading">标题</div>
<div class="panel-body">
带标题的面板
</div>
</div>

 

标题
带标题的面板
<div class="panel panel-info">
<div class="panel-heading">标题</div>
<div class="panel-body">
带标题的面板
</div>
</div>

 

标题
带标题的面板
<div class="panel panel-warning">
<div class="panel-heading">标题</div>
<div class="panel-body">
带标题的面板
</div>
</div>

 

标题
带标题的面板
<div class="panel panel-danger">
<div class="panel-heading">标题</div>
<div class="panel-body">
带标题的面板
</div>
</div>