"gallery using lists (galeria usando listas)"
Bootstrap 3.3.0 Snippet by matheuseduardo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Galeria</h2>
<div>kk</div>
<p>rs</p>
<ul class="galeria">
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
<li><a href="http://placehold.it/640x480.png"><img src="http://placehold.it/320x320.png" /></a></li>
</ul>
<p>rs</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
ul.galeria, ul.galeria > li {
list-style: none;
margin: 0;
padding: 0;
}
ul.galeria {
}
ul.galeria > li {
outline: 1px red solid;
float: left;
}
@media(max-width:639px){
ul.galeria > li {
width: 50%;
}
}
@media(min-width:640px){
ul.galeria > li {
width: 33.33333333333333%;
}
}
@media(min-width:768px){
ul.galeria > li {
width: 33.33333333333333%;
}
}
@media(min-width:992px){
ul.galeria > li {
width: 25%;
}
}
@media(min-width:1200px){
ul.galeria > li {
width: 25%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

nice template thanks!! but it won't close the window when I click on an image

René Bautista () - 7 years ago - Reply 0