Bootstrap學習之表單格式與字型圖標

本篇文章就給大家介紹BootStrap中的列表群組元件，面板元件，響應式嵌入元件。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。如果大家想要學習和獲取更多的bootstrap相關影片教學也可以訪問：bootstrap教學！

表單格式

.form-group ：表單群組（label 標籤和輸入框盡量使用這個類別包圍起來）

.form-control ：給input，textarea 和select 元素都會被預設設定寬度屬性為width:100% 圓角邊框

.form-inline ：內聯表單，是給form 這個標籤設定的，讓裡面的框變為值水平排列

.form-horizo​​ntal：水平排列的表單，透過為表單添加.form-horizo​​ntal 類，並聯合使用Bootstrap 預置的柵格類，可以將label 標籤和控件組水平並排佈局。這樣做將改變.form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加.row 了

.sr-only ：它是主要給label來設置，將label 隱藏起來

一個簡單的登陸框

		<p class="container">
			<form action="#" method="post" class="form-horizontal">
				<p class="form-group">
				<label for="user" class="col-lg-2 control-label">用户名</label>
				<p class="col-lg-10"><input type="text" name="user" id="user" value="" class="form-control" /></p>
				</p>
				<p class="form-group">
				<label for="pd" class="col-lg-2 control-label">密码</label> 
				<p class="col-lg-10"><input type="password" name="pd" id="pd" value="" class="form-control" /></p>
				</p>
				<p class="form-group col-lg-5 col-lg-offset-5">
				<p class="col-lg-5 col-lg-offset-5"">
				<input type="checkbox" name="" id="cx" value="" />
				<label for="cx">是否同意</label>
				</p>
				<p class="col-lg-2 col-lg-offset-5">
				<button type="submit" class="btn btn-success">提交</button>
				</p>
			</form>
		</p>

這裡的control-label 是給label 同步input  的樣式

字體圖示

出於效能的考慮，所有圖示都需要一個基底類別和對應每個圖示的類別。把下面的程式碼放在任何地方都可以正常使用。注意，為了設定正確的內補（padding），請務必在圖示和文字之間新增一個空格。具體字體圖標，請訪問Bootstrap中文網（https://v3.bootcss.com/components/）查詢。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

以上是Bootstrap學習之表單格式與字型圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！