Skip to content

Z
zui

易企天创 / zui
大约 1 年 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 0a844eab 编写于 作者: C Catouse
浏览文件
操作

* update documents.

上级 e6bdd254
展开全部 隐藏空白更改
内联 并排
Showing with 671 addition and 567 deletion
docs/part/basic-edition.html
浏览文件 @ 0a844eab
......@@ -61,7 +61,7 @@
</code></pre>
<div class="alert alert-warning-inverse">
<h4>提示</h4>
<p>ZUI包含的很多独立组件都需要jQuery和ZUI的其他基础插件支持，所以需要配合jQuery和ZUI标准版或简洁版来使用。</p>
<p>ZUI包含的很多独立组件都需要jQuery和ZUI的其他基础插件支持，所以尽量配合jQuery和ZUI标准版或简洁版来使用。</p>
</div>
</article>
</section>
......
docs/part/component-buttongroup.html
浏览文件 @ 0a844eab
......@@ -12,35 +12,57 @@
<button type="button" class="btn">右</button>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x5de6;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x4e2d;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x53f3;&lt;/button&gt;
&lt;/div&gt;</code></pre>
<h4>多组按钮</h4>
<p>通过div.btn-toolbar包含.div.btn-group</p>
<div class="example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">复制</button>
<button class="btn">剪切</button>
<button class="btn">粘贴</button>
<button class="btn">删除</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn"><i class="icon icon-picture"></i></button>
<button class="btn"><i class="icon icon-file-movie"></i></button>
<button class="btn"><i class="icon icon-file-text-o"></i></button>
</div>
<div class="btn-group">
<button class="btn">8</button>
<button class="btn"><i class="icon icon-code"></i></button>
</div>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-toolbar&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button class=&quot;btn&quot;&gt;&lt;i class=&quot;icon icon-paste&quot;&gt;&lt;/i&gt;&lt;/button&gt;
...
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h4>垂直按钮组</h4>
<p>通过div.btn-group-vertical实现</p>
<div class="example">
<div class="btn-group btn-group-vertical">
<button type="button" class="btn">上</button>
<button type="button" class="btn">中</button>
<button type="button" class="btn">下</button>
<button type="button" class="btn">上面</button>
<button type="button" class="btn">中间</button>
<button type="button" class="btn">下面</button>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-group <em>btn-group-vertical</em>&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x4e0a;&#x9762;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x4e2d;&#x95f4;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x4e0b;&#x9762;&lt;/button&gt;
&lt;/div&gt;</code></pre>
</article>
</section>
......@@ -48,24 +70,31 @@
<header><h3>变化</h3></header>
<article>
<h4>基本下拉按钮组</h4>
<p>将<code>.input-group</code>放置于另一个<code>.input-group</code>中。</p>
<p>将<code>.btn-group</code>放置于另一个<code>.btn-group</code>中。</p>
<div class="example">
<div class="btn-group">
<button type="button" class="btn btn-default">吃</button>
<button type="button" class="btn btn-default">喝</button>
<button type="button" class="btn">春天</button>
<button type="button" class="btn">夏天</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
更多
<span class="caret"></span>
</button>
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown">未来 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">拉</a></li>
<li><a href="#">撒</a></li>
<li><a href="#">秋天</a></li>
<li><a href="#">冬天</a></li>
</ul>
</div>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x6625;&#x5929;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x590f;&#x5929;&lt;/button&gt;
<em>&lt;div class=&quot;btn-group&quot;&gt;</em>
&lt;button id=&quot;btnGroupDrop1&quot; type=&quot;button&quot; class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;&#x672a;&#x6765; &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/button&gt;
&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;btnGroupDrop1&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x79cb;&#x5929;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x51ac;&#x5929;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
<em>&lt;/div&gt;</em>
&lt;/div&gt;</code></pre>
<h4>分裂式下拉按钮组</h4>
<p>基本按钮组的变形，将第二个按钮改成图标即可。</p>
<div class="example">
......@@ -80,11 +109,26 @@
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li class="divider"></li>
<li><a href="#">增加</a></li>
<li><a href="#">撤销</a></li>
</ul>
</div>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;&#x64cd;&#x4f5c;&lt;/button&gt;
<em>&lt;div class=&quot;btn-group&quot;&gt;</em>
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;&#x64cd;&#x4f5c;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x7f16;&#x8f91;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x5220;&#x9664;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x64a4;&#x9500;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
<em>&lt;/div&gt;</em>
&lt;/div&gt;</code></pre>
<h4>上拉按钮组</h4>
<p>通过div.dropup实现</p>
<div class="example">
......@@ -99,11 +143,26 @@
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li class="divider"></li>
<li><a href="#">增加</a></li>
<li><a href="#">撤销</a></li>
</ul>
</div>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-group <em>dropup</em>&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;&#x64cd;&#x4f5c;&lt;/button&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;&#x64cd;&#x4f5c;&lt;/span&gt;
&lt;/button&gt;
&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x7f16;&#x8f91;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x5220;&#x9664;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&#x64a4;&#x9500;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h4>大小</h4>
<p>通过.btn-lg .btn-sm .btn-xs实现</p>
<div class="example">
......@@ -130,10 +189,34 @@
</div>
</div>
</div>
<pre><code>&lt;!-- &#x5927;&#x7684; --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-lg</em>&quot;&gt;&#x5de6;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-lg</em>&quot;&gt;&#x4e2d;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-lg</em>&quot;&gt;&#x53f3;&lt;/button&gt;
&lt;/div&gt;
&lt;!-- &#x9ed8;&#x8ba4;&#x5927;&#x5c0f; --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x5de6;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x4e2d;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;&#x53f3;&lt;/button&gt;
&lt;/div&gt;
&lt;!-- &#x5c0f;&#x7684; --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-sm</em>&quot;&gt;&#x5de6;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-sm</em>&quot;&gt;&#x4e2d;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-sm</em>&quot;&gt;&#x53f3;&lt;/button&gt;
&lt;/div&gt;
&lt;!-- &#x8d85;&#x5c0f;&#x7684; --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-xs</em>&quot;&gt;&#x5de6;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-xs</em>&quot;&gt;&#x4e2d;&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-xs</em>&quot;&gt;&#x53f3;&lt;/button&gt;
&lt;/div&gt;</code></pre>
<h4>颜色</h4>
<div class="example">
<div class="btn-group">
<button type="button" class="btn">默认</button>
<button type="button" class="btn">Normal</button>
<button type="button" class="btn btn-primary">.btn-primary</button>
<button type="button" class="btn btn-warning">.btn-warning</button>
<button type="button" class="btn btn-danger">.btn-danger</button>
......@@ -141,6 +224,14 @@
<button type="button" class="btn btn-info">.btn-info</button>
</div>
</div>
<pre><code>&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Normal&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-primary</em>&quot;&gt;.btn-primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-warning</em>&quot;&gt;.btn-warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-danger</em>&quot;&gt;.btn-danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-success</em>&quot;&gt;.btn-success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn <em>btn-info</em>&quot;&gt;.btn-info&lt;/button&gt;
&lt;/div&gt;</code></pre>
</article>
</section>
docs/part/component-inputgroup.html
浏览文件 @ 0a844eab
<section>
<header><h3>基本类型</h3></header>
<article>
<div class="alert alert-warning">
<h4>消除双边框</h4>
<p>当按钮处于两个文本框中间时，需要在<code>.input-group-addon</code>上添加样式修复工具类<code>.fix-border</code>。</p>
</div>
<div class="example">
<div class="row">
<div class="col-md-6">
......@@ -53,6 +49,10 @@
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;用户名&quot;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;icon icon-heart&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
<div class="alert alert-warning">
<h4>消除双边框</h4>
<p>当按钮处于两个文本框中间时，需要在<code>.input-group-addon</code>上添加样式修复工具类<code>.fix-border</code>。</p>
</div>
</article>
</section>
......
docs/part/component-navbar.html
浏览文件 @ 0a844eab
此差异已折叠。
docs/part/component-pager.html
浏览文件 @ 0a844eab
......@@ -3,107 +3,55 @@
<article>
<div class="example">
<ul class="pager">
<li class="previous">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next">
<a href="#">下一页 »</a>
</li>
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next"><a href="#">下一页 »</a></li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li class="active">
<a href="#">5</a>
</li>
<li>
<a href="###" data-toggle="pager" data-placement="bottom">更多</a>
</li>
<li>
<a href="#">12</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li><a href="###" data-toggle="pager" data-placement="bottom">更多</a></li>
<li><a href="#">12</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="###" data-toggle="pager" data-placement="top" data-url=
"?page=%">Pager</a>
</li>
<li>
<a href="#">6</a>
</li>
<li class="active">
<a href="#">7</a>
</li>
<li>
<a href="#">8</a>
</li>
<li>
<a href="#">9</a>
</li>
<li>
<a href="###" data-toggle="pager" data-placement="top">...</a>
</li>
<li>
<a href="#">12</a>
</li>
<li class="next">
<a href="#">下一页 »</a>
</li>
<li class="previous"><a href="#">« 上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="###" data-toggle="pager" data-placement="top" data-url="?page=%">Pager</a></li>
<li><a href="#">6</a></li>
<li class="active"><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
<li><a href="#">12</a></li>
<li class="next"><a href="#">下一页 »</a></li>
</ul>
</div>
<pre><code>&lt;ul class=&quot;pager&quot;&gt;
&lt;li class=&quot;previous&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;next&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</article>
</section>
......@@ -111,76 +59,44 @@
<header><h3>禁用的导航</h3></header>
<article>
<div class="example">
<ul class="pager">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next disabled">
<a href="#">下一页 »</a>
</li>
</ul>
<ul class="pager">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
</ul>
<ul class="pager">
<li class="previous">
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="###" data-toggle="pager">Pager</a>
</li>
<li>
<a href="#">118</a>
</li>
<li>
<a href="#">119</a>
</li>
<li>
<a href="#">1110</a>
</li>
<li>
<a href="#">1111</a>
</li>
<li class="active">
<a href="#">12</a>
</li>
<li class="next disabled">
<a href="#">»</a>
</li>
</ul>
<br>
<ul class="pager">
<li class="previous disabled"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager">
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next disabled"><a href="#">下一页 »</a></li>
</ul>
<ul class="pager">
<li class="previous disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager">
<li class="previous"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="###" data-toggle="pager">Pager</a></li>
<li><a href="#">118</a></li>
<li><a href="#">119</a></li>
<li><a href="#">1110</a></li>
<li><a href="#">1111</a></li>
<li class="active"><a href="#">12</a></li>
<li class="next disabled"><a href="#">»</a></li>
</ul>
<br>
</div>
<pre><code>&lt;ul class=&quot;pager&quot;&gt;
&lt;li class=&quot;previous <em>disabled</em>&quot;&gt;
&lt;a href=&quot;your/nice/url&quot;&gt;&laquo;&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;next&quot;&gt;
&lt;a href=&quot;your/nice/url&quot;&gt;&raquo;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</article>
</section>
......@@ -189,76 +105,39 @@
<article>
<p><code>.pager-pills</code></p>
<div class="example">
<ul class="pager pager-pills">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
</ul>
<ul class="pager pager-pills">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next disabled">
<a href="#">下一页 »</a>
</li>
</ul>
<ul class="pager pager-pills">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
</ul>
<ul class="pager pager-pills">
<li class="previous">
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="###" data-toggle="pager" data-placement="top">...</a>
</li>
<li>
<a href="#">8</a>
</li>
<li>
<a href="#">9</a>
</li>
<li>
<a href="#">10</a>
</li>
<li>
<a href="#">11</a>
</li>
<li class="active">
<a href="#">12</a>
</li>
<li class="next disabled">
<a href="#">»</a>
</li>
</ul>
<br>
<ul class="pager pager-pills">
<li class="previous disabled"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-pills">
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next disabled"><a href="#">下一页 »</a></li>
</ul>
<ul class="pager pager-pills">
<li class="previous disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-pills">
<li class="previous"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li class="next disabled"><a href="#">»</a></li>
</ul>
<br>
</div>
<pre><code>&lt;ul class=&quot;pager <em>pager-pills</em>&quot;&gt;
...
&lt;/ul&gt;</code></pre>
</article>
</section>
......@@ -268,142 +147,65 @@
<p><code>.pager-loose</code></p>
<div class="example">
<ul class="pager pager-loose">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous disabled"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-loose">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next disabled">
<a href="#">下一页 »</a>
</li>
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next disabled"><a href="#">下一页 »</a></li>
</ul>
<ul class="pager pager-loose">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-loose">
<li class="previous">
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="###" data-toggle="pager" data-placement="top">...</a>
</li>
<li>
<a href="#">8</a>
</li>
<li>
<a href="#">9</a>
</li>
<li>
<a href="#">10</a>
</li>
<li>
<a href="#">11</a>
</li>
<li class="active">
<a href="#">12</a>
</li>
<li class="next disabled">
<a href="#">»</a>
</li>
<li class="previous"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li class="next disabled"><a href="#">»</a></li>
</ul>
<ul class="pager pager-loose pager-pills">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous disabled"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-loose pager-pills">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next disabled">
<a href="#">下一页 »</a>
</li>
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next disabled"><a href="#">下一页 »</a></li>
</ul>
<ul class="pager pager-loose pager-pills">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-loose pager-pills">
<li class="previous">
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="###" data-toggle="pager" data-placement="top">...</a>
</li>
<li>
<a href="#">8</a>
</li>
<li>
<a href="#">9</a>
</li>
<li>
<a href="#">10</a>
</li>
<li>
<a href="#">11</a>
</li>
<li class="active">
<a href="#">12</a>
</li>
<li class="next disabled">
<a href="#">»</a>
</li>
<li class="previous"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li class="active"><a href="#">12</a></li>
<li class="next disabled"><a href="#">»</a></li>
</ul>
</div>
<pre><code>&lt;ul class=&quot;pager <em>pager-loose</em>&quot;&gt;
...
&lt;/ul&gt;</code></pre>
</article>
</section>
......@@ -413,37 +215,36 @@
<p><code>.pager-justify</code></p>
<div class="example">
<ul class="pager pager-justify">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous disabled"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-justify">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next disabled">
<a href="#">下一页 »</a>
</li>
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next disabled"><a href="#">下一页 »</a></li>
</ul>
<ul class="pager pager-justify pager-pills">
<li class="previous disabled">
<a href="#">«</a>
</li>
<li class="next">
<a href="#">»</a>
</li>
<li class="previous disabled"><a href="#">«</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
<ul class="pager pager-justify pager-pills">
<li class="previous">
<a href="#">« 上一页</a>
</li>
<li class="next disabled">
<a href="#">下一页 »</a>
</li>
<li class="previous"><a href="#">« 上一页</a></li>
<li class="next disabled"><a href="#">下一页 »</a></li>
</ul>
</div>
<pre><code>&lt;ul class=&quot;pager <em>pager-justify</em>&quot;&gt;
...
&lt;/ul&gt;</code></pre>
</article>
</section>
<script>
function afterPageLoad() {
$('#pageContent').on('click', '.pager > li > a', function() {
var $item = $(this).parent('li');
$item.parent().children('.active').removeClass('active');
if(!isNaN(parseInt($item.text()))) {
$item.addClass('active');
}
});
}
</script>
docs/part/component-panel.html
浏览文件 @ 0a844eab
<section>
<header><h3>基本类型</h3></header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel">
<div class="panel-body">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
<div class="panel-body" contenteditable>默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
</div>
</div>
<pre><code>&lt;div class=&quot;<em>panel</em>&quot;&gt;
&lt;div class=&quot;<em>panel-body</em>&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</article>
</section>
<section>
<header><h3>带标题的面板</h3></header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel">
<div class="panel-heading">面板标题</div>
<div class="panel-body">面板内容</div>
<div class="panel-heading" contenteditable>面板标题</div>
<div class="panel-body" contenteditable>面板内容</div>
</div>
</div>
<pre><code>&lt;div class=&quot;panel&quot;&gt;
&lt;div class=&quot;<em>panel-heading</em>&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;panel-body&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</article>
</section>
<section>
<header><h3>带脚注的面板</h3></header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel">
<div class="panel-body">面板内容</div>
<div class="panel-footer">面板脚注</div>
<div class="panel-body" contenteditable>面板内容</div>
<div class="panel-footer" contenteditable>面板脚注</div>
</div>
</div>
<pre><code>&lt;div class=&quot;panel&quot;&gt;
&lt;div class=&quot;panel-body&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;<em>panel-footer</em>&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</article>
</section>
<section>
<header><h3>使用不同色彩主题</h3></header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel panel-primary">
<div class="panel-heading">.panel-primary</div>
<div class="panel-body">面板内容</div>
<div class="panel-heading" contenteditable>.panel-primary</div>
<div class="panel-body" contenteditable>面板内容</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">.panel-success</div>
<div class="panel-body">面板内容</div>
<div class="panel-heading" contenteditable>.panel-success</div>
<div class="panel-body" contenteditable>面板内容</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">.panel-warning</div>
<div class="panel-body">面板内容</div>
<div class="panel-heading" contenteditable>.panel-warning</div>
<div class="panel-body" contenteditable>面板内容</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">.panel-danger</div>
<div class="panel-body">面板内容</div>
<div class="panel-heading" contenteditable>.panel-danger</div>
<div class="panel-body" contenteditable>面板内容</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">.panel-info</div>
<div class="panel-body">面板内容</div>
<div class="panel-heading" contenteditable>.panel-info</div>
<div class="panel-body" contenteditable>面板内容</div>
</div>
</div>
<pre><code>&lt;div class=&quot;panel <em>panel-primary</em>&quot;&gt;
...
&lt;/div&gt;</code></pre>
<pre><code>&lt;div class=&quot;panel <em>panel-success</em>&quot;&gt;
...
&lt;/div&gt;</code></pre>
<pre><code>&lt;div class=&quot;panel <em>panel-warning</em>&quot;&gt;
...
&lt;/div&gt;</code></pre>
<pre><code>&lt;div class=&quot;panel <em>panel-danger</em>&quot;&gt;
...
&lt;/div&gt;</code></pre>
<pre><code>&lt;div class=&quot;panel <em>panel-info</em>&quot;&gt;
...
&lt;/div&gt;</code></pre>
</article>
</section>
......@@ -66,11 +102,9 @@
<h3>包含表格</h3>
</header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<div class="panel-heading" contenteditable>Panel heading</div>
<table class="table">
<thead>
<tr>
......@@ -103,6 +137,14 @@
</table>
</div>
</div>
<pre><code>&lt;div class=&quot;panel&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
...
&lt;/div&gt;
<em>&lt;table class=&quot;table&quot;&gt;</em>
...
<em>&lt;/table&gt;</em>
&lt;/div&gt;</code></pre>
</article>
</section>
......@@ -111,25 +153,33 @@
<h3>包含列表</h3>
</header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
<div class="panel-heading">项目</div>
<ul class="list-group">
<li class="list-group-item">todo</li>
<li class="list-group-item">story</li>
<li class="list-group-item">task</li>
<li class="list-group-item">bug</li>
<li class="list-group-item">case</li>
<li class="list-group-item">待办</li>
<li class="list-group-item">需求</li>
<li class="list-group-item">任务</li>
<li class="list-group-item">Bug</li>
<li class="list-group-item">用例</li>
</ul>
</div>
</div>
<pre><code>&lt;div class=&quot;panel&quot;&gt;
&lt;div class=&quot;panel-heading&quot;&gt;
...
&lt;/div&gt;
<em>&lt;ul class=&quot;list-group&quot;&gt;</em>
...
<em>&lt;/ul&gt;</em>
&lt;/div&gt;</code></pre>
</article>
</section>
<section>
<header><h3>面板组</h3></header>
<article>
<div class="example" contenteditable="true">
<div class="example">
<div class="panel-group">
<div class="panel">
<div class="panel-heading">面板标题</div>
......@@ -148,5 +198,17 @@
</div>
</div>
</div>
<pre><code><em>&lt;div class=&quot;panel-group&quot;&gt;</em>
&lt;div class=&quot;panel&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;panel&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;panel&quot;&gt;
...
&lt;/div&gt;
...
<em>&lt;/div&gt;</em></code></pre>
</article>
</section>
docs/part/component-table.html
浏览文件 @ 0a844eab
......@@ -3,28 +3,60 @@
<article>
<div class="example">
<table class="table">
<tbody>
<thead>
<tr>
<th class="col-md-2">名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>表头</td>
<td>表头 <code>&lt;thead&gt;</code></td>
<td>
一般表格的第一行作为表头，用于描述表中每一列数据名称。为区别于表格其他行，表头具备不同的样式，例如字体加粗等。在垂直显示一组数据的表格中，表头也可能是垂直的第一列，而不是行。</td>
</tr>
<tr>
<td>内容</td>
<td>内容 <code>&lt;tbody&gt;</code></td>
<td>
一般内容会在单元格内靠左对齐，对于数字可能靠右对齐比较好。在一些表格中，内容可以按单元格选择或者按行选择，选中的部分会以不同的样式区分。为了使得行与行便于区分，通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。</td>
</tr>
<tr>
<td>表尾</td>
<td>表尾 <code>&lt;tfoot&gt;</code></td>
<td>表位放置与表末尾提供与表相关补充数据或操作，不过并不常见。</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>提示</th>
<td>表头、内容、和表尾都是可选的。</td>
</tr>
</tfoot>
</table>
</div>
<pre><code>&lt;table class=&quot;table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;...&lt;/th&gt;
&lt;th&gt;...&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;...&lt;/td&gt;
&lt;td&gt;...&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;...&lt;/td&gt;
&lt;td&gt;...&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td&gt;...&lt;/td&gt;
&lt;td&gt;...&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
</article>
</section>
......@@ -63,13 +95,16 @@
</tr>
<tr>
<td>3</td>
<td> </td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
</div>
<pre><code>&lt;table class=&quot;table <em>table-striped</em>&quot;&gt;
...
&lt;/table&gt;</code></pre>
</article>
</section>
......@@ -108,13 +143,16 @@
</tr>
<tr>
<td>3</td>
<td> </td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
</div>
<pre><code>&lt;table class=&quot;table <em>table-hover</em>&quot;&gt;
...
&lt;/table&gt;</code></pre>
</article>
</section>
......@@ -153,12 +191,15 @@
</tr>
<tr>
<td>3</td>
<td> </td>
<td>God</td>
<td>Lady Gaga</td>
<td>catouse</td>
</tr>
</tbody>
</table>
<pre><code>&lt;table class=&quot;table <em>table-bordered</em>&quot;&gt;
...
&lt;/table&gt;</code></pre>
</div>
</article>
</section>
......@@ -199,6 +240,9 @@
</tbody>
</table>
</div>
<pre><code>&lt;table class=&quot;table <em>table-condensed</em>&quot;&gt;
...
&lt;/table&gt;</code></pre>
</article>
</section>
......@@ -244,5 +288,21 @@
</tbody>
</table>
</div>
<pre><code>&lt;table class=&quot;table&quot;&gt;
&lt;tbody&gt;
&lt;tr class=&quot;<em>success</em>&quot;&gt;
...
&lt;/tr&gt;
&lt;tr class=&quot;<em>danger</em>&quot;&gt;
...
&lt;/tr&gt;
&lt;tr class=&quot;<em>warning</em>&quot;&gt;
...
&lt;/tr&gt;
&lt;tr class=&quot;<em>active</em>&quot;&gt;
...
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</article>
</section>
docs/part/control-label.html
浏览文件 @ 0a844eab
......@@ -3,7 +3,7 @@
<article>
<div class="example">
<span class="label">标签</span>
<span class="label">Tag</span>
<span class="label label-primary">Tag</span>
</div>
<pre><code></code>&lt;span class=&quot;label&quot;&gt;标签&lt;/span&gt;</pre>
</article>
......@@ -119,9 +119,8 @@
<a href="#" class="list-group-item">case <span class="label label-badge label-danger pull-right">100+</span></a>
</div>
</div>
<pre><code>&lt;div class=&quot;example&quot; contenteditable=&quot;true&quot;&gt;
&lt;div class=&quot;list-group&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item&quot;&gt;Project &lt;span class=&quot;label label-success&quot;&gt;New&lt;/span&gt;&lt;/a&gt;
...</code></pre>
<pre><code>&lt;div class=&quot;list-group&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;list-group-item&quot;&gt;Project &lt;span class=&quot;label label-success&quot;&gt;New&lt;/span&gt;&lt;/a&gt;
...</code></pre>
</article>
</section>
docs/part/control-progressbar.html
浏览文件 @ 0a844eab
......@@ -28,7 +28,7 @@
<td>
<pre><code>&lt;div class=&quot;progress&quot;&gt;
&lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;<span class="progressbar-value">40</span>&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: <span class="progressbar-value">40</span>%&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;40% Complete (success)&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;<span class="progressbar-value">40</span>% Complete (success)&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>默认的进度条。为<code>.progress-bar</code>应用CSS的width值（%）来更改进度值。</p>
......@@ -71,7 +71,7 @@
<p><strong class="text-info"><span class="progressbar-value">40</span>%</strong></p>
</td>
<td>
<p>信息：<code>.progress-bar-info</code></p>
<p><code>.progress-bar-info</code></p>
</td>
</tr>
<tr>
......@@ -84,7 +84,7 @@
<p><strong class="text-success"><span class="progressbar-value">40</span>%</strong></p>
</td>
<td>
<p>成功：<code>.progress-bar-success</code></p>
<p><code>.progress-bar-success</code></p>
</td>
</tr>
<tr>
......@@ -97,7 +97,7 @@
<p><strong class="text-warning"><span class="progressbar-value">40</span>%</strong></p>
</td>
<td>
<p>警告：<code>.progress-bar-warning</code></p>
<p><code>.progress-bar-warning</code></p>
</td>
</tr>
<tr>
......@@ -110,7 +110,7 @@
<p><strong class="text-danger"><span class="progressbar-value">40</span>%</strong></p>
</td>
<td>
<p>危险：<code>.progress-bar-danger</code></p>
<p><code>.progress-bar-danger</code></p>
</td>
</tr>
</tbody></table>
......
docs/part/javascript-popover.html
浏览文件 @ 0a844eab
......@@ -294,9 +294,6 @@
</tbody>
</table>
</div>
<div class="example">
<pre><code class="language-js"></code></pre>
</div>
</article>
</section>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或