Как сделать картинку колонок

Как сделать картинку колонок
Как сделать картинку колонок
Как сделать картинку колонок
Как сделать картинку колонок
Как сделать картинку колонок

Текущая заметка содержит пример разметки на HTML для получения трех-колоночной сетки с картинками, заголовками, описаниями и кнопками из ненумерованного списка с CSS фреймворком под названием Twitter Bootstrap.

Трех-колоночная сетка с превьюшками с Twiiter Bootstrap

<div class="container top"> <div class="row"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/320x200" alt="ALT NAME"> <div class="caption"> <h3>Header Name</h3> <p>Description</p> <p align="center"><a href="http://bootsnipp.com/" class="btn btn-primary btn-block">Open</a></p> </div> </div> </li> </ul> </div><!-- /.row --> </div><!-- /.container --> Скачать рабочий пример
Архивы

© Red-book-CMS.ru 2012-2018. Копирование материалов без согласия автора запрещено.

Как сделать картинку колонок Как сделать картинку колонок Как сделать картинку колонок Как сделать картинку колонок Как сделать картинку колонок Как сделать картинку колонок Как сделать картинку колонок

Изучаем далее:



Рабочий стол рукодельницы своими руками

Яхта i550 своими руками

Как сделать коллаж из фото с рисунком

Вязание крючком нитками с помпонами

Приложения эффект макияжа
Читать новость Как сделать картинку колонок фото. Поделитесь новостью Как сделать картинку колонок с друзьями!