Приветствую всех читателей текущей статьи. В одной из предыдущих публикаций я рассказывал вам про общие принципы верстки сайтов сетками изучаемого вами фреймворка Bootstrap 3. А сейчас я хочу уделить внимание деталям работы с Bootstrap container-fluid.
Как вы уже знаете, этот инструмент отвечает за плавающие сетки. Поэтому сегодня я расскажу вам про важные классы, которые стоит знать, объясню, как делать вложенные колонки и отступы между ними, а под конец вы сможете посмотреть на реализацию полноценного лэндинга. Приступим!
Особенности плавающих сеток
Для начала напомню вам, что в фреймворке сетки называются Grid-ами. Их существует всего два вида: фиксированные, которые отмечаются классом .container, и плавающие, которые в свою очередь используют класс .container-fluid.
Несмотря на это при реализации гридов стоит придерживаться нескольких базовых правил, одно из которых – это всегда сохранять сумму всех созданных колонок одного уровня равной двенадцати.
Чем же отличаются названные выше виды сеток?
А тем, что реализация плавающих Grid-ов растягивает веб-страницу сайта на всю доступную ширину экрана.
Разберем важные классы
Благодаря системе 12-колоночных сеток можно создавать различную разметку на страницах веб-сервисов. При этом весь дизайн будет отзывчивым, а контент – структурированно распределятся по всей ширине и высоте окна.
Чтобы на выходе иметь макет страницы, необходимо уметь пользоваться встроенными классами, которые отвечают за создание строк и колонок.
Для создания строк необходимо в блоке использовать класс .row, а уже после делить его на колонки при помощи класса .col-*-*. И вот тут самое интересное!
Вместо первой звездочки стоит указать, для какого девайса верстается сайт. В Bootstrap предусмотрено 4 параметра, с помощью которых как раз и определяют группу устройств:
- Xs – для мобильных девайсов;
- Sm – для планшетов;
- Md – для компьютеров с размером экрана больше 991px;
- Lg – для компьютеров с размером экрана больше 1199px.
А вот вместо второй звездочки указывается количество ячеек, которые займет данный блок.
Главным преимуществом изучаемого механизма является то, что можно реализовывать отзывчивую верстку при помощи указания в классе col-*-* типа девайсов и при этом комбинировать их.
Практическая часть
В представленном примере я реализовал одностраничный сайт-портфолио для фотографа. Он весь построен на плавающих сетках. Обратите внимание на вложенные колонки в начале кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
footer {
padding: 25px;
background-color: #1C1C1C;
color: #fff;
font-size: 19px;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Портфолио</a>
</div>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Обо мне</a></li>
<li><a href="#">Галерея фотографий</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-center">
<h1>Приветствую всех!</h1>
<div class="row">
<div class="col-sm-12"><h2>Вы попали на персональный сайт Ивана Пупкина!</h2></div>
<div class="col-sm-12"><h3>Здесь вы сможете найти всю интересующую информацию о:</h3>
<div class="row" >
<div class="col-sm-4" ><p>Моем профессиональном опыте</p></div>
<div class="col-sm-4" ><p>Узнать о моих интересах и стиле жизни</p></div>
<div class="col-sm-4" ><p>Посмотреть галерею моих последних работ</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-3 text-center">
<h2>Мои последние фотоснимки</h2><br>
<div class="row">
<div class="col-sm-3">
<img src="http://foto.ve4erinki.net/wp-content/uploads/%D1%84%D0%BE%D1%82%D0%BE-%D0%BF%D0%BE%D1%80%D1%82%D1%84%D0%BE%D0%BB%D0%B8%D0%BE-%D0%B4%D0%BB%D1%8F-%D0%BC%D0%B0%D0%BB%D1%8C%D1%87%D0%B8%D0%BA%D0%B05.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<img src="http://fotorestyle.ru/files/portfolio/384.JPG" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
<img src="http://s017.radikal.ru/i411/1310/7a/ea80b84bff75.gif" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div><br>
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-sm-3">
<img src="http://static1.vigbo.com/u18310/21154/photos/1499063/1500-zhukova-96ddf26efb3079603b768ccdf8b14631.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<img src="http://www.fotoman.name/wp-content/uploads/2010/12/Spring2.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<img src="http://static1.gophotoweb.com/u3571/2088/photos/50417/1500-Lera_Dinaburg-746b7cf023beeac03f9b222acb128920.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-sm-3">
<img src="http://newborncocoon.ru/portfolio/newborn/images/013.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
</div><br><br>
<footer class="container-fluid text-center">
<p>Для сотрудничества звоните по номеру XXXXXXXXXX</p>
<p>Все права защищены</p>
</footer>
</body>
</html> |
Надеюсь вам понравилась публикация. Если ответ положительный, то в таком случае вступайте в ряды моих подписчиков, ведь впереди еще много всего интересного! И не забывайте делиться ссылкой на блог с друзьями. Пока-пока!
С уважением, Роман Чуешов
