Bootstrap學習筆記系列3-------Bootstrap簡單表單顯示 ...
表單佈局
垂直或基本表單
基本的表單結構時BootStrap自帶的，創建基本表單的步驟如下：
- 向父
<form>元素添加role = “form”； - 為了獲取最佳的間距，把標簽和控制項放在一個
div.form-group中,div放在父form下； - 向所有的文本元素
<input>、<textarea>和<select>添加.form-control
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name" name="name-text" placeholder="請輸入你的名稱">
</div>
</form>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>添加了form-controlClass的input會和label分為兩行，並且獲得焦點時會有藍色的邊框樣式。
內聯表單
內聯表單中所有的元素都是內聯的，標簽都是併排的
- 向
<form>標簽中添加classfrom-inline; - 每個表單需要被包含在
div.form-group，checkbox可以包含在div.checkbox,radio可以包含在div.radio; - 預設情況下，bootstrap中的
input、select和textarea有100%寬度，使用內聯表單時，可以設置表單控制項的寬度來設置; - 對標簽描述添加
sr-only可以隱藏標簽描述。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</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" name="name-text" placeholder="請輸入你的名稱" style="width: 170px">
</div>
<div class="form-group">
<input type="file" name="inputfile" style="width: 170px">
</div>
<label>
<input type="checkbox" class="checkbox">請打勾
</label>
</form>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
