bootstrap-demo.md

Demo

表格 - Table

订单类型	订单号	收货人	订单金额	订单状态	下单时间	操作
xxxx	xxxx	xxxx	xxxx	xxxx	xxxx	xxxx
xxxx	xxxx	xxxx	xxxx	xxxx	xxxx	xxxx
暂时没有订单

table基础样式类.table，表格包含thead和tbody

<table class="table">
	<thead>
		<tr>
			<th>订单号</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>xxx</td>
			...
		</tr>
	</tbody>
</table>

表单 - Forms

基本结构

登录名：

youname

姓名：

<form action="/">
	<div class="group">
		<label class="label">
			<!-- 标签 -->
			...
		</label>
		<div class="controls">
			<!-- 右侧内容 -->
			...
		</div>
	</div>
</form>

文本框 - input[text]

<input class="input_mini" type="text" placeholder=".input_mini">
<input class="input_small" type="text" placeholder=".input_small">
<input class="input_medium" type="text" placeholder=".input_medium">
<input class="input_large" type="text" placeholder=".input_large">
<input class="input_xlarge" type="text" placeholder=".input_xlarge">
<input class="input_xxlarge" type="text" placeholder=".input_xxlarge">

单选框 - input[radio]

性别：

男 女

每组单选框放在一个.radio里面

<form action="/">
	<div class="group">
		<label class="label">性别：</label>
		<div class="controls">
			<label class="radio">
				<input name="gender" type="radio" checked/>
				男
			</label>
			<label class="radio">
				<input name="gender" type="radio" />
				女
			</label>
		</div>
	</div>
</form>

多选框 - input[checkbox]

6、您网上购买产品时的判断标准：

产品质量 产品品牌 其他

每组复选框放在一个.checkbox里面

<form action="/">
	<div class="group">
		<h3>6、您网上购买产品时的判断标准：</h3>
		<div>
			<label for="" class="checkbox">
				<input type="checkbox" />
				产品质量
			</label>
			<label for="" class="checkbox">
				<input type="checkbox" />
				产品品牌
			</label>
			<label for="" class="checkbox">
				<input type="checkbox" />
				其他
				<input type="text" class="input_mini" />
			</label>
		</div>
	</div>
</form>

下拉框 - select

生日：

广东省 湖南省 广州市 长沙市

<form action="">
	<div class="group">
		<label for="" class="label">生日：</label>
		<div class="controls">
			<select id="" name="province">
				<option value="GD" selected>广东省</option>
				<option value="HN">湖南省</option>
			</select>
			<select id="" name="state">
				<option value="GZ" selected>广州市</option>
				<option value="CS">长沙市</option>
			</select>
		</div>
	</div>
</form>

提示信息

行内提示

行内提示信息

<input type="text" /><span class="help_inline">行内提示信息</span>

块级提示

大块文本换行提示

<input type="text" /><span class="help_block">大块文本换行提示</span>

表单状态

错误：

错误提示信息

消息：

消息提示信息

给.group加上相应的限定类名：.error错误提示, .info消息提示

<form action="/">
	<div class="group error">
		<label for="" class="label">错误：</label>
		<div class="controls">
			<input type="text" />
			<span class="help_inline">错误提示信息</span>
		</div>
	</div>
	<div class="group info">
		<label for="" class="label">消息：</label>
		<div class="controls">
			<input type="text" />
			<span class="help_inline">消息提示信息</span>
		</div>
	</div>
</form>

按钮 - Buttons

基础样式类：默认按钮.btn，主按钮样式.btn-primary

可以用在<a>, <button>, <input type=submit|button|reset>上面

Default A Link Primary

<button class="btn">Default</button>
<a href="#" class="btn">A Link</a>
<input type="submit" class="btn" />
<button class="btn btn-primary">Primary</button>

尺寸：.btn-large, .btn-small, .btn-mini

Large Button Normal Button Small Button Mini Button

	<button class="btn btn-primary btn-large">Large Button</button>
	<button class="btn btn-primary">Normal Button</button>
	<button class="btn btn-primary btn-small">Small Button</button>
	<button class="btn btn-primary btn-mini">Mini Button</button>