這篇文章跟大家分享一個Bootstrap實戰,手把手帶你使用Bootstrap實現瀑布流佈局,希望對大家有幫助!
講Bootstrap 基礎的教程網路上已經很多了,實際上Bootstrap 中文網(bootcss.com)裡的文檔已經寫的很詳細了,但實戰的案例卻不多。這裡用一些目前流行的網頁佈局為導向,使用 Bootstrap 中的樣式來完成它。每次只講與個案相關的知識點,邊學邊練,加強理解。練習本案例需有 HTML/CSS 基礎。
瀑布流是近年來流行起來的一種網頁佈局,視覺表現為參差不齊的多欄佈局,本案例便是使用Bootstrap 實現一個瀑布流佈局。 【相關推薦:《bootstrap教學》】
標籤內引入 CSS 資料夾內的經過壓縮的 bootstrap.min.css
。 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]-->
官方解釋:Bootstrap 提供了一套響應式、行動裝置優先的串流柵格系統,隨著螢幕或視窗(viewport)尺寸的增加,系統會自動分成最多12 列。它包含了易於使用的預定義類別。
簡單來說,就是Bootstrap 為了快速佈局從外到內寫好了三類樣式:
或100% 寬度
.container-fluid 樣式;
樣式,必須包含在
.container 或
.在 container-fluid 中;
(
* 可以是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,不然會發生斷行現象。
標籤包在帶有
.thumbnail 樣式的容器裡面,如果我們想要加入一段文字描述,可以在裡面新增一個樣式為
.caption 的容器。
.thumbnail 範例:
<!--代码部分--> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg" alt="手把手帶你使用Bootstrap實現瀑布流佈局" > <div class="caption"> <h4>标题 - 缩略图</h4> <small>我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg" alt="手把手帶你使用Bootstrap實現瀑布流佈局" > <div class="caption"> <h4>标题 - 缩略图</h4> <small>我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg" alt="手把手帶你使用Bootstrap實現瀑布流佈局" > <div class="caption"> <h4>标题 - 缩略图</h4> <small>我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述,我是缩略图里面的描述。</small> </div> </div> </div> </div> </div>
.thumbnail 效果圖:
.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>改變圖片形狀效果圖:
看完了上面的内容,下面就开始实战了。首先用栅格结构搭建一个放图片的区域,这里我们在左右各留 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" alt="手把手帶你使用Bootstrap實現瀑布流佈局" > </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" alt="手把手帶你使用Bootstrap實現瀑布流佈局" > </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" alt="手把手帶你使用Bootstrap實現瀑布流佈局" > </a> <div class="caption"> <h4>标题 - 实战</h4> <p> <small>阅读是运用语言文字来获取信息,认识世界,发展思维,并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片,也包括符号、公式、图表等。</small> </p> </div> </div> </div> <!--第四到第九个缩略图--> ... ... ... ... ... ... <!--图片结束--> </div> </div> </section>
效果图:
到这里已经把图片排列好了,但是看起来怪怪的,因为上下图片之间有一片空隙,看起来很不美观,我们的瀑布流的特点是宽度一致,高度自适应布局。目前已经实现了宽度一致,要想实现高度自适应要用到 CSS3 中的一个样式 column-width
。
官方解释:设置或检索对象每列的宽度,对应的脚本特性为 columnWidth。
给容器加了 column-width
这个样式时,浏览器会给你计算容器里面的 <div> 应该显示多少列,计算一个相对合理的布局方式。<p>首先我们给缩略图外部的容器加一个 <code>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
除了用 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 样式,其中栅格系统因为可以实现响应式布局尤其重要。
版权声明
本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:blog.mazey.net/2399.html
(完)
更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!
以上是手把手帶你使用Bootstrap實現瀑布流佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!