Documentation Massive
Thème HTML5 multipage et une page
création: 15/08/2015
Sur cette page
Portfolio
La structure du filtre de portfolio :
<!--filter-->
<div class="text-center">
<ul class="portfolio-filter">
<li class="active"><a href="#" data-filter="*"> All</a></li>
<li><a href="#" data-filter=".cat1">printing</a></li>
<li><a href="#" data-filter=".cat2">Web</a></li>
<li><a href="#" data-filter=".cat3">illustration</a></li>
<li><a href="#" data-filter=".cat4">media</a></li>
<li><a href="#" data-filter=".cat5">crafts</a></li>
</ul>
</div>
<!--filter-->
La structure des éléments du portfolio
<div class="portfolio col-3 gutter">
<!--portfolio item-->
<div class="portfolio-item cat1 cat3 ">
<div class="thumb">
<img src="img/portfolio/01.jpg" alt="">
<div class="portfolio-hover">
<div class="action-btn">
<a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a>
</div>
<div class="portfolio-description">
<h4><a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
<p><a href="#">category</a></p>
</div>
</div>
</div>
</div>
<!--portfolio item-->
</div>
Nous avons l'option 5 colonnes (2 col, 3 col, 4 col, 5 col et 6 col) avec gouttière et gouttière moins
Si vous souhaitez afficher les éléments du portefeuille en 3 colonnes, codez comme suit
<div class="portfolio col-3 ">
...
</div>
ici vient d'ajouter le nom de classe col-3 dans la balise de portfolio comme <div class= "portfolio col-3 ">
- colonne 2 col-2
- colonne 4 col-4
- colonne 5 col-5
- colonne 6 col-6
et si vous avez besoin de la gouttière de ces colonnes, ajoutez simplement un nom de classe de gouttière comme ceci :
<div class="portfolio col-3 gutter ">
...
</div>
Portfolio masonry
Pour la vue de la maçonnerie, ajoutez simplement le nom de la classe portfolio-masonry
<div class="portfolio portfolio-masonry col-3 gutter">
...
</div>
Portfolio avec titre
Les portfolios avec la structure du titre
<div class="portfolio portfolio-with-title col-3 gutter ">
<div class="portfolio-item cat1 cat3 ">
<!--portfolio image-->
<div class="thumb">
<img src="img/portfolio/01.jpg" alt="">
<div class="portfolio-hover">
<div class="action-btn">
<a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a>
</div>
</div>
</div>
<!--portfolio image-->
<!--portfolio title-->
<div class="portfolio-title">
<h4><a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
<p><a href="#">category 1</a> , <a href="#">category 3</a> </p>
</div>
<!--portfolio title-->
</div>
</div>