Framework Bootstrap

Designed for everyone, everywhere.
Bootstrap makes front-end web developmentfaster and easier.
It's made for folks of all skill levels,devices of all shapes, and projects of all sizes.

Bootstrap

Bootstrap – это свободно распространяемый front-end фреймворк для быстрого создания web-сайтов
Bootstrap включает HTML, CSS и опционально JavaScript
Bootstrap позволяет создавать адаптивный дизайн
Адаптивный дизайн – дизайн, обеспечивающий корректное отображение сайта на различных устройствах и подстраивающийся под заданные размеры окна браузера

2

Bootstrap

Bootstrap был разработан для Twitter, начальное название Twitter Bootstrap
Версия v1.0.0 появилась в августе 2011 года
Текущая версия – v3.3.4
В июне 2014 года Bootstrap стал самым популярным проектом на GitHub(http://github.com)
GitHub – крупный web-сервис для хостинга IT-проектов и их совместной разработки

3

Плюсы Bootstrap

Легко начать использовать, достаточно основных знаний HTML и CSS
Возможность создавать адаптивный дизайн для различных устройств (смартфонов, планшетов, ноутбуков и т.д.)
Mobile-first подход – mobile-first стили являются частью ядра фреймворка
Bootstrap совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer, Safari и Opera)

4

5

6

7

8

9

Bootstrap

10

11

Создание документа

…

12

Создание документа

Обязательно использование определения типа
Обязательно использование определения языка
name="viewport" оптимизирует страницу для смартфоновcontent="width=device-width " область просмотра имеет такую же ширину, что и ширина устройстваcontent="initial-scale=1" начальный масштаб

13

Контейнеры

Bootstrap требует помещения элементов страницы в контейнер
Класс .container используется для адаптивного контейнера фиксированной ширины

14

Контейнеры

15

16

Параметры тегов

В Bootstrap переопределены стили по умолчанию браузера для некоторых тегов

17

Параметры тегов

18

Параметры тегов

Тег

19

Параметры тегов

Теги

и



Кофе



- горячий напиток темного цвета



Молоко



- холодный напиток белого цвета



20

Таблицы

21

Таблицы

22

Таблицы

23

Таблицы

24

Кнопки

 Default Primary Success Info Warning Danger Link 

25

Меню




• Домой

• Пункт 1

• Пункт 2

• Пункт 3




26

27

28

29

Не учите фреймворки, учите архитектуруhttp://habrahabr.ru/post/253297

30

Скачать

Нажимая кнопку «Скачать», вы принимаете условия оферты, обработки и защиты личных данных и подключаете бесплатные почтовые уведомления с возможностью отписки.