Bootstrap включает оформление для семи видов кнопок:
Как создать кнопки, оформить текст и картинки в Bootstrap 3
Здравствуйте! Продолжаем серию статей про фреймворк Бутстрап3 и если в прошлой статье разговор шел про как задать смещение между клонками, что может быть полезно вам в дальнейшем.
В этой статье мы равссмотрим возможности оформления текста средствами Bootstrap а также про использование отзывчивых классов, которые позволяют скрывать или показывать элементы веб-страницы, когда изменяется ширина экрана браузера. И еще мы расмотрим, как с помощью этого фреймворка вы можете создать кнопки и настраивать их. Ну и наконц разберем как в Бутстрап 3 сделать картинки адаптивніми (меняющими размер при изменении ширины экрана) и какие классы к ним для стилизации. Ну что готовы. Тогда начинаем.
Стилизация текста
Кроме того, фреймворк добавляет новые стили для обыкновенного текста и строчных элементов. Он определяет стандартный размер любого текста внутри тега <body> в 14px и высоту строки в 1,428. Для абзацев меняются внешние отступы (margin) сверху и снизу: теперь это половина высоты строки, по умолчанию 10px.
Давайте посмотрим на примеры и разберёмся с текстом в бутстрапе.
Заголовки
Заголовки в бутстрапе выглядят так:
Заголовок h1, 36px
Заголовок h2, 30px
Заголовок h3, 24px
Заголовок h4, 18px
Заголовок h5, 14px
Заголовок h6, 12px
Элемент <small> в заголовке
Также можно добавить пояснительный текст в теге <small> и разместить его в заголовке, он будет выглядеть так:
Заголовок h1 пояснительный текст
Заголовок h2 пояснительный текст
Заголовок h3 пояснительный текст
Заголовок h4 пояснительный текст
Заголовок h5 пояснительный текст
Заголовок h6 пояснительный текст
Тег <mark>
Элемент <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.
Текст слева (ну, как обычно)
Отцентрованный текст
Текст справа
Цитата, <blockquote>
Цитаты в Bootstrap выглядят так:
Целый год между нами происходило что-то вроде интеллектуальной близости. С оттенком вражды и разврата.
Код примера:
<blockquote> Целый год между нами происходило что-то вроде интеллектуальной близости. С оттенком вражды и разврата <footer>Сергей Довлатов</footer> </blockquote>
Чтобы добавить цитате равнение по правому краю, добавьте ей класс .blockquote-reverse:
Танцювала риба з раком, риба з раком, а петрушка з пастернаком, з пастернаком!
А цибуля з часником, а дівчина з козаком!
Трансформация текста
Трансформировать текст можно простым добавлением классов: нижний, верхний регистр и заглавные буквы.
нижний регистр
верхний регистр
заглавные буквы
<p class="text-lowercase">нижний регистр</p> <p class="text-uppercase">верхний регистр</p> <p class="text-capitalize">заглавные буквы</p>
<dl>
Список описаний — не самый популярный тег, но его можно удобно использовать для быстрого создания списков с пояснениями.
- Beatles
- – Liverpool, Great Britain
- Bon Jovi
- – New Jersey, USA
<dl> <dt>Beatles</dt> <dd>- Liverpool, Great Britain</dd> <dt>Bon Jovi</dt> <dd>- New Jersey, USA</dd> </dl>
<code>
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 3.
Чтобы кнопка отображалась в нужном вам стиле, присвойте ей соответствующий класс:
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Данный пример показывает, каким должен быть код для кнопок из примера:
<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-lg
- .btn-md
- .btn-sm
- .btn-xs
Блочные кнопки
Вы можете превратить строчные кнопки в блочные элементы. Для этого присвойте им класс .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 делает ее неактивной.
Полная справка по кнопкам в Bootstrap
| Класс | Описание |
|---|---|
| .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 | Неактивная кнопка |
Как стилизовать картинки на Бутстрап 3.
Адаптивное изображение — это изображение, которое подстраивается под ширину элемента, в котором оно расположено.
Т.е. оно отвечает следующим условиям:
- если ширина изображения меньше ширины элемента, в котором оно расположено, то размеры этого изображения не изменяются.
- если ширина изображения больше ширины элемента, в котором оно расположено, то ширина изображения приравнивается к доступной ширине родительского элемента. При этом высота данного изображения уменьшается пропорционально относительно его ширины.
Как сделать изображение адаптивным
Придание изображению адаптивности осуществляется:
- в Twitter Bootstrap 3 посредством добавления класса .img-responsive к тегу img.
- в Twitter Bootstrap 4 посредством добавления класса .img-fluid к тегу img.
Эти классы применяет к изображению CSS свойства max-width:100% и height:auto.
-
- <!— Bootstrap 3 —>
<img src=»…» class=»img-responsive»>
<!— Bootstrap 4 —>
<img src=»…» class=»img-fluid»>
Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:
-
- /* 1 Способ — Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
img {
display: inline-block;
height: auto;
max-width: 100%;
}
-
- /* 2 Способ — Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
img {
display: block;
height: auto;
max-width: 100%;
}
-
- /* 3 Способ — Придать адаптивность всем изображениям, расположенных в элементе с id=»main». При этом данные изображения будут себя ввести как блочные элементы (block) */
#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, .pull-right и .center-block могут применяться для выравнивания изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы. После их применения изображения становится блочными.
Классы .text-left, .text-center и .text-right могут быть использованы только для изменения расположения изображений, которые ведут себя как строчно-блочные (inline-block) элементы.
Классы .pull-left, .pull-right и .center-block могут применяться для выравнивания изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы. После их применения изображения становится блочными.
Классы .text-left, .text-center и .text-right могут быть использованы только для изменения расположения изображений, которые ведут себя как строчно-блочные (inline-block) элементы.
Например, для того чтобы расположить изображение по левому краю к нему необходимо добавить класс .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>
Использование отзывчивых классов в Бутстрап 3.
До сих пор мы с вами рассматривали случаи, когда расположение элементов практически не меняется относительно друг друга. Но как быть, если вдруг потребуется переставить элементы местами или кое-что убрать для маленьких экранов? Напрямую это сделать не получится, поэтому пойдём на небольшую хитрость — добавим два одинаковых элемента в разных местах и будем один прятать, а другой отображать. 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 — наоборот, показывать. При просмотре на широком экране заголовок будет всегда вверху, а на узком внизу.
Поделиться
Твитнуть
Поделиться
admin administrator
Об авторе