Bootstrap最优前端开发体验以及五大组合利器

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

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

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

---

一个完整的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>

---

一个快速的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>

这些是常用的属性
隐藏：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

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