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

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