<p>查东西的时候看到了 <a href="http://www.bootcss.com/">Bootstrap</a> 的特效,觉得非常好看,就像把里面的一些功能加到 Hexo 的 Next 主题里<br>
(有别的主题是自带 <span class="label label-sky">Bootstrap</span> 的,不过 Next 已经被修改了好多,不想在折腾了【虽然有折腾了一晚上】)</p>
<p>加了一些好看的标签,同时修改了 Next 自带的 <code>code</code> 标签</p>

<h1 id="heading">效果展示</h1>
<p>效果如下：</p>
<ul>
<li>各种颜色的标签:</li>
<li><span class="label label-red">red</span></li>
<li><span class="label label-sky">sky</span></li>
<li><span class="label label-orange">orange</span></li>
<li><span class="label label-blue">blue</span></li>
<li><span class="label label-green">green</span></li>
<li>单行代码框:</li>
<li><code>int num;</code></li>
<li>按键框</li>
<li><kbd>Ctrl + A</kbd></li>
<li>并且新版的 Next 主题内建标签有了这种 note</li>
<li>{% note defult %}deafult{% endnote %}</li>
<li>{% note primary %}primary{% endnote %}</li>
<li>{% note success %}success{% endnote %}</li>
<li>{% note info %}info{% endnote %}</li>
<li>{% note warning %}warning{% endnote %}</li>
<li>{% note danger %}danger{% endnote %}</li>
</ul>
<hr>
<p>然后又顺手重新弄了下 OJ 题目的 CSS (稍微好看了那么一点)<br>
美化完又增加了按键隐藏功能(毕竟题目和代码真长……)</p>
<p>效果如下：</p>

<p>{% raw %}</p>
<div><div class="fold_hider"><div class="close hider_title">点击显/隐</div></div><div class="fold">
<div class="oj">   
    <div class="part" title="Description">
{% endraw %}
<p>There is a kindom of obsession, so people in this kingdom do things very strictly.</p>
<p>They name themselves in integer, and there are n people with their id continuous (s+1,s+2, ,s+n) standing in a line in arbitrary order, be more obsessively, people with id x wants to stand at yth position which satisfy</p>
<p><code>x mod y=0</code></p>
<p>Is there any way to satisfy everyone’s requirement</p>
<p>{% raw %}<br>
</div><br>
<div class="part" title="Input"><br>
{% endraw %}<br>
First line contains an integer T, which indicates the number of test cases.</p>
<p>Every test case contains one line with two integers n, s.</p>
<p>Limits<br>
1≤T≤100.<br>
1≤n≤109.<br>
0≤s≤109.<br>
{% raw %}<br>
</div><br>
<div class="part" title="Output"><br>
{% endraw %}<br>
For every test case, you should output ‘Case #x: y’, where x indicates the case number and counts from 1 and y is the result string.</p>
<p>If there is any way to satisfy everyone’s requirement, y equals ‘Yes’, otherwise y equals ‘No’.<br>
{% raw %}<br>
</div><br>
<div class="samp"><br>
<div class="clear"></div><br>
<div class="input part" title="Sample Input"><br>
{% endraw %}<br>
2<br>
5 14<br>
4 11<br>
{% raw %}<br>
</div><br>
<div class="output part" title="Sample Output"><br>
{% endraw %}<br>
Case #1: No<br>
Case #2: Yes<br>
{% raw %}<br>
</div><br>
<div class="clear"></div><br>
</div></p>
</div>
</div></div>
{% endraw %}

<p>{% raw %}</p>
<div><div class="fold_hider"><div class="close hider_title">点击显/隐</div></div><div class="fold">
<div class="oj">   
    <div class="part" title="Description">
{% endraw %}
<p>There is a kindom of obsession, so people in this kingdom do things very strictly.</p>
<p>They name themselves in integer, and there are n people with their id continuous (s+1,s+2, ,s+n) standing in a line in arbitrary order, be more obsessively, people with id x wants to stand at yth position which satisfy</p>
<p><code>x mod y=0</code></p>
<p>Is there any way to satisfy everyone’s requirement</p>
<p>{% raw %}<br>
</div><br>
<div class="part" title="Input"><br>
{% endraw %}<br>
First line contains an integer T, which indicates the number of test cases.</p>
<p>Every test case contains one line with two integers n, s.</p>
<p>Limits<br>
1≤T≤100.<br>
1≤n≤109.<br>
0≤s≤109.<br>
{% raw %}<br>
</div><br>
<div class="part" title="Output"><br>
{% endraw %}<br>
For every test case, you should output ‘Case #x: y’, where x indicates the case number and counts from 1 and y is the result string.</p>
<p>If there is any way to satisfy everyone’s requirement, y equals ‘Yes’, otherwise y equals ‘No’.<br>
{% raw %}<br>
</div><br>
<div class="samp"><br>
<div class="clear"></div><br>
<div class="input part" title="Sample Input"><br>
{% endraw %}<br>
2<br>
5 14<br>
4 11<br>
{% raw %}<br>
</div><br>
<div class="output part" title="Sample Output"><br>
{% endraw %}<br>
Case #1: No<br>
Case #2: Yes<br>
{% raw %}<br>
</div><br>
<div class="clear"></div><br>
</div></p>
</div>
</div></div>
{% endraw %}
<div><div class="fold_hider"><div class="close hider_title">点击显/隐</div></div><div class="fold">```cpp 123 http://www.baidu.com 123
#include <cstdio>
#include <cstdio>
#include <cstdio>
#include <cstdio>
#include <cstdio>
```
</div></div>
<div><div class="fold_hider"><div class="close hider_title">点击显/隐</div></div><div class="fold">```cpp 123 http://www.baidu.com 123
#include <cstdio>
#include <cstdio>
#include <cstdio>
#include <cstdio>
#include <cstdio>
```
</div></div>
<h1 id="heading-1">思路</h1>
<p>CSS 部分就是简单的 CSS 代码<br>
只不过是想练下 <code>:after</code> 和 <code>:before</code><br>
(觉得每次写浮动,都要蛋疼好久)<br>
隐藏和显示则是使用了<span class="label label-green">jquery</span>的一些功能<br>
仔细想一下,其实好久之前就写过这些功能,只不过好久没有碰过,忘完了……</p>
<p>其实就是一个非常简单的选择器的一些操作而已<br>
不过又踩了关于 <code>js</code> 文件加载顺序的坑<br>
如果写<code>jquery</code>函数的话,一定要确保加载完毕(可以在新的文件里写<code>jquery</code>部分)</p>
<h1 id="heading-2">具体代码</h1>
<p>具体代码见文件<br>
<a href="/js/My.js"><code>/js/My.js</code></a><br>
<a href="/js/after_jquery.js"><code>/js/after_jquery.js</code></a><br>
<a href="/css/My.css"><code>/css/My.css</code></a></p>
<p>OJ 题目格式使用如下:</p>
<pre style="background-color:#fff">&lt;<span style="color:#000080">div</span>&gt;
    &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;oj&#34;</span>&gt;   
        &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;part&#34;</span> <span style="color:#008080">title</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;Description&#34;</span>&gt;
            <span style="color:#998;font-style:italic">&lt;!--题面--&gt;</span>
        &lt;/<span style="color:#000080">div</span>&gt;
        &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;part&#34;</span> <span style="color:#008080">title</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;Input&#34;</span>&gt;
            <span style="color:#998;font-style:italic">&lt;!--输入解释--&gt;</span>
        &lt;/<span style="color:#000080">div</span>&gt;
        &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;part&#34;</span> <span style="color:#008080">title</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;Output&#34;</span>&gt;
            <span style="color:#998;font-style:italic">&lt;!--输出解释--&gt;</span>
        &lt;/<span style="color:#000080">div</span>&gt;
        &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;samp&#34;</span>&gt;
            &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;clear&#34;</span>&gt;&lt;/<span style="color:#000080">div</span>&gt;
            &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;input part&#34;</span> <span style="color:#008080">title</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;Sample Input&#34;</span>&gt;
                <span style="color:#998;font-style:italic">&lt;!--样例输入部分--&gt;</span>
            &lt;/<span style="color:#000080">div</span>&gt;
            &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;output part&#34;</span> <span style="color:#008080">title</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;Sample Output&#34;</span>&gt;
                <span style="color:#998;font-style:italic">&lt;!--样例输出--&gt;</span>
            &lt;/<span style="color:#000080">div</span>&gt;
            &lt;<span style="color:#000080">div</span> <span style="color:#008080">class</span><span style="font-weight:bold">=</span><span style="color:#b84">&#34;clear&#34;</span>&gt;&lt;/<span style="color:#000080">div</span>&gt;
        &lt;/<span style="color:#000080">div</span>&gt;
    &lt;/<span style="color:#000080">div</span>&gt;
&lt;/<span style="color:#000080">div</span>&gt;
</pre>

给 Hexo 加上 bootstrap 的一些特效 and jquery 实现隐藏功能