可以给用JS生成的HTML元素添加伪元素么

不可以。

首先伪元素（pseudo-element）应该是CSS相关的概念。

现有的浏览器支持或尚未支持的伪元素如下：

::after

::before

::first-letter

::first-line

::selection

::backdrop

::placeholder

::marker

::spelling-error

::grammar-error

在CSS中控制伪元素使用 selector::pseudo-element，比如给div添加 ::after

div::after {

    

    content : 'x'

    

    font-size : 14px

    color : red

}

所以你通过JS生成的HTML，在CSS中定义就好。

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

2、栅格系统阈值计算

lg为 min-width：1200px

md为min-width：992px

sm为min-width：768px

xs为最小width时宽度计算都按照一定的比例计算，无阈值。

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

4、bootstrap的clearfix

出处：http://www.cnblogs.com/justany/archive/2013/11/19/3430388.html

我一直以为Bootstrap的LESS源代码精髓在mixins.less，所以这个系列主要也是讲解mixins.less的。

什么是mixins？

混入，或者翻译成混合。官网的说法是：我们可以定义一些通用的属性集为一个 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)

}

如果想详细了解混入，请查看官方文档：http://www.lesscss.net/article/document.html

举个栗子

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以下版本。

在CSS3中，子元素伪类选择器有两大类。

（1）:first-child、:last-child、:nth-child(n)、:only-child

（2）:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

---