欧美精品一区三区在线观看,久久婷婷五综合一区二区,亚洲无线观看国产高,国产人人草自拍视频

  • <sup id="wg3ln"></sup>

    
    
      <sub id="wg3ln"></sub>

      如何用Bootstrap制作輸入框組

      元桃子

      工具/材料

      SublimeText

      首先用Sublime Text工具新建HTML5頁(yè)面,導(dǎo)入bootstrap的樣式文件和腳本文件,如下圖所示

      如何用Bootstrap制作輸入框組

      然后我們調(diào)用input-group樣式來(lái)讓輸入框組中的元素在同一行,如下圖所示

      如何用Bootstrap制作輸入框組

      當(dāng)然input-group-addon不只可以放在輸入框的前面,也可以放在輸入框的后面,如下圖所示

      如何用Bootstrap制作輸入框組

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

      如何用Bootstrap制作輸入框組

      接下來(lái)你也可以在input前面加入復(fù)選框,如下圖所示,將復(fù)選框放在input-group-addon里即可

      如何用Bootstrap制作輸入框組

      還可以在輸入框組中定義button按鈕,如下圖所示,按鈕可以通過(guò)btn-default,btn-primary等來(lái)定義樣式

      如何用Bootstrap制作輸入框組

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

      如何用Bootstrap制作輸入框組