form-group与input-group (Bootstrap)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15267341/article/details/54016811

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


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


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


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


这里写图片描述


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



再举一个例子


这里写图片描述


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



这里写图片描述


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



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



这里写图片描述


上面代码运行结果如下:


这里写图片描述



再举个例子如下:
这里写图片描述


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


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

展开阅读全文

没有更多推荐了,返回首页