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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://note.niefee.com/summary-1/12/2015-nian-12-yue-29-ri.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.