# 2016年1月3日

## bootstrap

### 网格系统

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

```markup
<div class="col-md-8">//占据十二分之八的宽度，
<div class="col-md-4">

//媒体查询，当宽度大于等于992px的时候，该元素位置变化。向右移动8个网格。
//类名col-nd-pull是向左移动。
@media (min-width: 992px)
.col-md-push-8 {
    left: 66.66666667%;
}
```

**媒体查询**

```markup
/* 超小屏幕（手机，小于 768px） */
@media (max-width: @screen-xs-min) { ... }
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
@media (max-width: 767px) {
    /*在小于768像素的屏幕里,这里的样式才生效*/
}


/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
@media (min-width: 768px) and (max-width: 991px) {
    /*在768和991像素之间的屏幕里,这里的样式才生效*/
}


/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
@media (min-width: 992px) and (max-width: 1199px) {
    /*在992和1199像素之间的屏幕里,这里的样式才生效*/
}


/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
@media (min-width: 1200px) {
    /*在大于1200像素的屏幕里,这里的样式才生效*/
}
```

**清除浮动**

`.clearfix`类名可以清除浮动。

**偏移空间** `col-md-off-6`可以在一定尺寸（md--中等尺寸）上偏移一定距离。

**隐藏与显示**

`.visible-xs`在特定尺寸（xs--特小尺寸）下显示该元素。

### 下拉菜单

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

`<div class="dropdown"></div>`

2、使用了一个`<button`>按钮做为父菜单，并且定义类名 **dropdown-toggle** 和自定义**data-toggle** 属性，且值必须和最外容器类名一致，此示例为:

`data-toggle="dropdown"`

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

`<ul class="dropdown-menu">`

**效果如下**

![](https://4114926660-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjTaw3l22eY6xguGexI%2F-LjTaxI_2PLJRc2sGXvR%2F-LjTbDPLc45XSovDCnbO%2Fdropdown.jpg?generation=1562807957731912\&alt=media)