bootstrap最常用的几个网站
1移动设备优先策略
内容
决定什么是最重要的。
布局
优先设计更小的宽度。
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
随着屏幕大小的增加而添加元素。
bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算[转]
引用自(还提醒了less编译,从docs取新css) 赞: http://www.cnblogs.com/isdom/p/webtips004.html?tvd
我自己试验先把外围<row>置样式”overflow:hidden” ,再加大内层<row>的<div>的 padding,而不是把padding置0
.row.no_gutter [class^="col-"], .row.no_gutter [class*="col-"] { padding-right: 20px; padding-left: 20px; }
data-toggle,data-target
data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示
1bootstrap辅助类
http://www.runoob.com/bootstrap/bootstrap-helper-classes.html
1clearfix
菜鸟教程(极好样例-多改变窗口宽度): http://www.runoob.com/try/try2.php?filename=trybs_grid_ex7-block
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap .clearfix 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:lavender;">
列 1<br>
重置窗口大小，查看效果。也尝试删除有 clearfix 的 div 查看效果。
</div>
<div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">列 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">列 3</div>
<div class="col-xs-6 col-sm-3" style="background-color:lightgray;">列 4</div>
</div>
</div>
</body>
</html>
View Code
