Twitter Bootstrap — это один из самых проработанных и удобных в использовании CSS-фреймворков. Данный раздел посвящен различным примерам верстки с применением элементов «бутстрапа».
Далее вам будет представлена авторская подборка из HTML-шаблонов, которые были сделаны на базе CSS-фреймворка от разработчиков Twitter — Twitter Bootstrap.
Достаточно простенький, но аккуратненький и современный одно-колоночный макет с красивой большой картинкой в верхней части веб-страницы. Для блогов. Фон белый. Ссылки бирюзового оттенка. В подвале есть круглые кнопочки социальных сервисов.
Текущая заметка содержит пример разметки на HTML для получения трех-колоночной сетки с картинками, заголовками, описаниями и кнопками из ненумерованного списка с CSS фреймворком под названием Twitter Bootstrap.
Текущая заметка содержит пример верстки контактной формы для сайта средствами CSS фреймворка под названием Twitter Bootstrap. Стоит отметить, что дополнительных стилей здесь прописывать не понадобится.
Данная заметка содержит небольшой пример создания простого модального окна средствами CSS-фрейморка Twitter Bootstrap и 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», тогда окно при всплытии будет через доли секунды исчезать. Причину проявления такого «бага» я не выяснял.
Текущая заметка содержит несколько примеров разметки HTML, которая необходима для оформления оповещений (alerts) в CSS-фреймворке Twitter Bootstrap.
Третья часть серии материалов блога, которые посвящены примерам использования стилей и скриптов, включенных в CSS-фреймворк известный, как Twitter Bootsrap.
Итак, для подсветки кода вместе с бутстрап лучше всего использовать 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]-->
Вторая заметка из серии, посвященной относительно детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу вам о том, как подключать подсказки на JQuery.
Итак, tooltips в бутстрапе могут быть четырех типов в зависимости от направления их появления — right, left, top и bottom. Задаются они атрибутом data-placement у гиперссылки. С помощью data-original-title можно задавать текст во всплывающей подсказке. Ну а data-toggle="tooltip" служит для указания скрипту, что здесь не просто линк, а tooltip, — задается свойством селектора в настройках.
К моему большому сожалению пример не работает в Internet Explorer 8, — выводится ошибка, связанная с JavaScript / JQuery. Разбираться с ней мне не захотелось. Тем более, что в официальной документации к фреймворку выводится тоже самое.
Свежие комментарии