Twitter bootstrap bootstrap3缩略图网格
我找到了一个关于引导网格的教程,但它是用bootstrap1.x编写的。现在我想使用bootstrap3来实现同样的效果。医生说用.img缩略图来代替.media grid,但似乎仍然不起作用。我想要的是这样的东西: 1.x版本是:Twitter bootstrap bootstrap3缩略图网格,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我找到了一个关于引导网格的教程,但它是用bootstrap1.x编写的。现在我想使用bootstrap3来实现同样的效果。医生说用.img缩略图来代替.media grid,但似乎仍然不起作用。我想要的是这样的东西: 1.x版本是: 将.img thumbnail类应用于图像,以获得圆形边框样式,它不是.media grid的直接替代品,而且如果您希望将图像包装在链接中,则最好在链接本身上使用.thumbnail类 要构建实际网格,您需要使用Bootstrap
-
-
-
-
-
-
-
将.img thumbnail
类应用于图像,以获得圆形边框样式,它不是.media grid
的直接替代品,而且如果您希望将图像包装在链接中,则最好在链接本身上使用.thumbnail
类
要构建实际网格,您需要使用Bootstrap 3,您的示例如下所示:
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
这里有一个
如果您不需要链接,这里有一个,只需要缩略图网格
<div class="container">
<div class="row">
<div class="col-xs-4">
Some Image
</div>
<div class="col-xs-4">
Some Image
</div>
<div class="col-xs-4">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
</div>
一些图像
一些图像
一些图像
一些图像
一些图像
一些图像
一些图像
谢谢您的回复。使用div来实现是很好的,但是有可能通过ul元素来实现吗?查看缩略图网格的实时演示,希望对您有所帮助