在應用Bootstrap的時候， 輸入框是使用率很高的元素 。 但是， 單個的輸入框已經不能滿足如今的用戶需求了， 通常需要多個元素組合在一起形成輸入框組 。 下面小編就教大家用Bootstrap來制作輸入框組 。 東西/材料 Sublime Text
操作方式 01 起首用Sublime Text東西新建HTML5頁面， 導入bootstrap的樣式文件和劇本文件， 如下圖所示
02 然后我們挪用input-group樣式來讓輸入框組中的元素在統一行， 如下圖所示
03 當然input-group-addon不只可以放在輸入框的前面， 也可以放在輸入框的后面， 如下圖所示
04 也可以經由過程input-group-lg樣式讓輸入框組中的元素變年夜， 還有其他的一些節制大小的樣式你可以查一下API
05 接下來你也可以在input前面插手復選框， 如下圖所示， 將復選框放在input-group-addon里即可
06 還可以在輸入框組中界說button按鈕， 如下圖所示， 按鈕可以經由過程btn-default,btn-primary等來界說樣式
07 【如何用Bootstrap制作輸入框組】最后也可以在輸入框的前面插手下拉菜單， 這種也是比力常用的功能， 如下圖所示
以上內容就是如何用Bootstrap制作輸入框組的內容啦， 希望對你有所幫助哦！
猜你喜歡
- 如何運用C#的多線程技術
- 無線麥克風如何連接音響？沒聲音怎么辦？
- 如何在ppt中加入能從頭到尾的音樂
- 在Excel中，如何將數保留到小數點后零位？
- 破解版 如何下載、安裝、破解origin8.0軟件
- 南方裝地暖需要注意什么 如何選擇地暖
- 如何選擇買房的樓層？
- 汽車如何節約保養費用？
- 駕考時有緊張情緒怎么緩解？
- 如何創建帶陰影的右箭頭標注