Bootstrap 3 - Резиновый макет сайта

В этом уроке Вы узнаете, как создавать плавающие макеты с помощью Twitter Bootstrap.

Создание плавающего макета с помощью Twitter Bootstrap


В Twitter Bootstrap 3.2 вы можете использовать класс .container-fluid, чтобы создавать «резиновые» макеты, которые используют 100% ширины окна браузера. Класс .container-fluid устанавливает значение свойства margin, равное auto от левого и правого края контейнера до границ элемента body (т.е margin-left: auto и margin-right: auto). Этим он выравнивает элемент (.container-fluid) по горизонтали.

А также, данный класс .container-fluid задает отступы с помощью свойства CSS padding от левого и право края элемента до его содержимого на 15px (т.е. padding-left: 15px, padding-right: 15px).

Следующий код создает плавающий «резиновый» макет, который занимает 100% ширины окна браузера.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Плавающий "резиновый" макет сайта на движке Twitter Bootstrap 3</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4">
                <h2>Блок №1</h2>
                <p>Материал блока №1</p>
            </div>
            <div class="col-xs-4">
                <h2>Блок №2</h2>
                <p>Материал блока №2</p>
            </div>
            <div class="col-xs-4">
                <h2>Блок №3</h2>
                <p>Материал блока №3</p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12">
                <footer>
                    <p>© Copyright 2014 @itchief.ru</p>
                </footer>
            </div>
        </div>
    </div>
</body>
</html>

В окне браузера наш пример будет выглядеть примерно так:
Резиновый макет веб-страницы на движке Bootstrap 3

Теперь проверим наш макет, изменив размер окна браузера.
Резиновый макет веб-страницы на движке Bootstrap 3


   Bootstrap 1    12188 0

Комментарии (4)

  1. Евгений # 0
    Отличный урок!
    1. seventh # 0
      Подскажите, пожалуйста, как сделать отступы слева/справа от края экрана только для больших экранов. То есть на больших надо большие отсупы, а на мобильных совсем без отступов по краям.
      Сейчас выглядит так:

      .container-fluid {
          padding-left: 4%;
          padding-right: 4%;
      На компе то, что надо, а на телефоне получаются огромные вертикальные полосы по краям.
      1. Александр Мальцев # 0
        Это делается с помощью медиа-запросов.
        /* ширина больше 1200px */
        @media (min-width: 1200px) {
          .container-fluid {
            padding-left: 4%;
            padding-right: 4%;
          }
        }
        
        Вот ещё варианты создания правил (может быть пригодятся):
        /* для диапазона (ширина >= 992px и <=1199px) */
        @media (min-width:992px) and (max-width:1199px) {
          .container-fluid { 
            padding-left: 2%;
            padding-right: 2%;
          }
        }
        /* ширина <= 767px */
        @media (max-width:767px) {
          .container-fluid { 
            padding-left: 1%;
            padding-right: 1%;
          }
        }
        
        Ширина устройств (по умолчанию):
        xs ( <768px )
        sm ( >=768px и <992px )
        md ( >=992px и <1200px )
        lg ( >=1200px )
        1. seventh # 0
          Идеально! Благодарю :)

      Вы должны авторизоваться, чтобы оставлять комментарии.