Как создать сайт

Как создать кнопки, оформить текст и картинки в 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> контрастный стиль, фон и красный цвет:

Читайте также  Bootstrap - что это такое

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

Читайте также  Как установить 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.

    1. <!— Bootstrap 3 —>

<img src=»…» class=»img-responsive»>

<!— Bootstrap 4 —>

<img src=»…» class=»img-fluid»>

Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:


    1. /* 1 Способ — Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */

                    img {

                      display: inline-block;

                         height: auto;

                      max-width: 100%;

                         }

    1. /* 2 Способ — Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */

                      img {

                             display: block;

                            height: auto;

                            max-width: 100%;

                      }

    1. /* 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).

Читайте также  Как задать смещение между колонками в Bootstrap 3

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

27 + = 29

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: