本篇文章就給大家介紹BootStrap中的列表群組元件，面板元件，響應式嵌入元件。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。如果大家想要學習和獲取更多的bootstrap相關影片教學也可以訪問：bootstrap教學！
.form-group ：表單群組（label 標籤和輸入框盡量使用這個類別包圍起來）
.form-control ：給input，textarea 和select 元素都會被預設設定寬度屬性為width:100% 圓角邊框
.form-inline ：內聯表單，是給form 這個標籤設定的，讓裡面的框變為值水平排列
.form-horizontal：水平排列的表單，透過為表單添加.form-horizontal 類，並聯合使用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中文網其他相關文章！
