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)