Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Контейнер. Основы bootstrap 3 для начинающих. Урок №3

26.05.2016


10:58


5506


8


Контейнер. Основы bootstrap 3 для начинающих. Урок №3

Контейнер. Основы bootstrap 3 для начинающих. Урок №3

Всем привет!
Продолжаем изучать основы «bootstrap 3».
Пришло время познакомиться в «bootstrap 3» с таким понятием как контейнер.
Что же это такое «контейнер»?
Такое название разработчики придумали не зря. Что мы представляем, когда слышим слово «контейнер»? Некую емкость, внутри которой можно что-то разместить (например, другие ящики или коробки).

Аналогично и на сайтах. Контейнером называют территорию (емкость), внутри которой будут находиться другие блоки сайта, такие как шапка, меню, контент, футер и т.д.
Посмотрите пример снизу. Там я четко указал на сайте, где контейнер (фиолетовый цвет) и где остальные блоки сайта (красным цветом):

Контейнер. Основы bootstrap 3 для начинающих. Урок №3

Теперь вернемся к нашим кошкам :smile:.
Чтобы в «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>

Без «контейнера» было так:

Подключение. Основы bootstrap 3 для начинающих

А с «контейнером» теперь будет вот так (красным отметил невидимые границы):

Контейнер. Основы bootstrap 3 для начинающих. Урок №3

Если вы хотите посмотреть границы «контейнера» и попробовать проверить его адаптивность, то можно сделать границы контейнера видимыми. Пропишите стиль классу «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:idea:).



Случайные записи:

  1. Основы CMS WordPress. Урок №1
  2. Как мы отдыхали в Геническе
  3. Оператор условия if else Основы PHP с нуля Урок №9
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Коды цветов в HTML. Основы HTML для начинающих. Урок №11

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

8 ответа(ов) на статью: “Контейнер. Основы bootstrap 3 для начинающих. Урок №3”

  1. Татьна says:

    Здравствуйте. У меня вопрос. В каких случаях используем container, а в каких container-fluid?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Татьяна!
    Элемент div с классом ".container" имеет строго определённую ширину для определённого типа устройств.
    Другими словами звучит так, для одного устройства контейнер имеет одну ширину, для другого устройства - другое значение ширины.
    смартфоны - ширина контейнера равна ширине рабочей области окна браузера
    планшеты - 750px
    ноутбуки - 970px
    персональные компьютеры - 1170px.
    Элементы div с классом ".fluid-container" имеет ширину, равную ширину рабочей области окна браузера (ширина контейнера не является фиксированной).

    В каких случаях использовать? Да это Вам решать, Татьяна. Все зависит от дизайна да и от того, какой Вы хотите сайт.

    Ответить

    Татьяна ответил(а) на комментарий:

    Спасибо

    Степка
    Степка ответил(а) на комментарий:

    Пожалуйста, Татьяна!
    Заходите на мой блог почаще! :rose:

  2. Татьяна says:

    Почему нет ответа?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Татьяна, даже я имею право на один день отдыха!
    Спасибо за понимание.

    Ответить

  3. Талант says:

    не отцентровался по центру , почему ?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Напишите код, и пришлите в комментариях, посмотрю.
    Только код ставьте между [ code ]

    [ code ]тут код[ /code ]

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245