bootstrap系列之五表单样式

最新推荐文章于 2022-12-19 12:15:00 发布

叶菩提

最新推荐文章于 2022-12-19 12:15:00 发布

阅读量495

点赞数

分类专栏： JAVAEE 文章标签： bootstrap

本文链接：https://blog.csdn.net/yeputi1015/article/details/76726542

版权

JAVAEE 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果一

<body>
		<div class="container">
			<form action="#" method="post">
				<fieldset>
					<legend>用户登陆</legend>
					
					<div class="form-group">
						<label>用户名:</label>
						<input type="text" class="form-control" name="name" placeholder="输入用户名" />
					</div>
					
					<div class=" form-group">
						<label>密码：</label>
						<input type="password" class="form-control" name="pwd" />
					</div>
					<div class="checkbox">
						<label><input type="checkbox" />记住密码</label>
					</div>
				<button type="submit" class="btn btn-default">登陆</button>				
					
				</fieldset>
				
			</form>
			
			
		</div>
	</body>

效果二

<body>
		<div class="container">
			<form action="#" method="post" class="form-inline">
				<fieldset>
					<legend>用户登陆</legend>
					
					<div class="form-group">
						<label class="sr-only">用户名:</label>
						<input type="text" class="form-control" name="name" placeholder="输入用户名" />
					</div>
					
					<div class=" form-group">
						<label class="sr-only">密码：</label>
						<input type="password" class="form-control" name="pwd" />
					</div>
					<div class="checkbox">
						<label><input type="checkbox" />记住密码</label>
					</div>
				<button type="submit" class="btn btn-default">登陆</button>				
					
				</fieldset>
				
			</form>
			
			
		</div>
	</body>

效果三

<body>
		<div class="container">
			
			<form class="form-horizontal" role="from">
				
				<div class="form-group">
					<label class=" col-sm-2 control-label">用户名:</label>
					<div class="col-sm-8">
					  <input type="text" class="form-control"/>
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label col-sm-2">密码:</label>
					<div class="col-sm-8">
					<input type="password"  class="form-control"/>	
					</div>
					
				</div>
				
			</form>
			
			
			
		</div>
	</body>

效果四

<body>
		<div class="container">
			
			<form>
				<fieldset>
			   <div class="radio">
			   	<label><input type="radio" name="sex" value="M" />男</label>
			   	
			   </div>
			   <div class="checkbox">
			   	 <label><input type="checkbox" />中国</label>
			   </div>
				 <div class="checkbox">
			   	 <label><input type="checkbox" checked/>中国</label>
			   	
			   </div>
				 <div class="checkbox">
			   	 <label><input type="checkbox" />中国</label>
			   	
			   </div>
				
			   <div class="checkbox">
<label class="checkbox-inline">  <input type="checkbox" > 1</label>
<label class="checkbox-inline">  <input type="checkbox"> 2</label>
<label class="checkbox-inline">  <input type="checkbox" > 3</label>
			   	
			   </div>
				<div class=" form-group has-success">
					<label class="control-label">用户名 ：</label>
					<input type="tel" placeholder="输入电话号" class="form-control" autofocus/>
				</div>
				
				<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
				</fieldset>
			</form>
			
			
			
		</div>
	</body>

效果五

	<body>
		<div class="container">
			<form action="#" method="post">

					<div class="form-group has-feedback">
						<label>用户名:</label>
						<input type="text" class="form-control" name="name" placeholder="输入用户名" />
						<span class="glyphicon glyphicon-eye-open form-control-feedback" aria-hidden="true"></span>
					</div>
					<div>
						
						<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>
					</div>
					<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
					<div class="form-group">
						 <div class="row">
						 	<div class="col-sm-3">
						 		
						 		<input type="tel" class="form-control" />
						 	</div>
						 		<div class="col-sm-6">
						 		
						 		<input type="tel" class="form-control" />
						 	</div>
						 </div>
						
					</div>
				
			</form>
			
			
		</div>
	</body>