一个简明的Bootstrap 4框架

一个简明的Bootstrap 4框架(只区分pc与手机并基于FlexBox布局):<div class="container"><div class="row"><div class="col-sm"></di...

一个简明的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)

SEO干货丨4大页面优化设置加快网站收录速度 最后一页
Tags:  
联系我们

Contact us

青岛

电话:133 9639 4503

地址:青岛市市南区三度空间2309

诸城

电话:133 0646 1744

地址:诸城市繁荣东路74号楼12F

×