- 在项目开发中表单是最为重要的组件,所以在Bootstrap中对表单也是有支持的.
表单基本样式
-
表单的元素包括有:文本,单选扭,复选框,下拉列表,而在HTML5中也扩充了许多的组件,例如事件选择,日期选择,email输入,url输入等组建,但是不管如何操作,表单的定义之中表单也要使用一些样式进行修饰
-
示例:基础组件
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--设置页面的宽度随着使用者的设备变化二变化 -->
<meta name="viewport" content="width=device-width,initial-scal=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 ">
<form class="form-horizontal" method="post" action="#">
<!-- 表单区域-->
<fieldset>
<!--表单主题-->
<legend>用户注册</legend>
<!-- 每一个form-group都可以自定义布局-->
<div class="form-group">
<!-- label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="mid">用户名称</label>
<div class="col-md-4">
<input class="form-control" id="mid" type="text"/>
</div>
</div>
<div class="form-group">
<!-- label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="password">用户密码</label>
<div class="col-md-4">
<input class="form-control" id="password" type="password"/>
</div>
</div>
<div class="form-group">
<!-- label表示文字提示标签,可以通过表单的组建的id提示-->
<label class="col-md-2 control-label" for="con">确认密码</label>
<div class="col-md-4">
<input class="form-control" id="con" type="password"/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="sex">性别</label>
<div class="col-md-5">
<div class="radio-inline">
<input type="radio" name="sex" id="sex-man" value="man" checked/>男
</div>
<div class="radio-inline">
<input type="radio" name="sex" id="sex-woman" value="woman"/>女
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label" for="lock">锁定状态</label>
<div class="col-md-5">
<label class="checkbox-inline">
<input type="checkbox" value="lock" name="city" id="lock"/>锁定
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="city">所在城市</label>
<div class="col-md-4">
<select id="city" class="form-control">
<option value="中国">中国</option>
<option value="outher">其他</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="btn btn-primary" type="submit" value="提交"/>
<input class="btn btn-warning" type="reset" value="重置"/>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div>
</body>
</html>
- 在表单中每一个".form-group"都表示一组输入组件,所以在这个组建之中可以进行自己的布局控制
表单样式扩展
- 实际上表单本身是可以禁用的,那么如果要进行表单禁用,使用"disabled"样式
- 示例
<fieldset disabled>
- 如果要为摸一个组件进行禁用,则在具体某个组件中使用"disabled"
<input class="form-control" id="password" type="password" disabled/>
- 为此我们可以设置一个简单的控制表单组件是否可用的功能
- 当用户点击锁定的时候,用户密码框将无法使用,当用户没有选择锁定状态是,用户密码框可以使用
$(function(){
$("#lock").on("click",function(){
if(this.checked){
$("#password").attr("disabled",true);
$("#con").attr("disabled",true);
}else{
$("#password").attr("disabled",false);
$("#con").attr("disabled",false);
}
})
})
- 定义大组件
<input class="form-control input-lg" id="mid" type="text"/>
- 定义小组件
<input class="form-control input-sm" id="mid" type="text"/>
-
对于按钮也是有自己的样式,可以使用如下几种按钮
- 显示颜色:.btn-link,btn-default,btn-warning,btn-info,btn-primary,btn-success
- 大小样式:btn-lg,btn-sm,btn-xs
-
不同的大小按钮
<input class="btn btn-primary btn-lg" type="submit" value="提交"/>
<input class="btn btn-warning btn-sm" type="reset" value="重置"/>
- 有些时候需要一些小型图标
- 将fonts目录拷贝到项目之中
<legend><span class="glyphicon glyphicon-user"></span>用户注册</legend>
- 这些标志可以有扩充,可以下载第三方的logo图片