Давайте теперь рассмотрим создание дополнительных рядов и ячеек. Для этого я подготовил файл, с которым мы будем работать. Посмотреть его можно здесь. Сейчас это просто страница с неотформатированной информацией, давайте это исправим.
Если взглянуть на код, то мы видим 4 строки (это показано в комментариях). Давайте с помощью Bootstrap их и обозначим.
<!-- row 1 -->
<header class="row">
<a href="#"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>
<img src="img/animals.jpg" alt="">
</header>
<!-- row 2 -->
<div class="row">
<h1> We treat your pets like our own</h1>
<p>At Wisdom Pet Medicine, we strive to blend the best in traditional and alternative healing techniques to diagnose and treat companion animals, including dogs, cats, birds, reptiles, rodents, and fish. </p>
</div>
<!-- row 3 -->
<div class="row">
<p><img src="img/gsd.jpg" alt=""></p>
<h4>Thanks for helping our German Shepherd</h4>
<p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
<p><a href="#">Read more >></a></p>
<p><img src="img/kitten.jpg" alt=""></p>
<h4>Our diabetic kitty is better</h4>
<p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
<p><a href="#">Read more >></a></p>
<p><img src="img/bulldog.jpg" alt=""></p>
<h4>Our grape-loving dog</h4>
<p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
<p><a href="#">Read more >></a></p>
<p><img src="img/goldfish.jpg" alt=""></p>
<h4>A dog antibiotic cured our fish</h4>
<p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
<p><a href="#">Read more >></a></p>
</div>
<!-- row 4 -->
<footer class="row">
<p>This not a real veterinary medicine site, and is not meant to diagnose or offer treatment. Please see your veterinarian for all matters related to your pet's health.</p>
<p>Wisdom Pet Medicine is a training brand owned by lynda.com.</p>
</footer> Как мы видим, мы добавили классы "row" для тегов div, header, footer. Использовать теги header и footer не обязательно, можно было их смело заменять на div, но семантически так более правильно.
Настройка 3 строки
Теперь нам нужно добавить колонки. Лучше начать с 3 строки, т.к. там больше всего разметки и нужно это сделать в 4 колонки. Делать будем так: на большом экране все 4 колонки будут в ряд, а когда мы его уменьшим, то будут смешаться вниз 2 колонки, т.е. будет 2 ряда по 2 фотографии. Разбивать 2 фотографии по одной мы не будем. И так, поехали.
<!-- row 3 -->
<div class="row">
<div class="col-md-3">
<p><img src="img/gsd.jpg" alt=""></p>
<h4>Thanks for helping our German Shepherd</h4>
<p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-3">
<p><img src="img/kitten.jpg" alt=""></p>
<h4>Our diabetic kitty is better</h4>
<p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-3">
<p><img src="img/bulldog.jpg" alt=""></p>
<h4>Our grape-loving dog</h4>
<p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-3">
<p><img src="img/goldfish.jpg" alt=""></p>
<h4>A dog antibiotic cured our fish</h4>
<p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
<p><a href="#">Read more >></a></p>
</div>
</div> Как видно из кода, мы каждый наш элемент (а это картинка, заголовок, текст, кнопка далее) обернули в div с классом col-md-3. Т.е. это колонка средней длины. Цифра 3 означает, что данный блок будет занимать 3 части из 12 (т.к. мы используем двинадцати колоночную сетку) и поэтому сумма цифр класса всех колонок должна равняться 12, что у нас и получилось. Но если мы оставим так, то получится не очень хорошо. При уменьшении окна меньше 992px они получаются все друг под другом, а у нас должны быть 2 колонки рядом. Давайте посмотрим демо.
Теперь нам надо улучшить код.
<!-- row 3 -->
<div class="row">
<div class="col-md-3 col-xs-6">
<p><img src="img/gsd.jpg" alt=""></p>
<h4>Thanks for helping our German Shepherd</h4>
<p>During the summer, my German Shorthair Pointer, Tonto, began to have severe redness and itching on his belly and feet. Through diagnostic testing, we learned that Tonto is severely allergic to over a dozen kinds of grass pollens.</p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-3 col-xs-6">
<p><img src="img/kitten.jpg" alt=""></p>
<h4>Our diabetic kitty is better</h4>
<p>When Samantha, our sweet kitten, began sleeping all the time and urinating excessively, we brought her to see the specialists at Wisdom. After running a blood test, Dr. Winthrop confirmed what we all feared – Samantha was showing signs of diabetes. </p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-3 col-xs-6">
<p><img src="img/bulldog.jpg" alt=""></p>
<h4>Our grape-loving dog</h4>
<p>The staff at Wisdom worked tirelessly to determine why our three-year old bulldog, Roxie, started going into sudden kidney failure. They stabilized her and provided fluids until her kidneys were again functioning normal, but it was still a mystery as to what caused her health to decline so quickly. </p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-3 col-xs-6">
<p><img src="img/goldfish.jpg" alt=""></p>
<h4>A dog antibiotic cured our fish</h4>
<p>Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments. When our 13-year old goldfish, McAllister, turned from silvery white to an angry red, we called around, urgently trying to find a veterinarian who could help. Wisdom not only got us in the same day, but also was able to diagnose McAllister as having a severe case of septicemia. </p>
<p><a href="#">Read more >></a></p>
</div>
</div> К нашему классу мы добавили еще один класс col-xs-6, который означает следующее. Мы решили, что при разрешении меньше 992px, нам нужно оставлять 2 колонки, а не одну, для этого мы взяли очень маленькую сетку, которая неделима, как мы знаем. Таким образом, чтобы получить 2 элемента в один ряд, нам нужно чтобы сумма цифр их классов равнялась 12, т.е. 6+6. Итого у нас получается 2 строчки с суммами 6+6. Может быть это сложно для понимания пока что, но вы сами поиграйтесь с классами, поменяйте им сетку, поменяйте цифры и посмотрите на результат. Если вдруг чего будет не понятно, то в комментарии пишите, всегда помогу, а пока смотрим демо.
Настройка 1 строки
В первой строке нам нужно сделать, чтобы логотип был слева, а животные справа, разделить их и оставить немного места.
<!-- row 1 -->
<header class="row">
<div class="col-lg-6 col-md-7">
<a href="#"><img src="img/logo.png" alt="Wisdom Pets. click for home."></a>
</div>
<div class="col-lg-6 col-md-5">
<img src="img/animals.jpg" alt="">
</div>
</header> Так, что же мы тут сделали?! Как всегда обернули логотип и картинку в div и задали сначала большую сетку, а потом среднюю. В данном примере мы могли бы задать сразу среднюю сетку, но я сначала сделал большу — посмотрел, потом сделал серднюю — посмотрел и решил оставить. Среднюю сетку мы разбили как 7 к 5, чтобы логотип и картинка находились дальше друг от друга.
И остался последний штрих в данном уроке. Как вы заметили, текст слева залазит за экран браузера, справа тоже и появляется полоса прокрутки. Нам всю нашу конструкцию нужно обернуть в <div class="container">...</div>, т.е. открываем после <body>, а закрываем перед </body>
<body>
<div class="container">
...
</div>
</body> Ну вот и все, давайте теперь посмотрим окончательное демо.
Так же можете скачать урок.