Bootatrap学习（一）

1. 媒体查询

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

IE8不支持媒体查询

IE 8 不支持 CSS3 中的圆角属性。

2.格栅系统

    1 、   每列实际上是没有间距的，是每个col类自身携带了左右padding值，看上去是有左右间距的。

   

    2.通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

Container作用

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。

提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分。

注意，不需要也不应该在 container 中嵌套另一个 container。

2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.container { //宽度是响应式的 padding-right: 15px; padding-left: 15px; margin-right: auto;margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } /*........*/

Row作用

Row 是 column 直接存在的容器，按照文档描述 row 中最多可有12个 column，不过可以通过 nesting 的方式灵活扩展。同时作为都是左浮动的 column 的 wrapper，自带 clearfix 的性质。

row 左右各有 －15px 的 margin，就是图片中的蓝色部分。这样也就抵消了上面提到的 container 中15px的 padding，这是bootsrtap栅格系统的精妙之处。

注意：千万记住要把 row 放到 container 的内部，这样才能保证正常。

.row {
  margin-left: -15px;
  margin-right: -15px;
}

Bootstrap是通过.rows上的外边距（margin）取负margin-left: -15px;margin-right: -15px;，表示第一列和最后一列的行偏移，用来抵消第一个列的左内距和最后一列的右内距。

Column作用

每个column 也会有15px的水平方向的 padding，也就是图片中黄色的部分，colunmn 只能在 row 中生存，由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，同时 不同column的内容之间就有了30px的槽。结合图片看一下就一目了然了。

注意：一定要把 column 放到 row 里使用。

2 3 4 5 6

.col-md-1, .col-lg-12 /*......*/{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }

nesting扩展

通过container, row, column都有15px的padding槽边和 row的margin -15px设置，巧妙实现在 column 中嵌套 row进行nesting 扩展(超过12列)，而不需要再套一层 container

在 nseting 的时候 column 的作用也相当于 container 了，这样就可以实现任意的嵌套了。

    

  3、其中的栅格列都使用了position:relative定位，relative是脱离了文档流，它的定位是依据父级的原始点为原始点定位，虽然脱离文档流，但是还是占用文档流的位置，如果要彻底脱离文档流，就使用position:absolute，或者position:fixed

3.maxins 混入：

混入，或者翻译成混合。官网的说法是：我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性。

看起来非常难理解，没事，我们来看例子，比如有这样一个class：

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：

#menu a {
    color: #111;
    .bordered;
}
.post a {
    color: red;
    .bordered;
}

编译后，.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来：

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.post a {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

在 LESS 中，我们还可以还可以像函数一样定义一个带参数的属性集合：

.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

然后在其他 class 中像这样调用它：

#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}

举个栗子

Bootstrap 3.0中有许多有用的混入函数，第一个无疑是clearfix函数。clearfix是用来清除浮动的。

但是，为什么要清除浮动呢？

如果父元素只包含浮动元素，那么它的高度就会塌缩为零。 形象的说，既然是浮动元素，那么其父级元素就觉得他们都是飘在我上面的玩意，没有占据我的空间，所以高度就塌陷为零了。这时候我们清除浮动，告诉父级元素，你需要包含这些浮动的元素，然后他就被撑开了。

常见的清除浮动技术是这样的：

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearxi {
  *zoom: 1;
}

不过Boostrap的更容易记：

.clearfix() {
  &:before,
  &:after {
    content: " "; 
    display: table; 
  }
  &:after {
    clear: both;
  }
}

如果要兼容IE6和IE7则加上：

.clearfix {
  *zoom: 1;
}

值得注意Bootstrap使用的技术不支持Firefox 3.5以下版本。

 

clearfix基本原理

远古时代，我们使用一个隐藏的元素进行清除浮动。但自从伪类选择器:after和:before出现后，我们可以通过content来悄悄的在子元素后端，或者前端插入元素，并将其设为clear: both。

:after

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

:before

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

 

怎么混入？

我们来看看Bootstrap中的例子：

// Panel contents
.panel-body {
  padding: 15px;
  .clearfix();
}

为了防止panel塌陷，Bootstrap使用.clearfix()混入函数对.panel-body处理，编译后如下：

.panel-body {
  padding: 15px;
}

.panel-body:before,
.panel-body:after {
  display: table;
  content: " ";
}

.panel-body:after {
  clear: both;
}

完成收工！

4. &符号

less中，&符号代表父元素，但是代表所有的父元素，而不是只是上一层父元素

eg：

ul.social {
  text-align: center;    //内容居中
  > li{
    display: inline-block;       //列表项为行内快，因此可以像文本一样居中
>a {
 display: inline-block;     //链接也为行内块，因此可以像文本填满有效空间
 &:hover {
   text-decoration: none;          //去掉悬停状态默认的下划线
background-color: @link-hover-color; //同时把背景颜色设为浅灰色
 }
}
  }
}

这里的&代表 ul.social>li>a