1 / 22

TwitterBootstrup

TwitterBootstrup. Фреймворк для вёрстки. Преимущества. Открытый Кросбраузерный Имеет стили для основных необходимых элементов Позволяет быстро сделать рабочую версию сайта без лишних проблем с вёрсткой. С чего начать.

medea
Download Presentation

TwitterBootstrup

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TwitterBootstrup Фреймворк для вёрстки

  2. Преимущества • Открытый • Кросбраузерный • Имеет стили для основных необходимых элементов • Позволяет быстро сделать рабочую версию сайта без лишних проблем с вёрсткой

  3. С чего начать Так выглядит скаченный bootstrupс официального сайта: http://getbootstrap.com Префикс min означает, что это сжатая версия файла

  4. Подключение фреймворка

  5. Шаблон Bootstrup • Предполагается 12 компонентная сетка • Использует HTML5 свойства CSS • Установлены стили для элемента body по умолчанию • Изменены стили ссылок при выборе и наведении • Фреймворк для одинакового отображения страниц сбрасывает все стили браузера по умолчанию у элементов DOM

  6. Шаблон Bootstrup

  7. Шаблон Bootstrup Возможно устанавливать отступы столбцов в сетке

  8. Плавающие и фиксированные шаблонв

  9. Создать простую форму btn-primary well placeholder btn

  10. Форма поиска form-search

  11. Форма в одну строку form-inline type=‘password’

  12. Таблицы table table-striped

  13. Карусель • Позволяет создать набор циклически сменяющихся картинок • Для создание карусели требуется дополнительный плагин (в последней версии плагин встроен по умолчанию): http://getbootstrap.com/2.3.2/javascript.html#carousel

  14. Карусель

  15. Карусель slide

  16. Карусель • JavaScript для управления параметрами слайдера: • Также слайдер имеет события для программной обработки смены изображений • slide происходит при смене картинки • slid происходит когда карусель начинается заново

  17. Всплывающее окно • Функциональный элемент доступен, только при подключении плагина: tooltip.js и popover.js • Позволит отобразить дополнительную информацию о объекте • Можно использовать для информирования и каком либо событие у объекта

  18. Всплывающее окно

  19. Модальная форма

  20. Стилизация • Настройка навигационной панели

  21. Стилизация • Подключаем собственные cssстили для того чтобы перекрыть стили фреймворка

  22. Источники • http://getbootstrap.com/2.3.2/index.html официальный сайт фреймворка • http://www.youtube.com/user/Creativitytuts?feature=watchканал с обучающими видео • http://bootstrap-ru.com/русский вариант официального сайта

More Related