免費AI編程助手
Bootstrap4 表單
2018-05-31 11:23 更新
在本章中，我們將學(xué)習(xí)在Bootstrap4 中如何創(chuàng)建表單。在Bootstrap4 中，我們可以通過一些簡單的 HTML 標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。
表單元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 類的情況下，寬度都是設(shè)置為 100%。
Bootstrap4 表單布局
- 堆疊表單 (全屏寬度)：垂直方向
- 內(nèi)聯(lián)表單：水平方向
Bootstrap4 提供了兩種類型的表單布局:
堆疊表單
以下實例使用兩個輸入框，一個復(fù)選框，一個提交按鈕來創(chuàng)建堆疊表單：
實例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>堆疊表單</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>內(nèi)聯(lián)表單
所有內(nèi)聯(lián)表單中的元素都是左對齊的。
注意：在屏幕寬度小于 576px 時為垂直堆疊，如果屏幕寬度大于等于576px時表單元素才會顯示在同一個水平線上。
內(nèi)聯(lián)表單需要在 <form> 元素上添加 .form-inline類。
以下實例使用兩個輸入框，一個復(fù)選框，一個提交按鈕來創(chuàng)建內(nèi)聯(lián)表單：
實例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap4 實例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<div class="container">
<h2>內(nèi)聯(lián)表單</h2>
<p>屏幕寬度在大于等于 576px 時才會水平顯示。如果小于 576px 則會生成堆疊表單。</p>
<form class="form-inline">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：