Bootstrap最优前端开发体验以及五大组合利器
翻译:@Zoomla!逐浪CMS发哥 Github代码仓库
一个简明的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
一个完整的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
一个快速的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>
这些是常用的属性
隐藏：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）:
JavaScript编程精解
JavaScript设计模式
JavaScript启示录
Backbone应用开发实战
深入理解Bootstrap
深入理解Bootstrap
深入理解Bootstrap
深入理解Bootstrap
背景是7款样式：主要蓝（bg-primary）、成功绿（bg-secondary）、成功红（bg-success）、危险红（bg-danger）、警告黄（bg-warning）、危息绿（bg-info）、黑白对比（bg-dark）