bootstrap基础表单样式

  • 在项目开发中表单是最为重要的组件,所以在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>
						
						<div class="form-group">
							
							<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 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 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>

bootstrap基础表单样式_第1张图片

  • 在表单中每一个".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="重置"/>

bootstrap基础表单样式_第2张图片

  • 有些时候需要一些小型图标
  • 将fonts目录拷贝到项目之中
<legend><span class="glyphicon glyphicon-user">span>用户注册legend>

在这里插入图片描述

  • 这些标志可以有扩充,可以下载第三方的logo图片

你可能感兴趣的:(javaweb学习笔记)