form-group与input-group (Bootstrap)

整体是一个from-group,下面分两列,一列放入文本标签,一列放入输入项


文本标签要加上control-label类修饰,其实control-label 具有靠右对齐功能


input标签加上form-control类修饰,使输入框更加好看


输入项中每一行都要用input-group修饰


form-group与input-group (Bootstrap)_第1张图片


最后运行的效果如下:
form-group与input-group (Bootstrap)_第2张图片



再举一个例子


form-group与input-group (Bootstrap)_第3张图片


运行效果如下:
这里写图片描述



form-group与input-group (Bootstrap)_第4张图片


运行后的效果如下:
form-group与input-group (Bootstrap)_第5张图片



input-group表示一行
form-group表示一个文本加上一行,文本可以在这一行的左边或上边
input-group和input-group-addon一般会成对出现



form-group与input-group (Bootstrap)_第6张图片


上面代码运行结果如下:


这里写图片描述



再举个例子如下:
form-group与input-group (Bootstrap)_第7张图片


运行效果如下
form-group与input-group (Bootstrap)_第8张图片


FR:徐海涛(QQ技术交流群:386476712)

你可能感兴趣的:(Dictionary,Bootstrap)