2015年12月29日

bootstrap

表单控件

这两个类名是：

input-sm:让控件比正常大小更小

input-lg:让控件比正常大小更大

在Bootstrap框架中同样提供这几种效果。

  • .has-warning:警告状态（黄色）

  • .has-error：错误状态（红色）

  • .has-success：成功状态（绿色）

  • .has-feedback：添加状态符号的类名，对应不同的状态会自动出现不同的符号。

  • .help-block:提示信息以块状显示，并且显示在控件底部。

按钮

<button class="btn btn-default" type="button">button标签按钮</button> 
<input type="submit" class="btn btn-default" value="input标签按钮"/>

<span class="btn btn-default">span标签按钮</span>  
<div class="btn btn-default">div标签按钮</div>

效果如下：

建议使用button或a标签来制作按钮。

  • btn-block:这个类名可以让按钮充满整个容器。

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

区别：

.disabled样式不会禁止按钮的默认行为,而在元素标签中添加disabled属性的方法是可以禁止元素的默认行为的。

图像

  • img-responsive：响应式图片，主要针对于响应式设计

  • img-rounded：圆角图片

  • img-circle：圆形图片

  • img-thumbnail：缩略图片

图标

图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加glyphicon类名来实现，然后通过伪元素:before的content属性调取对应的icon编码：

Previous2015年12月28日

Last updated

Was this helpful?