BootStrap按钮和图片

  • Post author:
  • Post category:其他




按钮


可作为按钮使用的标签

<a>,<input>,<button>都可以设置为按钮,bootstrap为按钮提供了.btn类,为按钮设置了新的样式。

a标签结构:<a class=”btn”>按钮明</a>

input标签结构:<input class=”btn”  value=”按钮名”/>

button标签结构:<button class=”btn”>按钮名</button>


预定义样式

.btn-default(默认样式),.btn-primary(首选样式),.btn-success(成功样式),.btn-info(信息样式),.btn-warning(警告样式),.btn-danger(危险样式),.btn-link(链接样式),为按钮设置颜色。



按钮大小

.btn-lg(大按钮),.btn-sm(小按钮, .btn-xs(更小按钮),.btn-block(块级按钮)



激活状态

为按钮添加.active类,使按钮处于激活状态,其表现为被按压下去(底色更深、边框色更深、向内投射阴影)



禁用状态

为<button>标签添加disabled属性,或者添加.disabled类,都能使标签为禁用状态。




图片


响应式图片

给图片添加.img-responsive类可以让图片支持响应式。其实质是为图片设置了max-width:100%,height:auto,display:block。若让图片水平居中,可以为图片添加.center-block。


图片形状

bootstrap提供了三种样式的图片,img-rounded(圆角),  img-circle(圆形),  img-thumbnail(带边框)。




版权声明:本文为qq_35377740原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。