Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Инструкции Bootstrap Bootstrap 3 - Резиновый макет сайта

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