simpleeui
/
css.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS组件 - SimpleeUI - 上海同道前端UI库</title>
	<script src="js/prettify.js"></script>
	<link rel="stylesheet" href="css/simplee-debug.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body onload='prettyPrint()'>
	<div class="header">
		<div class="container">
			<div class="grid grid-4 first logo"><a href="index.html">SimpleeUI</a></div>
			<div class="grid grid-11">
				<ul class="menu inline">
					<li><a href="index.html">首页</a></li>
					<li><a href="css.html">CSS组件</a></li>
					<li><a href="javascript.html">JS插件</a></li>
					<li><a href="standard.html">使用规范</a></li>
				</ul>
			</div>
			<div class="grid grid-5 last"><a href="mailto:gaom19900925@gmail.com">@_Simplee_</a></div>
		</div>
	</div>
	<div class="content clearfix">
		<div class="container">
			<div class="grid grid-20 base">
				<h3>CSS组件</h3>
				<table class="m-table demo">
					<tr>
						<td><a href="#button">Buttons(按钮)</a></td>
						<td><a href="#table">Tables(表格)</a></td>
						<td><a href="#search">Search(搜索)</a></td>
						<td><a href="#tab">Tabs(标签切换)</a></td>
					</tr>
					<tr>
						<td><a href="#breadcrumb">Breadcrumbs(面包屑)</a></td>
						<td><a href="#sidemenu">SideMenu(侧边菜单)</a></td>
						<td><a href="#pagination">Pagination(分页)</a></td>
						<td><a href="#lists">lists(列表)</a></td>
					</tr>
					<tr>
						<td><a href="#images">Images(图片)</a></td>
						<td><a href="#navigation">Navigation(导航)</a></td>
						<td><a href="#tag">Tag(标签)</a></td>
						<td><a href="#dropdown">Dropdown(下拉菜单)</a></td>
					</tr>
					<tr>
						<td><a href="#alert">Alert(警告框)</a></td>
						<td><a href="#images">Icon(图标)</a></td>
					</tr>
				</table>
			</div>
			<div class="workplace grid grid-20">
				<h4 id="button">Buttons(按钮)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#button-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#button-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="button-example">
								<h5>默认按钮</h5>
								<button class="u-btn">默认</button>
								<button class="u-btn u-btn-success">成功</button>
								<button class="u-btn u-btn-warning">警告</button>
								<button class="u-btn u-btn-error">错误</button>
								<button class="u-btn u-btn-info">重要</button>
								<h5>按钮大小</h5>
								<button class="u-btn u-btn-mini">微型</button>
								<button class="u-btn u-btn-small">小型</button>
								<button class="u-btn">默认</button>
								<button class="u-btn u-btn-large">大型</button>
								<h5>禁用状态</h5>
								<button class="u-btn disabled">禁止点击</button>
						</div>
						<div class="m-tab-content-pane" id="button-code">
							<pre class="prettyprint">&lt;!--默认按钮--&gt;<br>&lt;button class="u-btn"&gt;默认&lt;/button&gt;<br>&lt;button class="u-btn u-btn-success"&gt;成功&lt;/button&gt;<br>&lt;button class="u-btn u-btn-warning"&gt;警告&lt;/button&gt;<br>&lt;button class="u-btn u-btn-error"&gt;错误&lt;/button&gt;<br>&lt;button class="u-btn u-btn-info"&gt;重要&lt;/button&gt;<br>&lt;!--按钮大小--&gt;<br>&lt;button class="u-btn u-btn-mini"&gt;微型&lt;/button&gt;<br>&lt;button class="u-btn u-btn-small"&gt;小型&lt;/button&gt;<br>&lt;button class="u-btn"&gt;默认&lt;/button&gt;<br>&lt;button class="u-btn u-btn-large"&gt;大型&lt;/button&gt;<br>&lt;!--禁用状态--&gt;<br>&lt;button class="u-btn disabled"&gt;禁止点击&lt;/button&gt;<br></pre>
						</div>
					</div>
				</div>
				<h4 id="table">Tables(表格)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#table-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#table-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="table-example">
							<div class="grid grid-9 first">
								<h6>默认表格</h6>
								<table class="m-table">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="grid grid-10 last">
								<h6>带边框表格<code>.m-table-bordered</code></h6>
								<table class="m-table m-table-bordered">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="grid grid-9 first">
								<h6>紧凑型表格<code>.m-table-condensed</code></h6>
								<table class="m-table m-table-condensed">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="grid grid-10 last">
								<h6>组合表格<code>.m-table-condensed .m-table-bordered .m-table-striped</code></h6>
								<table class="m-table m-table-condensed m-table-bordered m-table-striped m-table-hover">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="m-tab-content-pane" id="table-code">
							<pre class="prettyprint">&lt;!-- 默认 --&gt;
&lt;table class=&quot;m-table&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 带圆角和边框 --&gt;
&lt;table class=&quot;m-table-bordered&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 紧凑表格 --&gt;
&lt;table class=&quot;m-table-condensed&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 隔行变色 --&gt;
&lt;table class=&quot;m-table-striped&quot;&gt;
...
&lt;/table&gt;

&lt;!-- 移入反馈 --&gt;
&lt;table class=&quot;m-table-hover&quot;&gt;
...
&lt;/table&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="search">Search(搜索)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#search-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#search-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="search-example">
							<div class="grid grid-9 first">
								<h5>默认搜索</h5>
								<form action="" class="m-search">
									<input type="text" placeholder="请输入关键词..." class="m-search-input">
									<button type="button" class="u-btn m-search-submit">搜索</button>
								</form>
							</div>
							<div class="grid grid-10 last">
								<h5>带分类搜索</h5>
								<form action="" class="m-search">
									<input type="text" placeholder="请输入关键词..." class="m-search-input"><div class="m-search-select">
										<span class="m-search-select-selected">全站搜索</span>
										<ul class="m-search-select-menu">
											<li data-action="#">全站搜索</li>
											<li data-action="#">文章</li>
											<li data-action="#">律师</li>
											<li data-action="#">律所</li>
										</ul>
									</div>
									<button type="button" class="u-btn m-search-submit">搜索</button>
								</form>
							</div>
						</div>
						<div class="m-tab-content-pane" id="search-code">
							<pre class="prettyprint">&lt;!-- 搜索框 --&gt;
&lt;form action=&quot;&quot; class=&quot;m-search&quot;&gt;
&lt;input type="text" placeholder="请输入关键词..." class="m-search-input"&gt;
&lt;button type="button" class="button m-search-submit"&gt;搜索&lt;/button&gt;
&lt;/form&gt;

&lt;!-- 带分类选择搜索框 --&gt;
&lt;form action=&quot;&quot; class=&quot;m-search&quot;&gt;
&lt;input type="text" placeholder="请输入关键词..." class="m-search-input"&gt;
&lt;div class="m-search-select"&gt;
	&lt;span class="m-search-select-selected"&gt;全站搜索&lt;/span&gt;
	&lt;ul class="m-search-select-menu"&gt;
		&lt;li data-action="#"&gt;全站搜索&lt;/li&gt;
		&lt;li data-action="#"&gt;文章&lt;/li&gt;
		&lt;li data-action="#"&gt;律师&lt;/li&gt;
		&lt;li data-action="#"&gt;律所&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
&lt;button type="button" class="button form-submit"&gt;搜索&lt;/button&gt;
&lt;/form&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="tab">Tab(标签切换)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#m-tab-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#m-tab-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="m-tab-example">
								<div class="m-tab">
									<ul class="m-tab-title clearfix">
										<li class="m-tab-title-item first active"><a href="#item1" data-toggle="tab">标签一</a></li>
										<li class="m-tab-title-item"><a href="#item2" data-toggle="tab">标签二</a></li>
										<li class="m-tab-title-item"><a href="#item3" data-toggle="tab">标签三</a></li>
										<li class="m-tab-title-item"><a href="#item3" data-toggle="tab">标签四</a></li>
									</ul>
									<div class="m-tab-content clearfix">
										<div class="m-tab-content-pane active" id="item1">
											标签一内容
										</div>
										<div class="m-tab-content-pane" id="item2">
											标签二内容
										</div>
										<div class="m-tab-content-pane" id="item3">
											标签三内容
										</div>
										<div class="m-tab-content-pane" id="item4">
											标标签四内容
										</div>
									</div>
								</div>
						</div>
						<div class="m-tab-content-pane" id="m-tab-code">
							<pre class="prettyprint">
&lt;div class="m-tab"&gt;
	&lt;ul class="m-tab-title clearfix"&gt;
		&lt;li class="m-tab-title-item first active"&gt;&lt;a href="#item1" data-toggle="tab"&gt;标签一&lt;/a&gt;&lt;/li&gt;
		&lt;li class="m-tab-title-item"&gt;&lt;a href="#item2" data-toggle="tab"&gt;标签二&lt;/a&gt;&lt;/li&gt;
		...
	&lt;/ul&gt;
	&lt;div class="m-tab-content clearfix"&gt;
		&lt;div class="m-tab-content-pane active" id="item1"&gt;
			标签一内容
		&lt;/div&gt;
		&lt;div class="m-tab-content-pane" id="item2"&gt;
			标签二内容
		&lt;/div&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="breadcrumb">Breadcrumbs(面包屑)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#breadcrumb-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#breadcrumb-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="breadcrumb-example">
							<ul class="m-breadcrumb">
								<li><a href="#">首页</a><i>></i></li><li><a href="#">新闻中心</a><i>></i></li><li><a href="#">律所动态</a><i>></i></li><li class="last">正文</li>
							</ul>
						</div>
						<div class="m-tab-content-pane" id="breadcrumb-code">
							<pre class="prettyprint">
&lt;ul class="m-breadcrumb clearfix"&gt;
  &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;i&gt;>&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;新闻中心&lt;/a&gt;&lt;i&gt;>&lt;/i&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;律所动态&lt;/a&gt;&lt;i&gt;>&lt;/i&gt;&lt;/li&gt;
  &lt;li class="last"&gt;正文&lt;/li&gt;
&lt;/ul&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="sidemenu">Sidemenu(侧边菜单)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#sidemenu-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#sidemenu-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="sidemenu-example">
							<ul class="m-sidemenu">
								<li class="m-sidemenu-header">新闻中心</li>
								<li class="active"><a href="#">行业动态</a></li>
								<li><a href="#">律所资讯</a></li>
								<li class="m-sidemenu-header">关于我们</li>
								<li><a href="#">律所简介</a></li>
								<li><a href="#">律所案例</a></li>
								<li><a href="#">联系我们</a></li>
							</ul>
						</div>
						<div class="m-tab-content-pane" id="sidemenu-code">
							<pre class="prettyprint">
&lt;ul class="m-sidemenu"&gt;
  &lt;li class="m-sidemenu-header"&gt;新闻中心&lt;/li&gt;
  &lt;li class="active"&gt;&lt;a href="#"&gt;行业动态&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;律所资讯&lt;/a&gt;&lt;/li&gt;
  &lt;li class="m-sidemenu-header"&gt;关于我们&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;律所简介&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;律所案例&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="pagination">Pagination(分页)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#pagination-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#pagination-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="pagination-example">
							<div class="m-pagination">
								<ul>
									<li class="disabled"><a href="javascript:;" class="prev"><</a></li>
									<li class="active"><span href="#">1</span></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="ellipsis"><span>...</span></li>
									<li><a href="#">12</a></li>
									<li><a href="#" class="next">></a></li>
								</ul>
							</div>
							<h6><code>.disabled</code> 禁用点击 <code>.active</code> 选中状态 <code>.ellipsis</code> 省略符</h6>
						</div>
						<div class="m-tab-content-pane" id="pagination-code">
							<pre class="prettyprint">
&lt;div class="m-pagination"&gt;
  &lt;ul&gt;
    &lt;li class="disabled"&gt;&lt;a href="javascript:;" class="prev"&gt;<&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;span href="#"&gt;1&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ellipsis"&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;12&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="next"&gt;>&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="lists">Lists(列表)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#list-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#list-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="list-example">
							<div class="grid grid-9 first">
								<h6>默认列表 <code>.m-list</code></h6>
								<ul class="m-list">
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
								</ul>
						</div>
						<div class="grid grid-9 last">
								<h6>隔行变色 <code>.m-list-striped</code></h6>
								<ul class="m-list m-list-striped">
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
									<li><div class="m-list-date">2013-07-01</div><div class="m-list-type">[案例精选]</div><a href="#">2013年度上海法院涉信用卡犯罪刑事审判情况通报</a></li>
								</ul>
						</div>
						</div>
						<div class="m-tab-content-pane" id="list-code">
							<pre class="prettyprint">
&lt;!-- 默认列表 --&gt;
&lt;ul class="m-list"&gt;
  &lt;li&gt;&lt;div class="m-list-date"&gt;2013-07-01&lt;/div&gt;&lt;div class="m-list-type"&gt;[案例精选]&lt;/div&gt;&lt;a href="#"&gt;2013年度上海法院涉信用卡犯罪刑事审判情况通报&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;

&lt;!-- 隔行变色 --&gt;
&lt;ul class="m-list m-list-striped"&gt;
  &lt;li&gt;&lt;div class="m-list-date"&gt;2013-07-01&lt;/div&gt;&lt;div class="m-list-type"&gt;[案例精选]&lt;/div&gt;&lt;a href="#"&gt;2013年度上海法院涉信用卡犯罪刑事审判情况通报&lt;/a&gt;&lt;/li&gt;
  &lt;li class="active"&gt;&lt;div class="m-list-date"&gt;2013-07-01&lt;/div&gt;&lt;div class="m-list-type"&gt;[案例精选]&lt;/div&gt;&lt;a href="#"&gt;2013年度上海法院涉信用卡犯罪刑事审判情况通报&lt;/a&gt;&lt;/li&gt;
...
&lt;/ul&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="images">Images(图片)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#images-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#images-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="images-example">
							<h6 class="text-error warning">注意：IE7-8不支持border-radius属性。所以<code>.u-image-rounded</code>、<code>.u-image-circle</code>是不能正常显示的！</h6>
								<div class="grid grid-6 first">
									<h6>圆角图片 <code>.u-image-rounded</code></h6>
									<img src="img/hachiko.jpg" class="u-image-rounded" height="140" width="140">
								</div>
								<div class="grid grid-6">
									<h6>圆形图片 <code>.u-image-circle</code></h6>
									<img src="img/hachiko.jpg" class="u-image-circle" height="140" width="140">
								</div>
								<div class="grid grid-6 last">
									<h6>相框 <code>.u-image-polaroid</code></h6>
									<img src="img/hachiko.jpg" class="u-image-polaroid" height="140" width="140">
								</div>
						</div>
						<div class="m-tab-content-pane" id="images-code">
							<pre class="prettyprint">
&lt;img src="img/hachiko.jpg" class="u-image-rounded"&gt;
&lt;img src="img/hachiko.jpg" class="u-image-circle"&gt;
&lt;img src="img/hachiko.jpg" class="u-image-polaroid"&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="navigation">Navigation(导航)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#nav-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#nav-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="nav-example">
							<ul class="m-nav clearfix">
								<li class="m-nav-item"><a href="#">首页</a></li>
								<li class="current m-nav-item"><a href="#">团队介绍</a></li>
								<li class="m-nav-item">
									<a href="myDropdown" data-toggle="dropdown" class="dropdown">新闻资讯</a>
									<ul class="dropdown-menu" id="myDropdown">
										<li><a href="#">行业资讯</a></li>
										<li><a href="#">律所动态</a></li>
										<li><a href="#">通知公告</a></li>
									</ul>
								</li>
								<li class="m-nav-item"><a href="#">行业专长</a></li>
								<li class="m-nav-item"><a href="#">特色服务</a></li>
								<li class="m-nav-item"><a href="#">专题研究</a></li>
								<li class="m-nav-item"><a href="#">人才招聘</a></li>
								<li class="m-nav-item"><a href="#">联系我们</a></li>

							</ul>
						</div>
						<div class="m-tab-content-pane" id="nav-code">
							<pre class="prettyprint">
&lt;ul class="nav clearfix"&gt;
  &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li class="nav-current"&gt;&lt;a href="#"&gt;团队介绍&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;a href="#"&gt;新闻资讯&lt;/a&gt;
    &lt;ul class="dropdown-menu" id="myDropdown"&gt;
      &lt;li&gt;&lt;a href="#"&gt;行业资讯&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;律所动态&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;通知公告&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;行业专长&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;特色服务&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;专题研究&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;人才招聘&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="tag">Tag(标签)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#tag-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#tag-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="tag-example">
							<a href="#" class="u-tag">默认标签</a><a href="#" class="u-tag-success">成功标签</a><a href="#" class="u-tag-warning">警告标签</a><a href="#" class="u-tag-error">错误标签</a><a href="#" class="u-tag-info">重要标签</a>
						</div>
						<div class="m-tab-content-pane" id="tag-code">
							<pre class="prettyprint">
&lt;a href="#" class="u-tag"&gt;默认标签&lt;/a&gt;
&lt;a href="#" class="u-tag-success"&gt;成功标签&lt;/a&gt;
&lt;a href="#" class="u-tag-warning"&gt;警告标签&lt;/a&gt;
&lt;a href="#" class="u-tag-error"&gt;错误标签&lt;/a&gt;
&lt;a href="#" class="u-tag-info"&gt;重要标签&lt;/a&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="dropdown">Dropdown(下拉菜单)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#dropdown-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#dropdown-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="dropdown-example">
							<div class="dropdown">
							  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
							    <li ><a href="#">Action</a></li>
							    <li><a href="#">Another action</a></li>
							    <li><a href="#">Something else here</a></li>
							    <li class="divider"></li>
							    <li><a href="#">Separated link</a></li>
							  </ul>
							</div>
						</div>
						<div class="m-tab-content-pane" id="dropdown-code">
							<pre class="prettyprint">
&lt;div class="dropdown"&gt;
  &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"&gt;
    &lt;li &gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
    &lt;li class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>
						</div>
					</div>
				</div>
				<h4 id="alert">Alert(警告框)</h4>
				<div class="m-tab">
					<ul class="m-tab-title clearfix">
						<li class="m-tab-title-item first active"><a href="#alert-example" data-toggle="tab">示例</a></li>
						<li class="m-tab-title-item"><a href="#alert-code" data-toggle="tab">代码</a></li>
					</ul>
					<div class="m-tab-content clearfix">
						<div class="m-tab-content-pane active" id="alert-example">
							<div class="m-alert">
								<h4>注意：</h4>请保护好您的帐号及密码！为了您的帐户安全，请定期修改密码！如果出现无法登陆或者其他异常情况，请第一时间联系我们！
								<a href="javascript:;" class="close">&times;</a>
							</div>
						</div>
						<div class="m-tab-content-pane" id="alert-code">
							<pre class="prettyprint">
&lt;div class="m-alert"&gt;
  &lt;div class="m-alert-content"&gt;
    &lt;h4&gt;注意：&lt;/h4&gt;请保护好您的帐号及密码！为了您的帐户安全，请定期修改密码！如果出现无法登陆或者其他异常情况，请第一时间联系我们！
  &lt;/div&gt;
  &lt;a href="javascript:;" class="close"&gt;&times;&lt;/a&gt;
&lt;/div&gt;</pre>
						</div>
					</div>
				</div>
				<!-- END -->
			</div>
		</div>
	</div>
	<div class="footer">
		HOMOLO.COM | &copy; 2013 Built By SimpleeUI. All Right Reserved
	</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/plugins.js"></script>
</body>
</html>