Twitter Bootstrap

1.

Bootstrap
и не только
www.courses.dp.ua

2.

Twitter Bootstrap

3.

Twitter Bootstrap – CSS библиотека визуальных компонентов
https://v4-alpha.getbootstrap.com/
http://bootstrap4.ru/
3

4.

Twitter Bootstrap – CSS библиотека визуальных компонентов
Библиотека построена на основе классов,
добавляя которые к элементу вы задаёте ему
стилевое оформление
Уроки по Bootstrap http://dedushka.org/uroki/6901.html
4

5.

Twitter Bootstrap – CSS библиотека визуальных компонентов
Вторая опора Bootstrap – «сетка» размещения
элементов, позволяющая размещать элементы в
несколько столбцов, размер (и количество) которых
будет адаптироваться под размеры экрана.
5

6.

Twitter Bootstrap – CSS библиотека визуальных компонентов
Bootstrap, как и другие CSS библиотеки можно скачать и
разместить рядом с html-файлами нашего сайта.
http://v4-alpha.getbootstrap.com/getting-started/download/
<link rel="stylesheet" href=“./bootstrap.min.css">
Или можно просто подключить css-файл который браузер
будет загружать с сайта библиотеки (в данном случае с
сайта bootstrap).
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0alpha.4/css/bootstrap.min.css">
6

7.

Twitter Bootstrap – как это работает
http://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template
Скопируйте стартовый шаблон страницы, который
рекомендуют использовать создатели Bootstrap.
Добавьте код выделенный на слайде.
7

8.

Twitter Bootstrap – как это работает
Добавив класс btn мы подключили к кнопке стилевое
оформления заложенное создателями Bootstrap.
Задав класс btn-success – задали зеленый цвет кнопки,
а классом btn-danger – красный цвет.
8

9.

Twitter Bootstrap – набор компонентов
http://v4-alpha.getbootstrap.com/components/alerts/
В составе Bootstrap входит множество визуальный
компонентов из которых можно собрать аскетичный но
практичный интерфейс.
9

10.

Twitter Bootstrap – шаблоны
http://v4-alpha.getbootstrap.com/examples/
А также готовые шаблоны, которые можно скачать
и переработать под конкретную задачу.
10

11.

Bootstrap Grid

12.

Bootstrap Grid – размещение элементов на
странице в несколько колонок
Вставьте в стартовый шаблон bootstrap’а приведенный код.
12

13.

Bootstrap Grid – размещение элементов на
странице в несколько колонок
Страница в зависимости от размера экрана
элементы на странице перестраиваются
13

14.

Bootstrap Grid
Bootstrap разделяет все экраны на такие группы, разделяя их на
12 столбцов:
Размеры
экрана
Extra small
< 544px
Small
≥ 544px
Medium
≥768px
Large
≥ 992px
Extra large
≥1200px
Ширина
столбца
1/12 размера
Название
Префикс класса
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
.col-xl-*
При помощи классов col-md-6 (col-sm-8 и т.п.), которые мы указываем для
элементов, мы можем указать сколько столбцов сетки будет выделено под
элемент.
Для того, чтобы сетка работала корректно все элементы должны
располагаться в рамках тега с классом row, каждая такая строка содержит
набор элементов которые могут расположиться или в один ряд, или
перенестись на другие строки. Все «строки» (теги с классом row) должны
располагаться в теге-«контейнере» который должен быть отмечен классом
container.
14

15.

Как работает Bootstrap Grid на примере
Скачайте заготовку и скопируйте в notepad++
http://files.courses.dp.ua/web/06/ex03.html
15

16.

Как работает Bootstrap Grid на примере
При помощи классов col-**-** мы можем задавать сколько
столбцов будет выделено под помеченный тег. Такими классами
необходимо пометить каждый тег который входит в строку
(row)
16

17.

Как работает Bootstrap Grid на примере
При помощи классов text-**-left (-center, -right, -justify) мы можем
задавать выравнивание содержимого внутри блока (причём для
различных разрешений выравнивание может быть разное). Эффект
подобен тому который даёт CSS свойства text-align.
17

18.

Немного практики

19.

Создадим на базе Bootstrap страницу с лентой
новостей и страницу одной новости
Страница со списком новостей
19

20.

Создадим на базе Bootstrap страницу с лентой
новостей и страницу одной новости
Страница с одной новостью
20

21.

Скопируйте стартовый шаблон страницы, который
рекомендуют использовать создатели Bootstrap.
http://v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template
21

22.

Размечаем области для размещения заголовка
страница, списка новостей и баннера
.jumbotron
–
визуальный
элемент
Bootstrap
представляющий собой плашку для размещения заголовка
сайта, логотипа и т.п.
22

23.

Страница списка новостей
23

24.

Страница конкретной новости
24

25.

Стили для «настройки» Bootstrap’а
(применяется на все страницах)
25

26.

Много практики

27.

Готовые шаблоны Bootstrap’а для разработки страниц на их базе
https://v4-alpha.getbootstrap.com/examples/
27

28.

W3School Bootstrap 3 Tutorial
http://www.w3schools.com/bootstrap/
28