x
1
•<section>2
<h2>Tap, top</h2>3
<p>4
The first style below is the most generally used tab style.5
It is necessary to specify the <strong>top</strong> class when using it.6
7
<ul class="tab top">8
<li class="active">9
<a href="#"><i class="icon-home"></i> Home</a>10
</li>11
<li><a href="#">CSS</a></li>12
<li><a href="#">Script</a></li>13
<li class="checked">14
<a href="#">Menu <i class="icon-arrow1"></i></a>15
</li>16
</ul>17
</p>18
</section>19
20
<section>21
<h2>Tab, bottom</h2>22
<p>23
A tab style that is used when the content area is located in the upper part.24
</p>25
<p class="br">26
<ul class="tab bottom">27
<li class="active">28
<a href="#">Home</a>29
</li>30
<li><a href="#">CSS</a></li>31
<li><a href="#">Script</a></li>32
<li class="checked">33
<a href="#">Menu <i class="icon-arrow1"></i></a>34
</li>35
</ul>36
</p>37
</section>38
39
<section>40
<h2>Pill</h2>41
<p>42
A UI component with use that is similar to a tab43
44
<ul class="pill">45
<li class="active">46
<a href="#"><i class="icon-home"></i> Home</a>47
</li>48
<li><a href="#">CSS</a></li>49
<li><a href="#">Script</a></li>50
<li>51
<a href="#">Menu <i class="icon-arrow1"></i></a>52
</li>53
</ul>54
</p>55
</section>56
57
<section>58
<h2>Pill, top</h2>59
<p>60
As in a tab, a line that distinguishes the current content area is displayed at the bottom.61
62
<ul class="pill top">63
<li class="active">64
<a href="#">Home</a>65
<div class="anchor"></div>66
</li>67
<li><a href="#">CSS</a></li>68
<li><a href="#">Script</a></li>69
<li class="checked">70
<a href="#">Menu <i class="icon-arrow1"></i></a>71
</li>72
</ul>73
</p>74
</section>75
76
<section>77
<h2>Pill, bottom</h2>78
<p>79
As in a tab, a line that distinguishes the current content area is displayed at the top.80
</p>81
<p class="br">82
<ul class="pill bottom">83
<li class="active">84
<a href="#">Home</a>85
<div class="anchor"></div>86
</li>87
<li><a href="#">CSS</a></li>88
<li><a href="#">Script</a></li>89
<li>90
<a href="#">Menu <i class="icon-arrow1"></i></a>91
</li>92
</ul>93
</p>94
</section>