文本

对文本的一些操作集合

对齐方式

轻松地重新设置文本对齐方式

左对齐

居中对齐

右对齐

<p class="txtleft">左对齐</p>
<p class="txtcenter">居中对齐</p>
<p class="txtright">右对齐</p>

重点强调文本

通过简单的颜色来强调文本的意义

禁用提示

警告提示

错误提示

提示信息

成功提示

红色的文字

灰色的文字

<p class="text-muted">禁用提示</p>
<p class="text-warning">警告提示</p>
<p class="text-error">错误提示</p>
<p class="text-info">提示信息</p>
<p class="text-success">成功提示</p>
<p class="text-colorred">红色的文字</p>
<p class="text-colorgray">灰色的文字</p>

文本换行

设置文本超过区域的宽度时,强制让文本处于一行

设置文本超过区域的宽度时,强制让连续的英文换行

设置文本超过区域的宽度时,强制让文本处于一行

设置文本超过区域的宽度时,强制让文本处于一行

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

设置文本超过区域的宽度时,强制让连续的英文换行 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb

<p style="width:100px; background:#8db3c6;">
	设置文本超过区域的宽度时,强制让文本处于一行
</p>
<p class="nowarp" style="width:100px; background:red;">
	设置文本超过区域的宽度时,强制让文本处于一行
</p>
<p style="width:100px; background:yellow;">
	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>
<p class="wordwarp" style="width:100px; background:orange;">
	设置文本超过区域的宽度时,强制让连续的英文换行
	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</p>

页面标题

标题

<div class="page_title">
<h2>标题</h2>
</div>

页面标题说明

标题

页面标题19说明
<div class="page_title">
	<h2>标题</h2>
	<span>页面标题<a href="#">19</a>说明</span>
</div>

分类

分类标题

任务分类

<div class="category_box">
	<h4>任务分类</h4>
</div>

分类导航

<div class="category_box">
	<h4>任务分类</h4>
	<div class="category_box_o">
		<a href="#">所有任务<span>(9)</span></a> 
		<a href="#">公文发文<em>(0)</em></a>
		<a href="#">公文收文<span>(3)</span></a>
	</div>
</div>

分类导航-当前位置

<a href="#" class="hover">公文发文<em>(0)</em></a>

分类导航-工具栏

<div class="category_box relative">
	....
	<div class="table_toolbar">
		<a href="#" class="icon_add" title="添加"> </a>
		<a href="#" class="icon_del" title="删除"> </a>
	</div>
</div>
<a href="#" class="btnskin_b">链接按钮</a>
<a href="#" class="btnskin_b" disabled="disabled">禁用链接按钮</a>
<input type="submit" class="btnskin_b" value="提交按钮" />
<input type="button" class="btnskin_b" value="普通按钮" />
<input type="reset" class="btnskin_b" value="重置按钮" />
<input type="button" class="btnskin_b" disabled="disabled" value="禁用按钮" />

表格

序号 标题 发布人
1 标题一 luolong
2 标题二 luolong
3 标题三 chujun
<div class="table_box">
	<div class="table_box_data">
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>标题</th>
					<th>发布人</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>标题一</td>
					<td>luolong</td>
				</tr>
				....
			</tbody>
		</table>
	</div>
 </div>

表格标题

任务列表

序号 标题 发布人
1 标题一 luolong
2 标题二 luolong
3 标题三 chujun
<div class="table_box">
    <h4>任务列表</h4>
	....
 </div>

表格页脚

任务列表

序号 标题 发布人
1 标题一 luolong
2 标题二 luolong
3 标题三 chujun
这是表格页脚
<div class="table_box">
	<h4>任务列表</h4>
	<div class="table_box_data">
		<table>
			.....
			<tfoot>
				<tr>
					<td colspan="3">
						这是表格页脚
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
 </div>

表格页脚二

任务列表

序号 标题 发布人
1 标题一 luolong
2 标题二 luolong
3 标题三 chujun
<div class="table_box">
	<h4>任务列表</h4>
	<div  class="table_box_data">
		<table>
			....
		</table>
	</div>
	<div class="table_box_footer">
		这是表格页脚二
	</div>
 </div>

表格工具栏

任务列表

   
序号 标题 发布人
1 标题一 luolong
2 标题二 luolong
3 标题三 chujun
<div class="table_box">
	<h4>任务列表</h4>
	<div class="table_toolbar">
		<a href="#" class="icon_add" title="add"> </a>
		<a href="#" class="icon_del" title="del"> </a>
	</div>
        ....
 </div>

表格操作按钮

任务列表

序号 标题 发布人 操作
1 标题一 luolong  
2 标题二 luolong  
3 标题三 chujun  
<td><a href="#" class="atoolbar icon_del" title="del"> </a></td>

文字过长省略号代替

任务列表

序号 标题 发布人
1 标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一 luolong
2 标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二 luolong
<td class="txtleft">标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</td>
<td class="txtleft nowarp">标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二标题二</td>
  • Tab 1
  • Tab 2
Tab 一内容
Tab 二内容