Bootstrap入门3——表单

本文详细介绍了HTML表单的设计,包括基础表单、水平表单和内联表单的构建方式,以及如何使用下拉选择框、文本域、复选框和单选按钮等控件。同时,文章还讲解了按钮的不同样式、大小、禁用状态和验证状态的实现方法,为网页设计者提供了全面的表单与按钮设计指南。

基础表单

<form role="form">
	<div class="form-group">
		<label for="myEmail">邮箱
		</label>
		<input type="email" class="form-control" id="myEail" placeholder="请输入您的邮箱">
	</div>

	<div class="form-group">
		<label for="myPassword">密码
		</label>
		<input type="password" class="form-control" id="myPassword" placeholder="请输入您的密码">
	</div>

	<div class="checkbox">
		<label>
			<input type="checkbox">记住密码
		</label>
	</div>

	<button type="submit" class="btn btn-default">
	进入邮箱
	</button>
</form>

水平表单

<form role="form" class="form-horizontal">
	<div class="form-group">
		<label for="myEmail" class="col-md-2 control-label">邮箱
		</label>
		<div class="col-md-10">
			<input type="email" id="myEmail" class="form-control" placeholder="请输入您的邮箱" >
		</div>
	</div>

	<div class="form-group">
		<label for="myPassword" class="col-md-2 control-label">密码
		</label>
		<div class="col-md-10">
			<input type="password" class="form-control" placeholder="请输入您的密码" id="myPassword" >
		</div>
	</div>
	
	<div class="form-group">
		<div class="col-md-8 col-md-offset-2">
			<div class="checkbox">
				<label>
					<input type="checkbox">记住密码
				</label>
			</div>
		</div>
	</div>

	<div class="form-group">
		<div class="col-md-8 col-md-offset-2">
			<button type="submit" class="btn btn-default">
				进入邮箱
			</button>
		</div>
	</div>
</form>

内联表单

只需添加一个class="form-inline"到form标签即可。
若将class="sr-only"添加到label标签,则label不再显示,而且不会占据空的一行

下拉选择框

<form role="form">
 <div class="form-group">
  <select name="" id="" class="form-control">
   <option value="">1</option>
   <option value="">2</option>
   <option value="">3</option>
   <option value="">4</option>
   <option value="">5</option>
  </select>
 </div>
 <div class="form-group">
  <select name="" id="" class="form-control" multiple="">
   <option value="">1</option>
   <option value="">2</option>
   <option value="">3</option>
   <option value="">4</option>
   <option value="">5</option>
  </select>
 </div>
</form>

文本域

<form role="form">
	<div class="form-group">
		<textarea class="form-control" rows="3"> 
		</textarea>
	</div>
</form>

复选框和单选按钮

<form roel="form">
	<div class="checkbox">
		<label>
			<input type="checkbox" value="">记住密码
		</label>
	</div>

	<div class="radio">
		<label>
			<input type="radio" name="sex" value="boy" checked></label>
	</div>

	<div class="radio">
		<label>
			<input type="radio" name="sex" value="girl"></label>
	</div>
</form>

复选和单选框水平排列

在label标签上添加类名"checkbox-inline",“radio-inline”。

按钮

  • 样式
class="btn"
class="btn btn-primary"//主要按钮,蓝色
class="btn btn-success"//成功按钮,绿色
class="btn btn-info"//信息按钮,浅蓝色
class="btn btn-warning"//警告按钮,橙色
class="btn btn-danger"//危险按钮,红色
  • 大小
    在button标签中添加一个类:btn-lgbtn-sm即可。
  • 块状按钮
    在button标签中添加一个类:btn-block即可。此时按钮宽度为100%.
  • 禁用状态
    方法1:在标签中添加disabled属性(可以禁止元素默认行为)
    方法2:在标签中添加disable类

表单控件的大小

input标签中添加类名:input-lg,input-sm

表单控件禁用状态

  1. 在要禁用的表单控件上加上"disabled"
  2. 如果在fieldset设置了disabled属性,整个域都处于被禁用的状态

表单控件验证状态

  1. has-warning 警告状态(黄色)
  2. has-error错误状态(红色)
  3. has-success成功状态(绿色)
<form role="form">
	<div class="form-group has-success">
		<label class="control-label" for="inputSuccess1">成功状态
			<input class="form-control" id="inputSuccess1" type="text" placeholder="成功状态">
		</label>
	</div>
	......
</form>

表单提醒信息

<div class="form-group has-success has-feedback">
	<label class="control-label" for="inputSuccess1">
		成功状态
	</label>
	<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
	<span class="help-block">你输入的信息是对的</span>
	<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

多标签支持

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span按钮标签</span>
<div class="btn btn-default">div按钮标签</div>

图像

给img添加类:

  1. img-responsive:响应式图片
  2. img-rounded:圆角图片
  3. img-circle:圆形图片
  4. img-thumbnail:缩略图片

图标

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-plus"></span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值