> For the complete documentation index, see [llms.txt](https://note.niefee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://note.niefee.com/summary-1/12/2015-nian-12-yue-29-ri.md).

# 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>
```

效果如下： ![](/files/-LjTbBL8t0QG2KDsdoxr)

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

![](/files/-LjTbBLAMhzrO3gi1-Bh)

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

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

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

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

**区别：**

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

### 图像

* **img-responsive**：响应式图片，主要针对于响应式设计
* **img-rounded**：圆角图片
* **img-circle**：圆形图片
* **img-thumbnail**：缩略图片

### 图标

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

![](/files/-LjTbBLDoi0k9-mizrxV)

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

```markup
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//伪类
.glyphicon-asterisk:before {
content: "\2a";
}


//代码写法
<span class="glyphicon glyphicon-asterisk"></span>
```