HTML шаблоны сайтов и просто примеры / приёмы верстки.


Модальные окна с 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

HTML фреймы — тег frameset

Данная заметка содержит несколько примитивных примеров использования фреймов в HTML — теги <frameset> и <iframe>. Напомню, что первый из них формирует структуру вторых на веб-странице.

Пример 1.

Три вертикальных фрейма: первый шириной под 300 пикселей, второй — 180 пикселей, а третий резиновый:

HTML фреймы - теги Frame и Frameset
(далее…)

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

Кроссбраузерный CSS градиент

Представляю читателям red-book-cms.ru пример CSS кода для создания по-настоящему кроссбраузерного CSS градиента. Цвет заливки пусть будет светло-зеленый, травянистого оттенка.

Internet Explorer:

Кроссбраузерный CSS градиент - Internet Explorer

(далее…)

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



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

  • Администратор: к записи Николай, посмотрите файл '.htaccess' в корне сайта »
  • Николай: к записи Простите если немного не по теме. Я сделал экспорт »
  • Эрик: к записи Спасибо, помогло) 20 минут мучался) »
  • steblo: к записи спаисбо »
  • Иван: к записи Привет всем, доброго времени суток! Я излазил весь »
  • Александер: к записи Потом пригляделся, вроде Вы не это имели в виду и »
  • Александер: к записи У Вас не русифицируется, потому что не везде включ »

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

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