1. 程式人生 > >form-group與input-group (Bootstrap)

form-group與input-group (Bootstrap)

整體是一個from-group,下面分兩列,一列放入文字標籤,一列放入輸入項

文字標籤要加上control-label類修飾,其實control-label 具有靠右對齊功能

input標籤加上form-control類修飾,使輸入框更加好看

輸入項中每一行都要用input-group修飾

這裡寫圖片描述

最後執行的效果如下:
這裡寫圖片描述

再舉一個例子

這裡寫圖片描述

執行效果如下:
這裡寫圖片描述

這裡寫圖片描述

執行後的效果如下:
這裡寫圖片描述

input-group表示一行
form-group表示一個文字加上一行,文字可以在這一行的左邊或上邊
input-group和input-group-addon一般會成對出現

這裡寫圖片描述

上面程式碼執行結果如下:

這裡寫圖片描述

再舉個例子如下:
這裡寫圖片描述

執行效果如下
這裡寫圖片描述

FR:徐海濤(QQ技術交流群:386476712)