如何用Bootstrap制作輸入框組
在應用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
最后也可以在輸入框的前面插手下拉菜單，這種也是比力常用的功能，如下圖所示
- End
- 發表于 2018-03-09 00:00
- 閱讀 ( 691 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章