讲 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。

  1. <!--BootstrapCSS文件，放在<head>内-->
  2. <link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  3. <!--jQuery文件，引入BootstrapJS插件前必需引入-->
  4. <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  5. <!--BootstrapJS文件，一般放在底部-->
  6. <script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  7. <!--让IE使用最新的渲染模式，支持CSS3-->
  8. <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
  9. <!--如果IE版本低于IE9，使浏览器支持HTML5和CSS3-->
  10. <!--[if lt IE 9]>
  11. <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  12. <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  13. <![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-* 示例：

  1. <!--代码部分-->
  2. <div class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-md-1">1/12</div>
  5.         <div class="col-md-1">1/12</div>
  6.         <div class="col-md-1">1/12</div>
  7.         <div class="col-md-1">1/12</div>
  8.         <div class="col-md-1">1/12</div>
  9.         <div class="col-md-1">1/12</div>
  10.         <div class="col-md-1">1/12</div>
  11.         <div class="col-md-1">1/12</div>
  12.         <div class="col-md-1">1/12</div>
  13.         <div class="col-md-1">1/12</div>
  14.         <div class="col-md-1">1/12</div>
  15.         <div class="col-md-1">1/12</div>
  16.     </div>
  17.     <div class="row">
  18.         <div class="col-md-1">1/12</div>
  19.         <div class="col-md-3">3/12</div>
  20.         <div class="col-md-4">4/12</div>
  21.         <div class="col-md-4">4/12</div>
  22.     </div>
  23.     <div class="row">
  24.         <div class="col-md-6">6/12</div>
  25.         <div class="col-md-6">6/12</div>
  26.     </div>
  27. </div>

.col-md-* 效果图：

使用列偏移 .col-md-offset-* 示例：

  1. <!--代码部分-->
  2. <div class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-md-1">1/12</div>
  5.         <div class="col-md-1">1/12</div>
  6.         <!--这里向右偏移4/12-->
  7.         <div class="col-md-1 col-md-offset-4">1/12</div>
  8.         <div class="col-md-1">1/12</div>
  9.         <div class="col-md-1">1/12</div>
  10.         <div class="col-md-1">1/12</div>
  11.         <div class="col-md-1">1/12</div>
  12.         <div class="col-md-1">1/12</div>
  13.     </div>
  14.     <div class="row">
  15.         <div class="col-md-3 col-md-offset-1">3/12</div>
  16.         <div class="col-md-4 col-md-offset-4">4/12</div>
  17.     </div>
  18.     <div class="row">
  19.         <div class="col-md-4  col-md-offset-4">6/12</div>
  20.     </div>
  21. </div>

.col-md-offset-* 效果图：

另外需要注意的是，不管 .col-md-* 和 .col-md-offset-* 怎么搭配使用都要保证 * 总和不超过 12，不然会发生断行现象。

2.3 缩略图

缩略图最常出现的是在产品的展示页，最常见的比如一些购物网站的商品展示。

缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 <img> 标签包在带 .thumbnail 样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .caption 的容器。

.thumbnail 示例：

  1. <!--代码部分-->
  2. <div class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-md-4">
  5.             <div class="thumbnail">
  6.                 <img src="img/1.jpg">
  7.                 <div class="caption">
  8.                     <h4>标题 - 缩略图</h4>
  9.                     <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.         <div class="col-md-4">
  14.             <div class="thumbnail">
  15.                 <img src="img/1.jpg">
  16.                 <div class="caption">
  17.                     <h4>标题 - 缩略图</h4>
  18.                     <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.         <div class="col-md-4">
  23.             <div class="thumbnail">
  24.                 <img src="img/1.jpg">
  25.                 <div class="caption">
  26.                     <h4>标题 - 缩略图</h4>
  27.                     <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </div>

.thumbnail 效果图：

2.4 响应式图片

为了让图片适应容器的大小，可以为图片添加 .img-responsive 样式。

.img-responsive 示例：

  1. <img src="img/1.jpg" class="img-responsive" alt="响应式图片">

另外还可以添加 img-rounded/img-circle/img-thumbnail 让图片呈现圆角/圆形/缩略图的形状。

改变图片形状示例：

  1. <!--代码部分-->
  2. <div class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-md-4">
  5.             <img src="img/1.jpg" class="img-responsive img-rounded" alt="圆角">
  6.         </div>
  7.         <div class="col-md-4">
  8.             <img src="img/1.jpg" class="img-responsive img-circle" alt="圆形">
  9.         </div>
  10.         <div class="col-md-4">
  11.             <img src="img/1.jpg" class="img-responsive img-thumbnail" alt="缩略图">
  12.         </div>
  13.     </div>
  14. </div>

改变图片形状效果图：

三、瀑布流布局实战

3.1 排列图片

看完了上面的内容，下面就开始实战了。首先用栅格结构搭建一个放图片的区域，这里我们在左右各留 1/12 的空白。

  1. <!--代码部分-->
  2. <section class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-md-10 col-md-offset-1">
  5.         <!--这里放图片-->
  6.         </div>
  7.     </div>
  8. </section>

效果图：

然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的样式 .img-responsive 和圆角样式 .img-rounded 修饰下。

  1. <!--代码部分-->
  2. <section class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-md-10 col-md-offset-1">
  5.             <!--图片开始-->
  6.             <div class="col-md-4">
  7.                 <div class="thumbnail">
  8.                     <a href="javascript:void(0);">
  9.                         <img src="img/1.jpg" class="img-responsive img-rounded">
  10.                     </a>
  11.                     <div class="caption">
  12.                         <h4>标题 - 实战</h4>
  13.                         <p>
  14.                             <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
  15.                         </p>
  16.                     </div>
  17.                 </div>
  18.             </div>
  19.             <div class="col-md-4">
  20.                 <div class="thumbnail">
  21.                     <a href="javascript:void(0);">
  22.                         <img src="img/2.jpg" class="img-responsive img-rounded">
  23.                     </a>
  24.                     <div class="caption">
  25.                         <h4>标题 - 实战</h4>
  26.                         <p>
  27.                             <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
  28.                         </p>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.             <div class="col-md-4">
  33.                 <div class="thumbnail">
  34.                     <a href="javascript:void(0);">
  35.                         <img src="img/3.jpg" class="img-responsive img-rounded">
  36.                     </a>
  37.                     <div class="caption">
  38.                         <h4>标题 - 实战</h4>
  39.                         <p>
  40.                             <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
  41.                         </p>
  42.                     </div>
  43.                 </div>
  44.             </div>
  45.             <!--第四到第九个缩略图-->
  46.             ...
  47.             ...
  48.             ...
  49.             ...
  50.             ...
  51.             ...
  52.             <!--图片结束-->
  53.         </div>
  54.     </div>
  55. </section>

效果图：

3.2 实现瀑布流

到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。

官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。

给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。

首先我们给缩略图外部的容器加一个 id="container"。

  1. <!--代码部分-->
  2. <div class="row">
  3.     <div class="col-md-10 col-md-offset-1" id="container">
  4.         <!--图片开始-->
  5.         <div class="col-md-4">
  6.             <div class="thumbnail">

然后为这个 id 加上 column-width 样式。

  1. <!--代码部分-->
  2. #container{
  3.     -webkit-column-width:354px; /*Safari and Chrome*/
  4.     -moz-column-width:354px; /*Firefox*/
  5.     -o-column-width:354px; /*Opera*/
  6.     -ms-column-width:354px; /*IE*/
  7.     column-width:354px;
  8. }
  9. #container>div{
  10.     width:354px; /*宽度根据实际情况调节，应与上面一致*/
  11.     overflow:auto; /*防止内容溢出导致布局错位*/
  12. }

效果图：

因为现在主流浏览器（Chrome/Firefox/Opera/Safari）都已经支持了 CSS 变量，为了方便调试和维护，上面的 CSS 代码也可以这么写。

  1. <!--代码部分-->
  2. body{
  3.     body{
  4.     font-family:"微软雅黑";
  5.     --img-width:354px; /*两根连词线"--"加变量名"img-width"声明变量*/
  6. }
  7. #container{
  8.     -webkit-column-width:var(--img-width); /*用"var(--变量名)"使用变量*/
  9.     -moz-column-width:var(--img-width);
  10.     -o-column-width:var(--img-width);
  11.     -ms-column-width:var(--img-width);
  12.     column-width:var(--img-width);
  13. }
  14. /*另：var()里面可以放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则使用第二个参数"200px"*/
  15. #container>div{
  16.     width:var(--img-width);
  17.     overflow:auto;
  18. }

到这里我们的 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 来实现这个效果，参考代码如下。

  1. //页面加载完之后再加载瀑布流
  2. window.onload = function(){
  3.     //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
  4.     loadWaterfall('container','col-md-4');
  5. }
  7. //加载瀑布流函数//思路来自Amy老师
  8. function loadWaterfall(boxID,thumbnailClass){
  9.     //获取装缩略图外部的盒子
  10.     var box = document.getElementById(boxID);
  11.     //获取装缩略图的数组
  12.     var thumbnail = box.getElementsByClassName(thumbnailClass);
  13.     //获取每个缩略图的宽度
  14.     var thumbnailWidth = thumbnail[0].offsetWidth;
  15.     //计算盒子内每行可以排列几个缩略图
  16.     var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
  17.     //创建放每次整理好的高度数组
  18.     var thumbnailHeightArr = [];
  19.     for(var i = 0; i < thumbnail.length; i++){
  20.         //获取第一行高度数组
  21.         if(i < colCount){
  22.             thumbnailHeightArr.push(thumbnail[i].offsetHeight);
  23.         }else{
  24.             //获取之前最小高度
  25.             var minHeight = Math.min.apply(null,thumbnailHeightArr);
  26.             //第一行最小高度索引
  27.             var minIndex = thumbnailHeightArr.indexOf(minHeight);
  28.             //将此缩略图放在上面那行最小高度下面
  29.             thumbnail[i].style.position = 'absolute';
  30.             //距离顶部长度为这个缩略图上面那个缩略图的长度
  31.             thumbnail[i].style.top = minHeight + 'px';
  32.             //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
  33.             thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + 'px';
  34.             //更新最小高度
  35.             thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
  36.         }
  37.     }
  38. }

用 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

（完）

Bootstrap实战 - 瀑布流布局的更多相关文章

  1. JS瀑布流布局

    好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...

  2. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  3. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  4. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  5. 【读书笔记《Bootstrap 实战》】5.电子商务网站

    构建了公司网站之后,接下来就可以考虑设计一个在线商店了. 此次的设计以上一章的设计为基础, 只是添加了一个包含如下元素的新页面: □ 包含商品小图.标题和说明的产品网格: □ 位于左侧的变懒,用于按类 ...

  6. 【读书笔记《Bootstrap 实战》】4.企业网站

    上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos ...

  7. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  8. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  9. 【读书笔记《Bootstrap 实战》】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

随机推荐

  1. poj 3020 Antenna Placement（二分图最大匹配）

    题意: N行M列的矩阵,每个格子里不是 * 就是 O . * :是一个利益点. O:是一个空白点. 每次可以用一个圈覆盖相邻的两个*.(左右相邻或上下相邻). 问最少需要多少个圈可以覆盖所有的*. 思 ...

  2. hdu 5057 Argestes and Sequence (数状数组+离线处理)

    题意: 给N个数.a[1]....a[N]. M种操作: S X Y:令a[X]=Y Q L R D P:查询a[L]...a[R]中满足第D位上数字为P的数的个数 数据范围: 1<=T< ...

  3. 一、安装zabbix监控（源码编方式）

    首先介绍一下zabbix的运行原理和运行条件. Zabbix监控原理 Zabbix 通过C/S 模式采集数据,通过B/S模式在web 端展示和配置.  被监控端:主机通过安装agent 方式采集数据, ...

  4. matlab 图像保存时去除白边

    很是讨厌MATLAB输出图像时自带的白边,尤其是当导出.eps格式时,很难通过编辑图片来去掉白边.网上有很多代码但是没有注释,有很多坑要填.这里提供一个去除白边的代码,自己在别人的基础上修改了而且加了 ...

  5. APP 自动化之appium元素定位(三)

    APP自动化测试关键环节--元素定位,以下我们来了解appium提供的元素定位方法! 1. id定位,id一个控件的唯一标识,由开发人员在项目中指定,如果一个元素有对应的resource-id,我们就 ...

  6. log4j日志集成

    一.介绍  Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器.NT的事件记录器.UNIX Syslog ...

  7. python与C结构体之间二进制数据转换

    python与C结构体之间数据转换 前言 在实际应用中,可能会遇到直接和C进行二进制字节流协议通信,这时要把数据解包成python数据,如果可能,最好与C定义的结构体完全对应上. python中有2种 ...

  8. 从环境搭建到回归神经网络案例，带你掌握Keras

    摘要:Keras作为神经网络的高级包,能够快速搭建神经网络,它的兼容性非常广,兼容了TensorFlow和Theano. 本文分享自华为云社区<[Python人工智能] 十六.Keras环境搭建 ...

  9. django的增删改查

    前置条件: 已有一个model (tbl_user) ,用户表 1.查询 # 查询用户表 username是cx的数据 user_object = tbl_user.objects.filter(us ...

  10. 🏆【Alibaba中间件技术系列】「RocketMQ技术专题」帮你梳理RocketMQ或Kafka的选择理由以及二者PK

    前提背景 大家都知道,市面上有许多开源的MQ,例如,RocketMQ.Kafka.RabbitMQ等等,现在Pulsar也开始发光,今天我们谈谈笔者最常用的RocketMQ和Kafka,想必大家早就知 ...