• Главная
  • Карта сайта
Не найдено

Уроки Bootstrap 3.0 для начинающих (3-й урок) – контейнер

Опубликовано: 01.09.2018

Для начала давайте выясним, что называют «контейнером» для сайта ?

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

В Bootstrap 3.0. контейнер обозначается классом  « container » .

Пример:

<div class="container"> … </div>

Давайте пропишем класс « container » к нашему файлу « index.html ».

<!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 Template на BlogGood.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>

Если вы запустите файл « index.html », то увидите, как весь сайт со всем его содержимым автоматически разместится по центру экрана.

Результат:

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

<div class="container" style="border:1px solid #000;" > … </div>

Вот так это выглядит в коде:

<!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 Template на BlogGood.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" style="border:1px solid #000;" > <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 и сможете уже сами создать простенький макет адаптированный под любой размер экранов компьютеров или телефонов.

Не пропустите следующих уроков, если вам это интересно!

Жмите на кнопки соц. сетей, чтобы я видел и знал, что урок был полезен.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: Bootstrap , основы

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss