2016年1月3日

bootstrap

网格系统

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

<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%;
}

媒体查询

/* 超小屏幕（手机，小于 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">

效果如下