AKBlog博客主题提供了基础文章模块，在该模块中出了实现很多Bootstrap相关的UI组件以外，还加入了几个美化过的比较常用的样式，写文章时方便查阅，有时间做成富文本编辑器的plugin就更方便了。

文章内标题

<h2>Best Wireless Routers 2017</h2>

文章目录导航跳转

文章导航条格式，锚文本跳转,导航效果如右边边栏

<ul class="navigate-list">
    <li>
        <i class="fa fa-arrow-right article-arrow"></i> 
        <a href="#comtable">Our Top 10 Wifi Routers List</a>
    </li>
    <li>
        <i class="fa fa-arrow-right article-arrow"></i> 
        <a href="#comtable">Our Top 10 Wifi Routers List</a>
    </li>
</ul>

引导跳转的副标题，文章内设置 name 标签

<a name="comtable"></a>

图片样式和位置调整

居中

 <div class="aligncenter"></div>

靠左

<div class="alignright"></div>

靠右

<div class="alignleft"></div>

还可以加以下样式

边框样式 img-thumbnail

圆形样式 img-circle

四角圆角 img-rounded

常用标签

加粗标签

<strong>这个字体加粗</strong>

这个字体加粗

代码标签code

<code>这个代码Code标签</code>

这个代码Code标签

代码标签pre

<pre>这个代码pre标签</pre>

表格样式模板

<table>
<thead>
<tr>
    <th class="column-1">Device Name</th>
    <th class="column-2">Weight</th>
    <th class="column-3">LAN Ports</th>
    <th class="column-4">Wireless Comm</th>
    <th class="column-5"></th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="even">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <div class="su-button-center"><a href="#" class="su-button su-button-style-default"> <span class="su-button-span">Check Price</span></a></div>
    </td>
</tr>
<tr class="odd">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <div class="su-button-center"><a href="#" class="su-button su-button-style-default"> <span class="su-button-span">Check Price</span></a></div>
    </td>
</tr>
</tbody>
</table>

信息面板样式模板

红色信息面板

<div class="redb">
    <h3>title</h3>
    <hr>
    <p></p>
    <div class="su-list">
        <ul>
            <li><i class="fa fa-ban"></i> failed</li>
            <li><i class="fa fa-check"></i> success</li>
            <li><i class="fa fa-exclamation"></i> warning</li>
        </ul>
        <p>
        </p>
    </div>
</div>

效果展示

蓝色信息面板

<div class="blueb">
    <h3>title</h3>
    <hr>
    <p></p>
    <div class="su-list">
        <ul>
            <li><i class="fa fa-ban"></i> failed</li>
            <li><i class="fa fa-check"></i> success</li>
            <li><i class="fa fa-exclamation"></i> warning</li>
        </ul>
        <p>
        </p>
    </div>
</div>

效果展示

Panel面板效果样式

panel panel-primary

panel panel-success

panel panel-info

panel panel-warning

panel panel-danger

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

panel-success 效果

优缺点对比面板样式

<div class="su-row">
    <div class="su-column su-column-size-1-2">
        <div class="su-column-inner su-clearfix">
            <div class="su-box su-box-style-default" >
                <div class="su-box-title green-style">Pros
                </div>
                <div class="su-box-content su-clearfix">
                    <div class="su-list">
                        <ul>
                            <li><i class="fa fa-ban"></i> failed</li>
                            <li><i class="fa fa-check"></i> success</li>
                            <li><i class="fa fa-exclamation"></i> warning</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="su-column su-column-size-1-2">
        <div class="su-column-inner su-clearfix">
            <div class="su-box su-box-style-default">
                <div class="su-box-title red-style" >Cons
                </div>
                <div class="su-box-content su-clearfix">
                    <div class="su-list">
                        <ul>
                            <li><i class="fa fa-ban"></i> failed</li>
                            <li><i class="fa fa-check"></i> success</li>
                            <li><i class="fa fa-exclamation"></i> warning</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

效果展示

Tab切页标签样式模板

 <div class="su-tabs su-tabs-style-default">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs su-tabs-nav" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content su-tabs-panes">
            <div role="tabpanel" class="tab-pane su-tabs-pane su-clearfix active" id="home">
                c
            </div>
            <div role="tabpanel" class="tab-pane su-tabs-pane su-clearfix" id="profile">
                b
            </div>
            <div role="tabpanel" class="tab-pane su-tabs-pane su-clearfix" id="messages">
                a
            </div>
        </div>
    </div>

效果展示