如何用Bootstrap製作輸入框組

工具/材料

Sublime Text

操作方法

首先用Sublime Text工具新建HTML5頁面，匯入bootstrap的樣式檔案和腳本檔案，如下圖所示

然後我們調用input-group樣式來讓輸入框組中的元素在同一行，如下圖所示

當然input-group-addon不只可以放在輸入框的前面，也可以放在輸入框的後面，如下圖所示

也可以透過input-group-lg樣式讓輸入框組中的元素變大，還有其他的一些控制大小的樣式你可以查一下API

接下來你也可以在input前面加入複選框，如下圖所示，將複選框放在input-group-addon裏即可

還可以在輸入框組中定義button按鈕，如下圖所示，按鈕可以透過btn-default,btn-primary等來定義樣式

最後也可以在輸入框的前面加入下拉選單，這種也是比較常用的功能，如下圖所示