StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
26.05.2016
10:58
9571
8
Контейнер. Основы bootstrap 3 для начинающих. Урок №3
Всем привет!
Продолжаем изучать основы «bootstrap 3».
Пришло время познакомиться в «bootstrap 3» с таким понятием как контейнер.
Что же это такое «контейнер»?
Такое название разработчики придумали не зря. Что мы представляем, когда слышим слово «контейнер»? Некую емкость, внутри которой можно что-то разместить (например, другие ящики или коробки).
Аналогично и на сайтах. Контейнером называют территорию (емкость), внутри которой будут находиться другие блоки сайта, такие как шапка, меню, контент, футер и т.д.
Посмотрите пример снизу. Там я четко указал на сайте, где контейнер (фиолетовый цвет) и где остальные блоки сайта (красным цветом):
Теперь вернемся к нашим кошкам 
.
Чтобы в «bootstrap 3» указать «контейнер», достаточно прописать класс «container».
Пример:
<div class="container"> … </div>
Контейнер выравнивает весь сайт по центру и размер контейнера будет зависеть от размера вашего экрана.
Например:
- если ширина экрана меньше 768 px, то контейнер будет шириной 750 px.
- если ширина экрана меньше 992 px, то контейнер будет шириной 970 px.
- если ширина экрана меньше 1200 px, то контейнер будет шириной 1170 px.
Теперь пробуем все на практике.
Заходим для редактирования в нашу папку, где мы проводим опыты и обучения по «bootstrap 3». Открываем файл «index.html» для редактирования и вставляем «контейнер» между тегами <body></body>:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 на StepkinBLOG.RU</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Hello, world!</h1> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>
Без «контейнера» было так:
А с «контейнером» теперь будет вот так (красным отметил невидимые границы):
Если вы хотите посмотреть границы «контейнера» и попробовать проверить его адаптивность, то можно сделать границы контейнера видимыми. Пропишите стиль классу «container»:
style="border:1px solid #cc0000;"
Пример:
<div class="container" style="border:1px solid #cc0000;"> <h1>Hello, world!</h1> </div>
Сохраните.
Попробуйте открыть теперь вашу страничку через мобильное устройство, либо поиграйтесь с размерами окна браузера.
Вот так вот легко и просто вы создали адаптивный контейнер для будущей веб-страницы.
Но это не все чудеса, которые есть в «bootstrap 3», это только начало. Вы увидите всю мощь и магию «bootstrap 3» на моих уроках, если, конечно, будете следить за новостями и за обновлениями (настойчиво рекомендую подписаться на обновления блога stepkinBLOG.RU
).
Здравствуйте. У меня вопрос. В каких случаях используем container, а в каких container-fluid?
Ответить
18 декабря, 2016 at 21:34
Здравствуйте, Татьяна!
Элемент div с классом ".container" имеет строго определённую ширину для определённого типа устройств.
Другими словами звучит так, для одного устройства контейнер имеет одну ширину, для другого устройства - другое значение ширины.
смартфоны - ширина контейнера равна ширине рабочей области окна браузера
планшеты - 750px
ноутбуки - 970px
персональные компьютеры - 1170px.
Элементы div с классом ".fluid-container" имеет ширину, равную ширину рабочей области окна браузера (ширина контейнера не является фиксированной).
В каких случаях использовать? Да это Вам решать, Татьяна. Все зависит от дизайна да и от того, какой Вы хотите сайт.
Ответить
12 января, 2017 at 20:10
Спасибо
17 января, 2017 at 10:23
Пожалуйста, Татьяна!
Заходите на мой блог почаще!
Почему нет ответа?
Ответить
18 декабря, 2016 at 21:35
Татьяна, даже я имею право на один день отдыха!
Спасибо за понимание.
Ответить
не отцентровался по центру , почему ?
Ответить
9 июля, 2018 at 13:12
Напишите код, и пришлите в комментариях, посмотрю.
Только код ставьте между [ code ]
Ответить