Настройка панелей в Bootstrap 3

У нас есть исходный файл, который нам нужно преобразовать и получить вот это. Для этого составим план работ:

1. Создать привлекательную панель слева
2. Закруглить углы у картинки с дядькой и попугаем
3. Выделить блоки внизу в рамки
4. Эти самые блоки переделать, чтобы не было глюков при маленьком размере экрана (проверьте их в исходном файле для начала)

Панель

<div class="panel panel-default">
    <div  class="panel-heading">
    	<h3>Keeping your pet's chompers clean and healthy</h3>
    </div>
    <div class="panel-body">
        <p>You know the importance of brushing your own teeth, but did you know that dogs and cats also need regular attention to their pearly whites? Poor dental hygiene in pets can lead to periodontal disease, a bacterial infection which causes bad breath, drooling, tooth decay, and tooth loss.</p>
        <p>As always, if you have questions about your pet’s dental or health care, please <a href="#">contact Wisdom Pet Medicine</a> for advice.</p>
    </div>
</div>

Для этих целей у нас есть целый компонент "Панель", с которым можно ознакомиться на getbootstrap.com. В нашем примере мы задали сам блок panel panel-default, задали заголовок и основное тело панели. Есть еще и другие настройки, но в данном примере они нам не понадобились.

Закругляем углы

Закруглить углы нет ничего проще — нужно просто к картинке добавить класс img-rounded

Выделить блоки

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

<div class="thumbnail">
    <div class="caption">
    	<h4><span class="glyphicon glyphicon-cutlery"></span> Diet Plans</h4>
		<p>Wisdom veterinarians have all had extensive training in pet nutrition and are your best resources when considering changing your pet’s diet. </p>
 		<p><a href="#" class="btn btn-info">Read more >></a></p>
	</div>
</div>

Просто основному контейнеру добавляйте класс thumbnail и все будет отлично.

Переделываение блоков

А вот про отмену обтекания мы еще не говорили, поэтому давайте рассмотрим, что мы сделали в данном примере. Мы добавили следующий код

<article class="col-lg-offset-1 col-sm-offset-1 col-lg-8 col-sm-7 col-lg-push-3 col-sm-push-4">
...
 <div class="clearfix visible-xs visible-lg"></div>
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            ...
        </div>
        <div class="col-lg-3 col-xs-6">
            ...
        </div>
        <div class="clearfix visible-md visible-xs"></div>
        <div class="col-lg-3 col-xs-6">
        	...
        </div>
        <div class="col-lg-3 col-xs-6">
        	...
         </div>
    </div><!-- end nested row 3 -->
</article>
<aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8">
	...
 </aside>

Здесь у нас 2 значимых строки:

<div class="clearfix visible-xs visible-lg"></div>

Данная строка убирает обтекание, чтобы блоки не заезжали на картинку. Этот <div> показывается при больших и очень маленьких размерах экрана, при остальных его нет.

<div class="clearfix visible-md visible-xs"></div>

Это тоже самое, только <div> показывается при средних и очень маленьких размерах экрана.

За счет этих строчек мы убираем ненужное нам обтекание.

Скачать урок