Bootstrap 4框架

1、一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）：

<div class="container">
<div class="row">
<div class="col-sm">

</div>
</div>
</div>

Emment语法：
div.container>div.row>div.col-sm

2、一个完整的Bootstrap 4全栅格定义框架：

<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">

</div>

<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">

</div>
</div>
</div>

Emment语法：
div.container>div.row>div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12+div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12

3、一个快速的Bootstrap 3:框架：

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

</div>
</div>
</div>

Emment语法：
div.container>div.row>div.col-lg-8.col-md-8.col-sm-8.col-xs-12+div.col-lg-4.col-md-4.col-sm-4.col-xs-12

手机与PC区分的响应式简单规则：
<div class="d-block d-sm-none">谢帅，我只在手机下显啦，宽屏我羞！</div>
<div class="d-none d-sm-block">哥们，不要太老套，我粗人不喜欢手机屏幕，大方点在PC上给我丢出来！</div>

4、这些是常用的属性
隐藏：hidden 清除边界：clearfix

仅在指定屏幕下显示：visible-xs

center-block
list-unstyled：不显示前缀点
列偏移：.offset-md-* 文本对齐：

Left aligned text.

Center aligned text.

Right aligned text.

text-capitalize 利用
text-center 居中
text-danger 加红危险
text-hide 隐藏文字
text-info 信息
text-justify 字体对齐（齐行——
text-left 文字左对齐
text-lowercase 小写（仅英文）
text-muted 静音
text-nowrap 不换行
text-primary 原生效果
text-right 文字居右
text-success 成功
text-uppercase 文字大写（仅英文）
text-warning 警告红色

文字分别是8种样式：柔和灰（text-muted）、主要蓝（text-primary）、成功绿（text-secondary）、成功红（text-success）、危险红（text-danger）、警告黄（text-warning）、危息绿（text-info）、黑白对比（text-dark）:

1、JavaScript编程精解

2、JavaScript设计模式

3、JavaScript启示录

4、Backbone应用开发实战

5、深入理解Bootstrap

6、深入理解Bootstrap

7、深入理解Bootstrap

8、深入理解Bootstrap

5、背景是7款样式：主要蓝（bg-primary）、成功绿（bg-secondary）、成功红（bg-success）、危险红（bg-danger）、警告黄（bg-warning）、危息绿（bg-info）、黑白对比（bg-dark）