Twitter Bootstrap

Слайд 3

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

Слайд 4

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

на основе классов, добавляя которые к элементу вы задаёте ему стилевое оформление

Слайд 5

Twitter Bootstrap – CSS библиотека визуальных компонентов
Вторая опора Bootstrap – «сетка»

размещения элементов, позволяющая размещать элементы в несколько столбцов, размер (и количество) которых будет адаптироваться под размеры экрана.

Слайд 6

Twitter Bootstrap – CSS библиотека визуальных компонентов
Bootstrap, как и другие CSS

библиотеки можно скачать и разместить рядом с html-файлами нашего сайта.

http://v4-alpha.getbootstrap.com/getting-started/download/

Или можно просто подключить css-файл который браузер будет загружать с сайта библиотеки (в данном случае с сайта bootstrap).

Слайд 7

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

использовать создатели Bootstrap.

Добавьте код выделенный на слайде.

Слайд 8

Twitter Bootstrap – как это работает
Добавив класс btn мы подключили к

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

Слайд 9

Twitter Bootstrap – набор компонентов
В составе Bootstrap входит множество визуальный компонентов

из которых можно собрать аскетичный но практичный интерфейс.

http://v4-alpha.getbootstrap.com/components/alerts/

Слайд 10

Twitter Bootstrap – шаблоны
А также готовые шаблоны, которые можно скачать и

переработать под конкретную задачу.

http://v4-alpha.getbootstrap.com/examples/

Слайд 11

Bootstrap Grid

Слайд 12

Bootstrap Grid – размещение элементов на странице в несколько колонок
Вставьте в

стартовый шаблон bootstrap’а приведенный код.

Слайд 13

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

зависимости от размера экрана элементы на странице перестраиваются

Слайд 14

Bootstrap Grid
Bootstrap разделяет все экраны на такие группы, разделяя их на

12 столбцов:

При помощи классов col-md-6 (col-sm-8 и т.п.), которые мы указываем для элементов, мы можем указать сколько столбцов сетки будет выделено под элемент.

Для того, чтобы сетка работала корректно все элементы должны располагаться в рамках тега с классом row, каждая такая строка содержит набор элементов которые могут расположиться или в один ряд, или перенестись на другие строки. Все «строки» (теги с классом row) должны располагаться в теге-«контейнере» который должен быть отмечен классом container.

Слайд 15

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

Слайд 16

Как работает Bootstrap Grid на примере
При помощи классов col-- мы можем

задавать сколько столбцов будет выделено под помеченный тег. Такими классами необходимо пометить каждый тег который входит в строку (row)

Слайд 17

Как работает Bootstrap Grid на примере
При помощи классов text-**-left (-center, -right,

-justify) мы можем задавать выравнивание содержимого внутри блока (причём для различных разрешений выравнивание может быть разное). Эффект подобен тому который даёт CSS свойства text-align.

Слайд 18

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

Слайд 19

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

новости

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

Слайд 20

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

новости

Страница с одной новостью

Слайд 21

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

Слайд 22

Размечаем области для размещения заголовка страница, списка новостей и баннера
.jumbotron –

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

Слайд 23

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

Слайд 24

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

Слайд 25

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

Слайд 26

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

Слайд 27

Twitter Bootstrap

Содержание

Twitter Bootstrap

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

Уроки по Bootstrap http://dedushka.org/uroki/6901.htmlTwitter Bootstrap – CSS библиотека визуальных компонентовБиблиотека построена

Twitter Bootstrap – CSS библиотека визуальных компонентовВторая опора Bootstrap – «сетка»

Twitter Bootstrap – CSS библиотека визуальных компонентовBootstrap, как и другие CSS

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

Twitter Bootstrap – как это работаетДобавив класс btn мы подключили к

Twitter Bootstrap – набор компонентовВ составе Bootstrap входит множество визуальный компонентов

Twitter Bootstrap – шаблоныА также готовые шаблоны, которые можно скачать и

Bootstrap Grid

Bootstrap Grid – размещение элементов на странице в несколько колонокВставьте в

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

Bootstrap GridBootstrap разделяет все экраны на такие группы, разделяя их на

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

Как работает Bootstrap Grid на примереПри помощи классов col-**-** мы можем

Как работает Bootstrap Grid на примереПри помощи классов text-**-left (-center, -right,

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

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

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

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

Размечаем области для размещения заголовка страница, списка новостей и баннера.jumbotron –

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

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

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

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

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

Похожие презентации

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

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

Twitter Bootstrap – CSS библиотека визуальных компонентов
Вторая опора Bootstrap – «сетка»

Twitter Bootstrap – CSS библиотека визуальных компонентов
Bootstrap, как и другие CSS

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

Twitter Bootstrap – как это работает
Добавив класс btn мы подключили к

Twitter Bootstrap – набор компонентов
В составе Bootstrap входит множество визуальный компонентов

Twitter Bootstrap – шаблоны
А также готовые шаблоны, которые можно скачать и

Bootstrap Grid – размещение элементов на странице в несколько колонок
Вставьте в

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

Bootstrap Grid
Bootstrap разделяет все экраны на такие группы, разделяя их на

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

Как работает Bootstrap Grid на примере
При помощи классов col-- мы можем

Как работает Bootstrap Grid на примере
При помощи классов text-**-left (-center, -right,

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

Размечаем области для размещения заголовка страница, списка новостей и баннера
.jumbotron –

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