Bootstrap включает оформление для семи видов кнопок:
Здравствуйте! Продолжаем серию статей про фреймворк Бутстрап3 и если в прошлой статье разговор шел про как задать смещение между клонками, что может быть полезно вам в дальнейшем.
В этой статье мы равссмотрим возможности оформления текста средствами Bootstrap а также про использование отзывчивых классов, которые позволяют скрывать или показывать элементы веб-страницы, когда изменяется ширина экрана браузера. И еще мы расмотрим, как с помощью этого фреймворка вы можете создать кнопки и настраивать их. Ну и наконц разберем как в Бутстрап 3 сделать картинки адаптивніми (меняющими размер при изменении ширины экрана) и какие классы к ним для стилизации. Ну что готовы. Тогда начинаем.
Кроме того, фреймворк добавляет новые стили для обыкновенного текста и строчных элементов. Он определяет стандартный размер любого текста внутри тега <body> в 14px и высоту строки в 1,428. Для абзацев меняются внешние отступы (margin) сверху и снизу: теперь это половина высоты строки, по умолчанию 10px.
Давайте посмотрим на примеры и разберёмся с текстом в бутстрапе.
Заголовки в бутстрапе выглядят так:
Также можно добавить пояснительный текст в теге <small> и разместить его в заголовке, он будет выглядеть так:
Элемент <mark> будет оформлен в таком стиле:
Ваня зпт всё пошло не так зпт подробности письмом тчк
В бутстрапе есть набор классов для выравнивания текста:
<p class="text-left">Равнение по левому краю</p> <p class="text-center">Текст по центру</p> <p class="text-right">Равнение по правому краю</p> <p class="text-justify">Равнение по обоим краям</p> <p class="text-nowrap">Текст без переносов</p>
Больше не нужно добавлять дополнительные классы для равнения с разными вариантами text-align в css.
Текст слева (ну, как обычно)
Отцентрованный текст
Текст справа
Цитаты в Bootstrap выглядят так:
Целый год между нами происходило что-то вроде интеллектуальной близости. С оттенком вражды и разврата.
Код примера:
<blockquote> Целый год между нами происходило что-то вроде интеллектуальной близости. С оттенком вражды и разврата <footer>Сергей Довлатов</footer> </blockquote>
Чтобы добавить цитате равнение по правому краю, добавьте ей класс .blockquote-reverse:
Танцювала риба з раком, риба з раком, а петрушка з пастернаком, з пастернаком!
А цибуля з часником, а дівчина з козаком!
Трансформировать текст можно простым добавлением классов: нижний, верхний регистр и заглавные буквы.
нижний регистр
верхний регистр
заглавные буквы
<p class="text-lowercase">нижний регистр</p> <p class="text-uppercase">верхний регистр</p> <p class="text-capitalize">заглавные буквы</p>
Список описаний — не самый популярный тег, но его можно удобно использовать для быстрого создания списков с пояснениями.
<dl> <dt>Beatles</dt> <dd>- Liverpool, Great Britain</dd> <dt>Bon Jovi</dt> <dd>- New Jersey, USA</dd> </dl>
Bootstrap добавляет строчным элементам <code> контрастный стиль, фон и красный цвет:
Примеры блочных элементов: pre, div и p.
Код примера:
Примеры блочных элементов: <code>pre</code>, <code>div</code> и <code>p</code>.
В бутстрапе есть набор классов для выделения текста цветом или фоном: .text-muted, .text-primary, .text-success, .text-info, .text-warning, и .text-danger.
Грусть-печаль-тоска.
Важный текст.
Хорошо там, где?
Иногда вы едите тигра, а иногда тигр ест вас.
В Польше есть памятник Википедии.
Мы найдем вас и сделаем счастливыми.
<p class="text-muted">Грусть-печаль-тоска.</p> <p class="text-primary">Важный текст.</p> <p class="text-success">Хорошо там, где?</p> <p class="text-info">Иногда вы едите тигра, а иногда тигр есть вас.</p> <p class="text-warning">В Польше есть памятник Википедии.</p> <p class="text-danger">Мы найдем вас и сделаем счастливыми.</p>
Классы для контекстного фона следующие: .bg-primary, .bg-success, .bg-info, .bg-warning, и .bg-danger.
Никогда не доверяйте людям, которые не умеют писать грамотно.
Вы успешно прочли предыдущие абзацы.
Пожалуйста, закройте рот с другой стороны.
Вы и правда считаете, что выключили утюг?
Внимание: все ваши корованы разграблены.
Вот вам общий список классов, которыми можно пользоваться в бутстрапе для оформления текстов и других элементов.
Класс | Описание |
---|---|
.lead | Выделяет параграф увеличением размера текста |
.small | Уменьшает размер текста до 85% от родительского элемента |
.text-left | Выравнивание текста по левому краю |
.text-center | Центрирование текста |
.text-right | Выравнивание текста по правому краю |
.text-justify | Выравнивание текста по левому и правому краям |
.text-nowrap | Текст без переносов строк |
.text-lowercase | Текст в нижнем регистре |
.text-uppercase | Текст в верхнем регистре |
.text-capitalize | Каждое Слово С Заглавной Буквы |
.list-unstyled | Убирает стандартное оформление для списка и отступы для его элементов. Работает как для <ul>, так и для <ol>. Стили уберутся только для элементов первого уровня вложенности. Чтобы убрать стили для другой вложенности, используйте это класс снова для их родительских элементов. |
.list-inline | Отображает все элементы списка в одну строку, превращая их в строчные |
.dl-horizontal | Используется для terms (<dt>) и descriptions (<dl>) в <dl> (списке описаний, description list). Вместо вертикального отображения описания под заголовком пары располагаются горизонтально. В случаях небольших экранов списки описаний с таким классом будут отображаться как обычно, вертикально ориентированными. |
Bootstrap включает оформление для семи видов кнопок:
Чтобы кнопка отображалась в нужном вам стиле, присвойте ей соответствующий класс:
Данный пример показывает, каким должен быть код для кнопок из примера:
<button type="button" class="btn btn-default">Стандартная</button> <button type="button" class="btn btn-primary">Основная</button> <button type="button" class="btn btn-success">Подтвердить</button> <button type="button" class="btn btn-info">Уведомление</button> <button type="button" class="btn btn-warning">Внимание</button> <button type="button" class="btn btn-danger">Отмена</button> <button type="button" class="btn btn-link">Ссылка</button>
Стили кнопок в Bootstrap могут применяться к элементам <button> и <input type=»button»>, а также к ссылкам <a>. Кнопке нужно присвоить класс .btn и один из классов, чтобы добавить ей стиль. Для примера возьмем .btn-default.
<a class="btn btn-default" href="#" role="button">Кнопка</a> <button class="btn btn-default" type="submit">Кнопка</button> <input class="btn btn-default" type="button" value="Кнопка">
В результате мы получим три одинаково выглядящих элемента.
Bootstrap позволяет менять размер кнопки при помощи дополнительного класса. По умолчанию у вас есть выбор из четырех размеров кнопки:
Код кнопок из примера:
<button type="button" class="btn btn-primary btn-lg">Большая</button> <button type="button" class="btn btn-primary btn-md">Средняя</button> <button type="button" class="btn btn-primary btn-sm">Маленькая</button> <button type="button" class="btn btn-primary btn-xs">Еще меньше</button>
Классы, которые определяют размеры кнопок:
Вы можете превратить строчные кнопки в блочные элементы. Для этого присвойте им класс .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Блочная кнопка</button> <button type="button" class="btn btn-default btn-lg btn-block">Блочная кнопка</button>
Кнопке можно назначить активный (нажатый) вид, а также заблокированное состояние. Класс .active отображает, как кнопка выглядит во время нажатия, а класс .disabled делает ее неактивной.
Класс | Описание |
---|---|
.btn | Добавляет базовое оформление к кнопке |
.btn-default | Стандартный вид кнопки |
.btn-primary | Основная кнопка |
.btn-success | Подтверждение |
.btn-info | Кнопка для информационных сообщений |
.btn-warning | Кнопка для предупреждающих сообщений |
.btn-danger | Кнопка отмены, очистки формы |
.btn-link | Кнопка, которая выглядит как ссылка |
.btn-lg | Большой размер кнопки |
.btn-sm | Маленькая размер |
.btn-xs | Еще меньший размер |
.btn-block | Блочный вид кнопки (она занимает всю ширину родительского элемента) |
.active | Кнопка выглядит нажатой |
.disabled | Неактивная кнопка |
Адаптивное изображение — это изображение, которое подстраивается под ширину элемента, в котором оно расположено.
Т.е. оно отвечает следующим условиям:
Придание изображению адаптивности осуществляется:
Эти классы применяет к изображению CSS свойства max-width:100% и height:auto.
<img src=»…» class=»img-responsive»>
<!— Bootstrap 4 —>
<img src=»…» class=»img-fluid»>
Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
img {
display: block;
height: auto;
max-width: 100%;
}
#main img {
display: block;
height: auto;
max-width: 100%;
}
Данное правило необходимо добавить в CSS файл, который должен быть подключен после файла bootstrap.css.
В Twitter Bootstrap 3 и 4 можно с помощью соответствующих классов сделать изображение с закругленными углами (.img-rounded), заключить его в рамку (.img-thumbnail) или придать ему форму круга (.img-circle).
<img src=»…» alt=»…» class=»img-rounded»>
<img src=»…» alt=»…» class=»img-circle»>
<img src=»…» alt=»…» class=»img-thumbnail»>
Изменить расположение изображения в Twitter Bootstrap можно с помощью вспомогательных классов float (.pull-left и .pull-right), класса .center-block и классов для выравнивания текста (.text-left, .text-center и .text-right).
Например, для того чтобы расположить изображение по левому краю к нему необходимо добавить класс .pull-left:
<img src=»…» class=»pull-left» alt=»…»>
Например, для того чтобы расположить изображение по правому краю к нему необходимо добавить класс .pull-right:
<img src=»…» class=»pull-right» alt=»…»>
Например, для того чтобы выровнять изображение по центру к нему необходимо добавить класс .center-block или поместить его в контейнер div с классом .text-center:
<!—1 Способ. Добавить к изображению класс .center-block—>
<!—Применяется для центрирования изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы—>
<!—После применения данного класса изображение становится блочным (display:block)—>
<img src=»…» class=»img-rounded center-block» alt=»…»>
<!—2 Способ. Поместить изображение в элемент div, который имеет класс .text-center—>
<!—Применяется для центрирования изображений, которые ведут себя как строчно-блочные (inline-block) элементы—>
<div class=»text-center»>
<img src=»…» class=»img-rounded» alt=»…»>
</div>
До сих пор мы с вами рассматривали случаи, когда расположение элементов практически не меняется относительно друг друга. Но как быть, если вдруг потребуется переставить элементы местами или кое-что убрать для маленьких экранов? Напрямую это сделать не получится, поэтому пойдём на небольшую хитрость — добавим два одинаковых элемента в разных местах и будем один прятать, а другой отображать. Bootstrap предлагает два набора классов для сокрытия и показа элементов в зависимости от ширины окна — hidden-xs и visible-xs-block. Принцип тот же, что и при работе с колонками, вместо xs подставляем нужное ключевое слово. В примере 2 показано как «перемещать» таким образом заголовок.
Пример. Изменение положения заголовка
<div class="container"> <div class="row"> <div class="col-xs-12 hidden-xs">Заголовок</div> <div class="col-xs-12 col-sm-8 col-md-8">Колонка 1</div> <div class="col-xs-12 col-sm-4 col-md-3 col-md-offset-1">Колонка 2</div> <div class="col-xs-12 visible-xs-block">Заголовок</div> </div> </div>
Результат данного примера показан на рисунке.
Заголовок внизу колонок при узкой ширине окна
В данном примере класс hidden-xs означает, что колонку для смартфонов следует прятать, а visible-xs-block — наоборот, показывать. При просмотре на широком экране заголовок будет всегда вверху, а на узком внизу.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Об авторе