Bootstarp学习教程(7) 表单分析

符号 阅读:216 2021-04-01 00:26:18 评论:0

基本案例:“form-control”修饰<input><textarea><select>元素都将被默认设置为width: 100%;表单控件包裹在".form-group"中可以获得最好的排列

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row"> 
		   <div class="col-md-4"> 
			<form class="form"> 
				<div class="form-group"> 
					<label for="exampleInputEmail1">用户名</label> <input 
						type="text" class="form-control" id="exampleInputEmail1" 
						placeholder="请在此输入用户名"> 
				</div> 
				<div class="form-group"> 
					<label for="exampleInputPassword1">密码</label> <input 
						type="password" class="form-control" id="exampleInputPassword1" 
						placeholder="请在此输入密码"> 
				</div> 
			 
				<div class="checkbox"> 
					<label> <input type="checkbox"> 是否记住用户名和密码 </label> 
				</div> 
				<button type="submit" class="btn btn-default">登入</button> 
			</form> 
			</div> 
		</div> 
	</div> 
</body> 
</html>



内联表单:"form-inline"可使其内容左对齐并且表现为inline-block级别的控件。只适用于浏览器窗口至少在 768px 宽度时

        注意:需要设置宽度

        在Bootstrap中,input、select和textarea默认被设置为100%宽度。为了使用内联表单,你需要专门为使用到的表单控件设置宽度。

        一定要设置label

        如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏。

<div class="row"> 
			<div class="col-md-6"> 
				<form class="form-inline" role="form"> 
					<div class="form-group"> 
						<label class="sr-only" for="exampleInputEmail2">邮箱 
							</label> <input type="email" class="form-control" 
							id="exampleInputEmail2" placeholder="在此输入邮箱地址"> 
					</div> 
					<div class="form-group"> 
						<label class="sr-only" for="exampleInputPassword2">密码</label> 
						<input type="password" class="form-control" 
							id="exampleInputPassword2" placeholder="在此输入密码"> 
					</div> 
					<div class="checkbox"> 
						<label> <input type="checkbox"> 是否记住 </label> 
					</div> 
					<button type="submit" class="btn btn-default">登入</button> 
				</form> 
			</div> 
		</div>

水平排列的表单:表单添加"form-horizontal",并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变"form-group"的行为,使其表现为栅格系统中的行(row),因此就无需再使用"row"了。

<form class="form-horizontal" role="form"> 
			<div class="form-group"> 
				<label for="inputEmail3" class="col-sm-2 control-label">用户名</label> 
				<div class="col-sm-4"> 
					<input type="text" class="form-control" id="inputEmail3" 
						placeholder="在此输入用户名"> 
				</div> 
			</div> 
			 
			<div class="form-group"> 
				<label for="inputPassword3" class="col-sm-2 control-label">密码</label> 
				<div class="col-sm-4"> 
					<input type="password" class="form-control" id="inputPassword3" 
						placeholder="在此输入密码"> 
				</div> 
			</div> 
			<div class="form-group"> 
				<div class="col-sm-offset-2 col-sm-10"> 
					<div class="checkbox"> 
						<label> <input type="checkbox"> 是否保留 </label> 
					</div> 
				</div> 
			</div> 
			<div class="form-group"> 
				<div class="col-sm-offset-2 col-sm-10"> 
					<button type="submit" class="btn btn-default">登入</button> 
				</div> 
			</div> 
		</form> 

被支持的控件:在表单布局案例中展示了其所支持的标准表单控件

        Input:大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor。(只有正确设置了type的input控件才能被赋予正确的样式。)

        Textarea:支持多行文本的表单控件。可根据需要改变rows属性。

        Checkbox 和 radio:Checkbox用于选择列表中的一个或多个选项,而radio用于从多个选项中只选择一个。

        内联checkboxes:通过将“checkbox-inline” 或 “radio-inline”应用到一系列的checkbox或radio控件上,可以使这些控件排列在一行

        Select:使用默认选项或添加multiple属性可以显示多个选项。

       

(4)静态控件:在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可。

 <form class="form-horizontal" role="form">
   <div class="form-group">
    <label class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
     <p class="form-control-static">[email protected]</p>
    </div>
   </div>
   <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
     <input type="password" class="form-control" id="inputPassword"
      placeholder="Password">
    </div>
   </div>
  </form>

(5)控件状态:通过为控件和label设置一些基本状态,可以为用户提供回馈。

          输入焦点:表单控件的默认outline样式,并对其:focus状态赋予了box-shadow样式.

          被禁用的输入框:为输入框设置disabled属性可以防止用户输入,并能改变一点外观,使其更直观.

          被禁用的fieldset:为<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。

<form role="form"> 
			<fieldset disabled> 
				<div class="form-group"> 
					<label for="disabledTextInput">Disabled input</label> <input 
						type="text" id="disabledTextInput" class="form-control" 
						placeholder="Disabled input"> 
				</div> 
				<div class="form-group"> 
					<label for="disabledSelect">Disabled select menu</label> <select 
						id="disabledSelect" class="form-control"> 
						<option>Disabled select</option> 
					</select> 
				</div> 
				<div class="checkbox"> 
					<label> <input type="checkbox"> Can't check this </label> 
				</div> 
				<button type="submit" class="btn btn-primary">Submit</button> 
			</fieldset> 
		</form>

            校验状态:Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning.has-error.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label.form-control.help-block都将接受这些校验状态的样式。

<div class="form-group has-success"> 
  <label class="control-label" for="inputSuccess">Input with success</label> 
  <input type="text" class="form-control" id="inputSuccess"> 
</div> 
<div class="form-group has-warning"> 
  <label class="control-label" for="inputWarning">Input with warning</label> 
  <input type="text" class="form-control" id="inputWarning"> 
</div> 
<div class="form-group has-error"> 
  <label class="control-label" for="inputError">Input with error</label> 
  <input type="text" class="form-control" id="inputError"> 
</div>


(6)控件尺寸:通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。


<input class="form-control input-lg" type="text" placeholder=".input-lg"> 
<input class="form-control" type="text" placeholder="Default input"> 
<input class="form-control input-sm" type="text" placeholder=".input-sm"> 
 
<select class="form-control input-lg">...</select> 
<select class="form-control">...</select> 
<select class="form-control input-sm">...</select>

调整列尺寸

用栅格系统中的列包裹input或其任何父元素,都可很容易的为其设置宽度。


<div class="row"> 
  <div class="col-xs-2"> 
    <input type="text" class="form-control" placeholder=".col-xs-2"> 
  </div> 
  <div class="col-xs-3"> 
    <input type="text" class="form-control" placeholder=".col-xs-3"> 
  </div> 
  <div class="col-xs-4"> 
    <input type="text" class="form-control" placeholder=".col-xs-4"> 
  </div> 
</div>


       

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号