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


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

Twitter Bootstrap — вкладки

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

Bootstrap JQuery табы
(далее…)

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



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

  • Администратор: к записи Спросите на сайте сообщества - http://modx.ru/nast »
  • Григорий: к записи помогите. установил mod x revo на xampp. вроде бы »
  • Дмитрий: к записи Довольно интересно »
  • Валерий: к записи Моё личное мнение - хороший хостинг. На нём уже да »
  • DeKoS: к записи Робит всё. »
  • Администратор: к записи Что-то слишком дешево, подозрительно... »
  • Валерий: к записи Лучше, конечно, платный хостинг. Бесплатных полноц »

Статистика спама

Blogroll:

  • Решайся . Если нужно купить продлить санитарную книжку. Подробнее Медцентр близко к м.Таганская. Легко! →

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