讲 Bootstrap 根底的教程网上曾经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档曾经写的很具体了，但实战的案例却不多。这里用一些以后风行的网页布局为导向，应用 Bootstrap 中的款式来实现它。每次只讲与案例相干的知识点，边学边练，增强了解。练习本案例需有 HTML/CSS 根底。
一、案例介绍
瀑布流是近几年流行起来的一种网页布局，视觉体现为参差不齐的多栏布局，本案例便是应用 Bootstrap 实现一个瀑布流布局。
二、相干的 Bootstrap 知识点
2.1 配置 Bootstrap
2.1.1 首先去 Bootstrap 官网（bootcss.com）下载“用于生产环境的Bootstrap”。
2.1.2 在 <head> 标签内引入 CSS 文件夹内的通过压缩的 bootstrap.min.css。
2.1.3 因为 Bootstrap 的 JS 插件是依赖 jQuery 的，所以想用他的 JS 插件必须先引入 jQuery ，而后再引入 JS 文件夹下的 bootstrap.min.js。
<!--BootstrapCSS文件，放在<head>内--><link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!--jQuery文件，引入BootstrapJS插件前必须引入--><script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><!--BootstrapJS文件，个别放在底部--><script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--让IE应用最新的渲染模式，反对CSS3--><meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"><!--如果IE版本低于IE9，使浏览器反对HTML5和CSS3--><!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->2.2 栅格零碎
官网解释：Bootstrap 提供了一套响应式、挪动设施优先的流式栅格零碎，随着屏幕或视口（viewport）尺寸的减少，零碎会主动分为最多 12 列。它蕴含了易于应用的预约义类。
简略来说，就是 Bootstrap 为了疾速布局从外到内写好了三类款式：
- 外层的固定宽度
.container或 100% 宽度.container-fluid款式； - 行
.row款式，必须蕴含在.container或.container-fluid中； - 列
.col-md-*（*能够是 1 到 12，此处代表中等屏幕按此规范显示，.col-md-1占.row的 1/12，.col-md-12占.row的 12/12）或列偏移.col-md-offset-*（*能够是 1 到 12），蕴含在.row容器中，从而疾速进行栅格布局。
.col-md-* 示例：
<!--代码局部--><div class="container-fluid"> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> </div> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-3">3/12</div> <div class="col-md-4">4/12</div> <div class="col-md-4">4/12</div> </div> <div class="row"> <div class="col-md-6">6/12</div> <div class="col-md-6">6/12</div> </div></div>.col-md-* 效果图：
应用列偏移 .col-md-offset-* 示例：
<!--代码局部--><div class="container-fluid"> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <!--这里向右偏移4/12--> <div class="col-md-1 col-md-offset-4">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-1">3/12</div> <div class="col-md-4 col-md-offset-4">4/12</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">6/12</div> </div></div>.col-md-offset-* 效果图：
另外须要留神的是，不论 .col-md-* 和 .col-md-offset-* 怎么搭配应用都要保障 * 总和不超过 12，不然会产生断行景象。
2.3 缩略图
缩略图最常呈现的是在产品的展现页，最常见的比方一些购物网站的商品展现。
缩略图须要配合下面所介绍的栅格零碎来应用，应用办法是把 <img> 标签包在带 .thumbnail 款式的容器外面，如果咱们想增加一段文字描述，能够在外面增加一个款式为 .caption 的容器。
.thumbnail 示例：
<!--代码局部--><div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h4>题目 - 缩略图</h4> <small>我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h4>题目 - 缩略图</h4> <small>我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h4>题目 - 缩略图</h4> <small>我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容，我是缩略图外面的形容。</small> </div> </div> </div> </div></div>.thumbnail 效果图：
2.4 响应式图片
为了让图片适应容器的大小，能够为图片增加 .img-responsive 款式。
.img-responsive 示例：
<img src="img/1.jpg" class="img-responsive" alt="响应式图片">另外还能够增加 img-rounded/img-circle/img-thumbnail 让图片出现圆角/圆形/缩略图的形态。
扭转图片形态示例：
<!--代码局部--><div class="container-fluid"> <div class="row"> <div class="col-md-4"> <img src="img/1.jpg" class="img-responsive img-rounded" alt="圆角"> </div> <div class="col-md-4"> <img src="img/1.jpg" class="img-responsive img-circle" alt="圆形"> </div> <div class="col-md-4"> <img src="img/1.jpg" class="img-responsive img-thumbnail" alt="缩略图"> </div> </div></div>扭转图片形态效果图：
三、瀑布流布局实战
3.1 排列图片
看完了下面的内容，上面就开始实战了。首先用栅格构造搭建一个放图片的区域，这里咱们在左右各留 1/12 的空白。
<!--代码局部--><section class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!--这里放图片--> </div> </div></section>效果图：
而后用下面所看到的带形容的缩略图款式，每个缩略图又占这两头 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的款式 .img-responsive 和圆角款式 .img-rounded 润饰下。
<!--代码局部--><section class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!--图片开始--> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);"> <img src="img/1.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> <h4>题目 - 实战</h4> <p> <small>浏览是使用语言文字来获取信息，意识世界，倒退思维，并取得审美体验的流动。它是从视觉资料中获取信息的过程。视觉资料次要是文字和图片，也包含符号、公式、图表等。</small> </p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);"> <img src="img/2.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> <h4>题目 - 实战</h4> <p> <small>浏览是使用语言文字来获取信息，意识世界，倒退思维，并取得审美体验的流动。它是从视觉资料中获取信息的过程。视觉资料次要是文字和图片，也包含符号、公式、图表等。</small> </p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);"> <img src="img/3.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> <h4>题目 - 实战</h4> <p> <small>浏览是使用语言文字来获取信息，意识世界，倒退思维，并取得审美体验的流动。它是从视觉资料中获取信息的过程。视觉资料次要是文字和图片，也包含符号、公式、图表等。</small> </p> </div> </div> </div> <!--第四到第九个缩略图--> ... ... ... ... ... ... <!--图片完结--> </div> </div></section>效果图：
3.2 实现瀑布流
到这里曾经把图片排列好了，然而看起来怪怪的，因为高低图片之间有一片空隙，看起来很不美观，咱们的瀑布流的特点是宽度统一，高度自适应布局。目前曾经实现了宽度统一，要想实现高度自适应要用到 CSS3 中的一个款式 column-width。
官网解释：设置或检索对象每列的宽度，对应的脚本个性为 columnWidth。
给容器加了 column-width 这个款式时，浏览器会给你计算容器外面的 <div> 应该显示多少列，计算一个绝对正当的布局形式。
首先咱们给缩略图内部的容器加一个 id="container"。
<!--代码局部--><div class="row"> <div class="col-md-10 col-md-offset-1" id="container"> <!--图片开始--> <div class="col-md-4"> <div class="thumbnail">而后为这个 id 加上 column-width 款式。
<!--代码局部-->#container{ -webkit-column-width:354px; /*Safari and Chrome*/ -moz-column-width:354px; /*Firefox*/ -o-column-width:354px; /*Opera*/ -ms-column-width:354px; /*IE*/ column-width:354px;}#container>div{ width:354px; /*宽度依据理论状况调节，应与下面统一*/ overflow:auto; /*避免内容溢出导致布局错位*/}效果图：
因为当初支流浏览器（Chrome/Firefox/Opera/Safari）都曾经反对了 CSS 变量，为了不便调试和保护，下面的 CSS 代码也能够这么写。
<!--代码局部-->body{ body{ font-family:"微软雅黑"; --img-width:354px; /*两根连词线"--"加变量名"img-width"申明变量*/}#container{ -webkit-column-width:var(--img-width); /*用"var(--变量名)"应用变量*/ -moz-column-width:var(--img-width); -o-column-width:var(--img-width); -ms-column-width:var(--img-width); column-width:var(--img-width);}/*另：var()外面能够放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则应用第二个参数"200px"*/#container>div{ width:var(--img-width); overflow:auto;}到这里咱们的 Bootstrap 瀑布流布局就实现了，一步步实现下来还是很简略的，演示地址：https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html，源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall。
3.3 扩大
除了用 CSS3 实现瀑布流之外，还能够用 JavaScript 来实现这个成果，参考代码如下。
//页面加载完之后再加载瀑布流window.onload = function(){ //这里援用col-md-4是因为在盒子里包裹图片没有其余作用，如果不想抵触也能够创立其余Class loadWaterfall('container','col-md-4');}//加载瀑布流函数//思路来自Amy老师function loadWaterfall(boxID,thumbnailClass){ //获取装缩略图内部的盒子 var box = document.getElementById(boxID); //获取装缩略图的数组 var thumbnail = box.getElementsByClassName(thumbnailClass); //获取每个缩略图的宽度 var thumbnailWidth = thumbnail[0].offsetWidth; //计算盒子内每行能够排列几个缩略图 var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth); //创立放每次整顿好的高度数组 var thumbnailHeightArr = []; for(var i = 0; i < thumbnail.length; i++){ //获取第一行高度数组 if(i < colCount){ thumbnailHeightArr.push(thumbnail[i].offsetHeight); }else{ //获取之前最小高度 var minHeight = Math.min.apply(null,thumbnailHeightArr); //第一行最小高度索引 var minIndex = thumbnailHeightArr.indexOf(minHeight); //将此缩略图放在下面那行最小高度上面 thumbnail[i].style.position = 'absolute'; //间隔顶部长度为这个缩略图下面那个缩略图的长度 thumbnail[i].style.top = minHeight + 'px'; //间隔右边长度为这个缩略图下面那个缩略图间隔右边的长度 thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + 'px'; //更新最小高度 thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight; } }}用 JavaScript 实现瀑布流最显著的一个益处就是对于 IE 的兼容性更好一些，因为 Windows7 捆绑装置 IE 浏览器的缘故，国内应用 IE 的群体十分宏大，这使得咱们在制作网页时不得不思考 IE 浏览器的兼容问题。
JavaScript 实现瀑布流参考源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript。
四、总结
本文介绍了 Bootstrap 的根本配置、栅格零碎、缩略图、响应式图片和局部 CSS3 款式，其中栅格零碎因为能够实现响应式布局尤其重要。
版权申明
本博客所有的原创文章，作者皆保留版权。转载必须蕴含本申明，放弃本文残缺，并以超链接模式注明作者后除和本文原始地址：https://blog.mazey.net/2399.html
（完）