gridex是一款基于Bootstrap的响应式可伸展的网格布局系统插件。它通过简单设置,就可以制作出像谷歌图片画廊那样的扩展效果。同时它具有响应式的特点,非常的实用。
使用方法
使用该网格系统插件需要引入jQuery(1.9.1+),bootstrap-gridex.min.js和gridex.css文件。
HTML结构
该可扩展的网格布局使用无序列表作为HTML结构。使用时需要在<ul>
元素上添加class thumbnails
和gridex
。然后可以为触发扩展面板的超链接添加class thumbnail
,而扩展面板需要添加class gd-expander
。
<ul class="thumbnails gridex"> <li class="span3 clearfix"> <a href="#" class="thumbnail"> <img alt="270x170" src="http://placehold.it/270x170" /> </a> <!-- gd-expander required --> <div class="gd-expander"> <!-- gd-inner optional --> <div class="gd-inner"> <div class="row-fluid"> <div class="span6 text-center"> <img alt="270x170" class="img-polaroid" src="http://placehold.it/370x270" /> </div> <div class="span6"> <h2>Heading text 1</h2> <p> ...... </p> <a href="#" class="btn btn-success">Visit Website</a> </div> </div> </div> </div> </li> ...... </ul>
CSS样式
gridex.css文件提供了扩展面板的基本样式,这些样式都非常简单,如果想做的更好看,可以自定义这些样式。
.gridex { position: relative; } .gd-expander { position: absolute; overflow: hidden; height: 500px; margin-top: 20px; max-width: 100%; left: 30px; /* standar row margin is 30px */ } .gd-inner { padding: 50px; background: #ccc; } /* 扩展面板顶部箭头样式*/ .gridex > li > a { position: relative; } .gridex > .gd-expanded > a::after { top: auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #ccc; border-width: 25px; left: 50%; margin: -25px 0 0 -25px; }
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该扩展网格布局插件。
$(function() { $('.gridex').gridex(); })
该网格系统在旧的浏览器中会使用jQuery标准的animate动画来制作过渡效果。