表單
基礎表單
對於表單中的input、textarea、select,一般我都會加上類”form-control”,它設置元素的默認寬度為100%(並不是絕對,比如下述的內聯表單)。並且每個元素(包括label和待輸入元素)都會加上”form-group”。它的樣式只有一個。 margin-bottom:15px。
<form action=""><div><label for="">用戶名:</label><input type="text"/></div><div><label for="">密碼:</label><input type="password"/></div></form>
內聯表單
通過給最外層元素(form-group的父元素)加上”form-inline”。表示所有表單元素都在一行顯示(充足的寬度的情況下)。並且”.form-inline .form-group”展示為內聯塊元素(inline-block)。並且”.form-inline .form-control”的寬度是auto。這樣可以保證在一行展示。
<form action=""><div><label for="">用戶名:</label><input type="text"/></div><div><label for="">密碼:</label><input type="password"/></div></form>
水平表單
不同於普通表單和內聯表單。如果要將label和input表單元素顯示在一行,則需要使用”form-horizontal”。該類聯合”form-group”使用,就相當於網格系統中的”row”。所以它的子類有”col-md-*”,而label的“control-label”―-“.form-horizontal .control-label”,有文本右對齊的效果。如果不加這個,label和input的會顯得不對齊。
<form action=""><div><label for="">用戶名:</label><div><input type="text"/></div></div><div><label for="">密碼:</label><div><input type="password"/></div></div></form>
表單大小
控制input大小的是”input-sm”,”input-lg”,它們使input輸入框比正常看起來更小或者更大。與此對應的是label中文本的大小。需要在父級”form-group”同時加上”form-group-sm”,”form-group-lg”。如上面一個demo的密碼輸入框。
輸入框
在HTML5中,輸入框(input)標籤中的type支持了更多的類型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。標籤<input>上只有賦值了特定的type才能顯示正確的樣式。有些元素只有在手機上才能顯示其效果。
下拉框select
與輸入框類似。只是將input改成了select,同時加上了”form-control”類。
<form action=""><div><label for="">請選擇:</label><div><select name="" id=""><option value="">HTML</option><option value="">CSS</option><option value="">Javascript</option><option value="">JAVA</option><option value="">PHP</option><option value="">Nodejs</option></select></div></div></form>
col-md-pull-*是左偏移。
文本域
和上麵類似。
<form action=""><div><label for="">textarea:</label><div><textarea name="" id="" rows="3">hello</textarea></div></div></form>
多選框和單選框
為了使radio和checkbox元素顯示在一行,並且和label對齊。 bootstrap提供了兩種選擇。其一:
<div><label for=""><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>保密</label><label for=""><input type="checkbox"/>HTML<input type="checkbox"/>CSS<input type="checkbox"/>JavaScript</label></div>
label本身是inline-block的。但是.radio,.checkbox本身卻是block的。
所以用一個label包裹多個單選框或複選框,這樣會顯得很不專業(haha)。還有,很多的也是很不美觀的。 So,第二種寫法來了。
<div><label for=""><input type="radio" name="sex"/>男</label><label for=""><input type="radio" name="sex"/>女</label><label for=""><input type="radio" name="sex"/>保密</label><br /><label for=""><input type="checkbox" />HTML</label><label for=""><input type="checkbox" />CSS</label><label for=""><input type="checkbox" />JavaScript</label></div>
表單驗證
has-success:成功,綠色。
has-warning:警告,黃色。
has-error:錯誤,紅色。
在”form-group”上加上對應的樣式即可。為了更好的驗證,我們還可以繼續加上”has-feedback”。然後在input(”form-control”)後面元素同級加上”form-control-feedback”。語義清晰明了。代碼如下:
<form action=""><div><label for="">用戶名:</label><div><input type="text" /><span></span></div></div><div><label for="">密碼:</label><div><input type="text" /><span></span></div></div><div><label for="">郵箱:</label><div><input type="text" /><span></span><span>格式正確</span></div></div></form>
按鈕
多按鈕與按鈕風格
bootstrap中的按鈕風格多樣。 button、a、input、span、div等都可以成為按鈕,只要它具有”btn btn-樣式”。但是為了更好的兼容性和可讀性最好不要這樣用,盡量使用button標籤。
<button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><!--btn-block使按鈕獨占一行--><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button><button>按鈕</button>
按鈕大小
如上述,使用”btn-xs”,”btn-sm”,”btn-lg”可以設置按鈕大小。
按鈕狀態
如上述,有效的有”active”,”focus”。
圖片
img-responsive:響應式圖片,主要針對響應式設計。
img-rounded:圓角。
img-circle:圓形。
img-thumbnail:縮略圖,表現為外層加了一個邊框。
圖示
bootstart內置了很多小圖標。使用方式如下。其實在上面的”form-control-feedback”中已經使用了。其中”glyphicon”是必須的。
<span></span>
輸入框組
輸入框組是一個”input-group”。我們需要加一些後綴(比如郵箱後綴)和前綴(金錢符號¥、$等)則需要使用到”input-group-addon”或者”input-group-btn”。語義簡單清晰。如下:
<!--郵箱--><div><input type="text" /><span>@gmail.com</span></div><!--貨幣--><div><span>$</span><input type="text"><span>.00</span></div><!--單選--><div><span><input type="radio"/></span><input type="text"/></div><!--多選--><div><span><input type="checkbox"/></span><input type="text" /></div><!--淘寶輸入框組--><div><div><button data-toggle="dropdown">請選擇<span></span></button><ul><li><a href="javascript:void(0)">寶貝</a></li><li><a href="javascript:void(0)">店鋪</a></li></ul></div><input type="text" /><span><button>搜索</button></span></div>
小結
“form-horizontal”,”form-inline”都是表單組最外層的標籤。
一個表單組以”form-group”作為父元素。類似的還有”input-group”,以及以後可能會將的”button-group”。它們都可以設置大小。
”form-group-lg”,”input-lg”,”input-group-lg”,”btn-lg”等。
驗證樣式有”has-error”,”has-success”,”has-warning”。同元素可以加上”has-feedback”。以便讓驗證更完整。
按鈕有很多樣式,大小可以設置。
圖片常用的四個樣式。
bootstarp內置了很多圖標。
輸入框組以”input-group”開頭,子元素有”input-group-addon”,”input-group-btn”等等。
以上所述是小編給大家介紹的BootStrap中的表單大全,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!