Twitter Bootstrap — это один из самых проработанных и удобных в использовании CSS-фреймворков. Данный раздел посвящен различным примерам верстки с применением элементов «бутстрапа».


HTML шаблоны на базе Twitter Bootstrap. Часть первая.

Далее вам будет представлена авторская подборка из HTML-шаблонов, которые были сделаны на базе CSS-фреймворка от разработчиков Twitter — Twitter Bootstrap.

Clean Blog

Clean-Blog

Достаточно простенький, но аккуратненький и современный одно-колоночный макет с красивой большой картинкой в верхней части веб-страницы. Для блогов. Фон белый. Ссылки бирюзового оттенка. В подвале есть круглые кнопочки социальных сервисов.

Скачать Просмотреть

(далее…)

Опубликовано 11-12-2014 в 16:00

HTML: 3 колонки с картинками

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

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

(далее…)

Опубликовано 18-06-2013 в 15:00

Контактная форма на сайт

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

Контактная форма для сайта с Twitter Bootstrap

(далее…)

Опубликовано 18-06-2013 в 13:54

Модальные окна с Bootstrap

Данная заметка содержит небольшой пример создания простого модального окна средствами CSS-фрейморка Twitter Bootstrap и JQuery.

JQuery модальные окна

1. Подключение стилей и клиентских скриптов необходимых для работы будет выглядеть вот так:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.8.3/jquery.min.js">
</script>  
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>

Небольшое примечание. Если подключите ещё и файл «bootstrap.min.js» или «bootstrap.js», тогда окно при всплытии будет через доли секунды исчезать. Причину проявления такого «бага» я не выяснял.

(далее…)

Опубликовано 20-03-2013 в 16:44

Twitter Bootstrap: оповещения

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

Оформление информационных уведомлений в Twitter Bootstrap

(далее…)

Опубликовано 20-03-2013 в 11:35

Подсветка кода в Bootstrap

Третья часть серии материалов блога, которые посвящены примерам использования стилей и скриптов, включенных в CSS-фреймворк известный, как Twitter Bootsrap.

Посветка кода в Twitter Bootstrap

Итак, для подсветки кода вместе с бутстрап лучше всего использовать JavaScript- библиотеку Google Code Prettify.

1. Подключаем скрипты и стили, запускаем гугловский скрипт:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
<script>
jQuery(document).ready(function($) {
  var $window = $(window)
  window.prettyPrint && prettyPrint() 
})
</script>
<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->

(далее…)

Опубликовано 18-03-2013 в 14:26

Bootstrap: подсказки на JQuery

Вторая заметка из серии, посвященной относительно детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу вам о том, как подключать подсказки на JQuery.

Всплывающие подсказки на JQuery с Twitter Bootstrap

Итак, tooltips в бутстрапе могут быть четырех типов в зависимости от направления их появления — right, left, top и bottom. Задаются они атрибутом data-placement у гиперссылки. С помощью data-original-title можно задавать текст во всплывающей подсказке. Ну а data-toggle="tooltip" служит для указания скрипту, что здесь не просто линк, а tooltip, — задается свойством селектора в настройках.

К моему большому сожалению пример не работает в Internet Explorer 8, — выводится ошибка, связанная с JavaScript / JQuery. Разбираться с ней мне не захотелось. Тем более, что в официальной документации к фреймворку выводится тоже самое.

(далее…)

Опубликовано 18-03-2013 в 12:05













Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты