нояб

2016

Как создать кнопки, оформить текст и картинки в Bootstrap 3

Оцените материал

(0 голосов)

Здравствуйте! Продолжаем серию статей про фреймворк Бутстрап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.

Bootstrap включает оформление для семи видов кнопок:

Чтобы кнопка отображалась в нужном вам стиле, присвойте ей соответствующий класс:

.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:


<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 — наоборот, показывать. При просмотре на широком экране заголовок будет всегда вверху, а на узком внизу.

Прочитано 982 раз Последнее изменение Вторник, 25 июля 2017 08:21

Опубликовано в CSS