做為碼農(nóng)的我們在實現(xiàn)一個頁面的效果的時候，我很會經(jīng)常遇到類似表格、表單的問題。那么我們該如何實現(xiàn)呢？今天匯仁智杰小編就和大家分享下Bootstrap關(guān)于表格/表單/圖片學習筆記。
　　Bootstrap表格
　　表格類：
　　.table只會在表行之間增加橫線;
　　.table-striped會在表格行之間增減斑馬線;
　　.table-hover會給表設置鼠標懸停狀態(tài);
　　.table-border會為所有的表格添加邊框;
　　.table-condensed讓表格更加緊湊;
　　tr,td,th類
　　.success表示成功的樣式;
　　.warning表示警告的樣式;
　　.danger表示危險的樣式;
　　.info表示信息的樣式;
　　表單類：
　　創(chuàng)建表單的基本步驟
　　(1)首先向form元素添加role="form";
　　(2)把標簽和控件放在一個帶有class .form-group的<div>中，這是獲取最佳間距鎖必須的;
　　(3)向所有的文本元素<intput><textarea>和<select>添加class .form-control;
　　幾種表單格式；
　　垂直表單-采用以上樣式創(chuàng)建的普通表單;
　　水平表單-在form中增加class .form-horizontal；
　　內(nèi)聯(lián)表單-在form中增加class .form-inline,對于標簽元素可以使用.sr-only來隱藏該標簽元素（label）
　　支持的表單控件:
　　input,textarea,checkbox,radio,select(可以增加multiple實現(xiàn)多選)
　　這里特別說明一點,實現(xiàn)內(nèi)聯(lián)的復選框或者單選按鈕使用checkbox-line屬性.
　　如果想在想放置純文本那么可以對<p>元素使用.form-control-static
　　表單控件狀態(tài):
　　可以對div設置has-warning,has-error,has-success來顯示內(nèi)部控件的狀態(tài).
　　可以設置.input-large或者.input-sm來顯示控件的大小,或者使用col-lg-*來顯示控件占的列數(shù).
　　可以使用.class-bloc來顯示一段內(nèi)容的解釋.
　　圖片:
　　.img-rounded：添加 border-radius:6px 來獲得圖片圓角。
　　.img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
　　.img-thumbnail：添加一些內(nèi)邊距（padding）和一個灰色的邊框。
　　.img-responsive 圖片響應式 (將很好地擴展到父元素)

　　今天就分享這些，希望對你有所幫助，當然，你也可以及時的聯(lián)系小編，將你的收獲或者不同的見解分享給小編，我們共同學習和進步。當然，匯仁智杰也有相關(guān)的專業(yè)技能培訓，有意愿的趕緊打電話報名吧。報名熱線：010-56875226