bootstrap-表單

時間  2019-12-04
標籤 bootstrap 表單 欄目 Bootstarp 简体版
原文   原文鏈接

表單佈局

Bootstrap 提供了下列類型的表單佈局：css

  • 垂直表單（默認）html

  • 內聯表單html5

  • 水平表單jquery

 

垂直表單或者基本表單

  • 向父 <form> 元素添加 role="form"。ios

  • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。bootstrap

  • 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control，可將寬度拉伸到100%.瀏覽器

1.輸入文本框

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 基本表單</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="name">名稱</label>
				<input type="text" class="form-control" id="name" placeholder="請輸入名稱">
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</body>
</html>

 運行結果：app

 

2.文件瀏覽器選擇框

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 基本表單</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="inputfile">文件輸入</label>
				<input type="file" id="inputfile">
				<p class="help-block">這裏是塊級幫助文本的實例。</p>
   			</div>
		</form>
	</body>
</html>

 運行結果：dom

 

3.checkbox

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 基本表單</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 請打勾      
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</body>
</html>

 運行結果：佈局

 

內聯表單

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 內聯表單</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-inline" role="form">
			<div class="form-group">
				<label class="sr-only" for="name">名稱</label>
				<input type="text" class="form-control" id="name" 
					   placeholder="請輸入名稱">
			</div>
			<div class="form-group">
				<label class="sr-only" for="inputfile">文件輸入</label>
				<input type="file" id="inputfile">
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"> 請打勾      
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button></form>
	</body>
</html>

 運行結果：

 

水平表單

水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

  • 向父 <form> 元素添加 class .form-horizontal。

  • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。

  • 向標籤添加 class .control-label。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 水平表單</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">名字</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="firstname" 
						   placeholder="請輸入名字">
				</div>
			</div>
			<div class="form-group">
				<label for="lastname" class="col-sm-2 control-label">姓</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="lastname" 
						   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>
	</body>
</html>

 運行結果：

 

常見的表單控件

Bootstrap 支持最多見的表單控件，主要是 input、textarea、checkbox、radio 和 select。

1.最多見的表單文本字段是輸入框 input

用戶能夠在其中輸入大多數必要的表單數據。Bootstrap 提供了對全部原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的，這樣才能讓 input 得到完整的樣式。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 輸入框</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
		<div class="form-group">
			<label for="name">標籤</label>
			<input type="text" class="form-control" placeholder="文本輸入">
		</div>
		</form>
	</body>
</html>

 運行結果：

 

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 文本框</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="name">文本框</label>
				<textarea class="form-control" rows="3"></textarea>
			</div>
		</form>
	</body>
</html>

 

2.文本框（Textarea）

當您須要進行多行輸入的時，則能夠使用文本框 textarea。必要時能夠改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 文本框</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form role="form">
			<div class="form-group">
				<label for="name">文本框</label>
				<textarea class="form-control" rows="3"></textarea>
			</div>
		</form>
	</body>
</html>

 運行結果：

 

3.複選框（（Checkbox）和單選框（Radio）

複選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。

  • 當建立表單時，若是您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。若是您限制用戶只能選擇一個選項，請使用 radio。

  • 對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

下面的實例演示了這兩種類型（默認和內聯）：

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 複選框和單選按鈕</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<label for="name">默認的複選框和單選按鈕的實例</label>
		<div class="checkbox">
			<label><input type="checkbox" value="">選項 1</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" value="">選項 2</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="optionsRadios" id="optionsRadios1" 
					   value="option1" checked> 選項 1   
			</label>
		</div>
		<div class="radio">
			<label>
				<input type="radio" name="optionsRadios" id="optionsRadios2" 
					   value="option2">
				選項 2 - 選擇它將會取消選擇選項 1   
			</label>
		</div>
		<label for="name">內聯的複選框和單選按鈕的實例</label><div>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1   
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2   
		</label>
		<label class="checkbox-inline">
			<input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3   
		</label>
		<label class="checkbox-inline">
			<input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
				   value="option1" checked> 選項 1   
		</label>
		<label class="checkbox-inline">
			<input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
				   value="option2"> 選項 2   
		</label>
		</div>
	</body>
</html>

 

4.靜態控件

當您須要在一個水平表單內的表單標籤後放置純文本時，請在 <p> 上使用 class .form-control-static

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 實例 - 靜態控件</title>
		<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
		<script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-horizontal" role="form">
			<div class="form-group">
				<label class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<p class="form-control-static">email@example.com</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="請輸入密碼">
				</div>
			</div>
		</form>
	</body>
</html>

 運行結果：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程