Типографика, blockquote, small в Bootstrap 3

С Bootstrap 3 идут различные стили, которые вы можете использовать. Пройдя до данного урока вы уже должны были заменить, что с Bootstrap'ом идут тонны стайлинга, хотя мы еще ничего даже и применить не успели.

Давайте взглянем на нашу прошлую работу и попробуем ее еще улучшить (демо), добавим блок цитаты и уменьшим шрифт с помощью тегов <blockquote> и <small> соответственно.

Хочу обратить ваше внимание на Джамботрон. Если уменьшить браузер до минимума, то заголовок меняет свой размер автоматически.

Возьмем необходимый нам текст в <blockquote> и смотрим на результат

<div class="col-md-3 col-xs-6">
    <p><img src="img/gsd.jpg" alt=""></p>
    <h4>Thanks for helping our German Shepherd</h4>
    <blockquote>Tonto is severely allergic to over a dozen kinds of grass pollens. Thanks to Wisdom for the testing that tracked down his allergy!</blockquote>
    <p><a href="#">Read more >></a></p>
</div>

Как мы видим, у нашего текста поменялся стиль и добавилась левая серая полоска, которая говорит нам о том, что это цитата. Теперь, когда вы встретите нечто подобное на других сайтах, вы цитату сможете отлечить от другого стилизованного текста. Хотя, как по мне, можно что-то и получше было сделать, понаглядней.

Более подробно типографику можно посмотреть на сайте getbootstrap.com в разделе CSS.

Теперь давайте добавим <small> и посмотрим на результат

<footer class="row">
     <p><small>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.</small></p>
     <p><small>Wisdom Pet Medicine is a training brand owned by lynda.com.</small></p>
</footer>

Как видим, с тегом <small> шрифт наш стал меньше. Но хочу обратить внимание, что данным тегом лучше не пользоваться, а уменьшение шрифта делать с помощью CSS, так будет более правильно.

Можете посмотреть готовое решение, а так же скачать урок.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector