Уроки по Bootstrap 4 - Часть 1

Наличие основных HTML элементов недостаточно, чтобы создать интересный и функциональный веб-сайт. Для того чтобы оживить ваш сайт, вам понадобятся стили. Bootstrap 4 имеет большое количество пользовательских классов и стилей, которые можно настроить по своему вкусу.

В прошлой статье мы поговорили о Bootstrap 4 системе сеток и дали несколько советов о том, как эффективно использовать контейнеры, колонки и строки.

В этой статье мы разберем самые полезные CSS классы в Bootstrap 4 для различных компонентов и макетов, такие как типография, кнопки, заголовки, формы и так далее, которые обычно встречаются на сайтах. С помощью Bootstrap классов, вы сможете легко и быстро добавить все эти функции на свой проект.

Что нам понадобиться:

  • CSS
  • Текстовый редактор
  • Базовые знание HTML и CSS
  • Несколько изображений

Прежде чем мы начнем, давайте создадим стандартную HTML разметку для Bootstrap, которую будем использовать для каждого примера в этой статье. Как обычно в начале HTML5 документа добавляем <! DOCTYPE>, затем перечисляем мета-теги и стили. Мы не будем подключать файл bootstrap.min.js, так как в этом уроке мы не будем затрагивать JavaScript код.

Стандартная разметка:

<!— DOCTYPE —> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap 4 CSS</title> 
<meta charset="utf-8"> 
<!— Viewport Meta Tag —> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!— Bootstrap 4 CSS —> 
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css.."> 
</head> 
<body> 
<!— YOUR CONTENT GOES HERE —> 
<div class="container"> 
</div> 
</body> 
</html>

Типография

Для типографии, по умолчанию Bootstrap 4 использует такие шрифты как - Helvetica Neue, Helvetica, Arial и sans-serif. Все эти стандартные шрифты имеются практически на всех современных компьютерах.

Весь текст в теле документа по умолчанию размером в 1rem (16px), а высота линии 1.5.

Заголовки

Шесть стандартных уровней заголовков, оформлены в Bootstrap 4 с font-weight 500, высота линии 1.1, пример:

<h1>This is H1 </h1> 
<h2>This is H2 </h2> 
<h3>This is H3 </h3> 
<h4>This is H4 </h4> 
<h5>This is H5 </h5> 
<h6>This is H6 </h6>

Результат:

Вы также можете использовать заголовки, в качестве классов для любого HTML элемента. Пример:

<p class="h1">Paragraph Class H1</p> 
<p class="h2">Paragraph Class H2</p> 
<p class="h3">Paragraph Class H3</p> 
<p class="h4">Paragraph Class H4</p> 
<p class="h5">Paragraph Class H5</p> 
<p class="h6">Paragraph Class H6</p>

Кроме того, вы можете добавить инлайн подзаголовок. Для этого используйте тег <small>. Подзаголовок будет с меньшим размером шрифта, стандартной толщины и светло-серого цвета. Пример:

<h1>This is H1 <small>Sub-heading</small></h1> 
<h2>This is H2 <small>Sub-heading</small></h2> 
<h3>This is H3 <small>Sub-heading</small></h3> 
<h4>This is H4 <small>Sub-heading</small></h4> 
<h5>This is H5 <small>Sub-heading</small></h5> 
<h6>This is H6 <small>Sub-heading</small></h6>

Результат:

Дополнительные классы Bootstrap 4 для управления размером заголовков:

  • display-1 - 3.5rem (49px)
  • display-2 - 4.5rem (63px)
  • 10.01.16
  • display-3 - 5.5rem (77px)
  • display-4 - 6rem (84px)
<h1 class="display-1">H1 Display 1</h1> 
<h1 class="display-2">H1 Display 2</h1> 
<h1 class="display-3">H1 Display 3</h1> 
<h1 class="display-4">H1 Display 4</h1>

Результат:

Ведущий текст, выделенный текст, аббревиатура, код

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

  • Класс lead - для выделения параграфа из абзаца.
  • Тег <mark> - подсветка текста.
  • <abbr&ft; - используется для подчеркивания аббревиатуры, используется вместе с атрибутом title, который отображает расшифровку аббревиатуры при наведении.
  • Класс initialism - отображает расшифровку аббревиатуры при наведении, но с меньшим размером шрифта.
  • <code> - для выделения кода в тексте.
<p class="lead">We are Bootstrapper and we care about your website's responsive! </p> 
<p>Did you know that <mark>Bootstrap 4</mark> has several new features? Believe me!</p> 
<abbr title="Doctor">Dr.</abbr> Bootstrap is here to help! <br/> 
<abbr title="Limited" class="initialism">Ltd.</abbr> is used in many companies so I am using it as well! 
<p>The <code>$myClass</code> variable is used to specify the complete package of codes. </p> 

Результат:

Цитаты

Чтобы добавить цитату или текст в кавычках, который будет выделяться от основного текста, вы можете использовать тег <blockquote> с классом blockquote.

Также вы можете добавить следующие теги:

  • <blockquote> - цитата.
  • <cite> - источник цитаты.
  • <footer> - для выравнивания и стилизации источника цитаты.

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

<blockquote class="blockquote">
<p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. </p>
<footer>Steve Jobs in<cite> ALL ABOUT STEVE</cite></footer>
</blockquote>

Результат:

Вы также можете использовать класс blockquote-reverse после класса blockquote, для того чтобы выровнять цитату справой стороны.

Списки

Bootstrap 4 имеет стили для трех основных видов списка: упорядоченный, неупорядоченный и список определений. Ниже приведен список классов, которые вы можете использовать, для компоновки списков:

  • Класс - удаление свойств list-style и left-margin.
  • Класс - отображение списка в горизонтальном виде и с небольшими отступами.
  • Класс - отображение списка определений - горизонтально.
<h4>LIST UNSTYLED</h4>  
<ul class="list-unstyled">
  <li>PHP</li>
  <li>JavaScript</li>
  <li>Ruby</li>
  <li>Python</li>
</ul>
 <h4>LIST INLINE</h4>    
 <ol class="list-inline">
  <li>Bootstrap</li>
  <li>Foundation</li>
  <li>960grid</li>
</ol>
 <h4>DEFINITION LIST HORIZONTAL</h4>    
<dl class="dl-horizontal">
<dt>Mozilla Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd>
 <dt>Chrome</dt>
<dd>Google Chrome is a browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier.</dd>
<dt>Safari</dt>
<dd>The best browser for your Mac is the one that comes with your Mac. Safari is faster and more energy efficient than other browsers, so sites are more responsive ...</dd>
</dl>

Результат:

Таблицы

В версии Bootstrap 4, добавили новый префикс, для инвертирования цвета таблицы, все остальные префиксы остались неизменны.

Дополнительные классы для стилизации таблиц:

  • table-striped - чередование фонового цвета в строках.
  • table-bordered - добавляет приятную, серую рамку вокруг таблицы.
  • table-hover - при наведении на строку, меняет цвет фона.
  • table-sm - уменьшение отступов, уплотнение таблицы.
  • table-inverse (новый) - инвертирование цветов в таблице.

table-striped

Для чередования фонового цвета в строках, добавьте класс table-striped к тегу <table>:

<table class="table table-striped">
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

Результат:

table-bordered

table-hover

table-sm

table-inverse

Классы для строк таблицы

  • table-success - устанавливает цвет фона #dff0d8.
  • table-danger - устанавливает цвет фона #f2dede.
  • table-warning - устанавливает цвет фона #fcf8e3.
  • table-info - устанавливает цвет фона #d9edf7.
  • table-active - устанавливает цвет фона #f5f5f5.
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-success">Success</td>
<td class="table-danger">Danger</td>
<td class="table-warning">Warning</td>
</tr>
<tr>
<td class="table-info">Info</td>
<td class="table-active">Active</td>
<td>Default</td>
</tr>
</tbody>
</table>

Результат:

Стиль шапки таблицы

В Bootstrap 4 присутствуют два класса для оформления шапки таблицы:

  • thead-default - светлый цвет фона.
  • thead-inverse - темный цвет фона.

thead-default

thead-inverse

Адаптивные таблицы

Просто добавьте класс .table-responsive для создания горизонтальной полосы прокрутки при просмотре на небольших экранах (до 768px).

<table class="table table-responsive">
<thead class="thead-inverse">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
</table>

Результат:

Jumbotron

Jumbotron - большая область контента, которая увеличивает размер заголовков и добавляет дополнительные отступы. Присутствуют два класса - .jumbotron (фиксированная ширина) и .jumbotron.

Для использования Jumbotron, просто создайте контейнер с классом .jumbotron или .jumbotron:

<div class="jumbotron">
<h1>Hello There!</h1>
<p>This is Jumbotron and you are using Bootstrap 4 Alpha.</p>
</div>

Результат:

Хлебные крошки

Один из лучших способов отображения информации в виде иерархии - хлебные крошки.

В Bootstrap 4, хлебные крошки являются неупорядоченным списком, для их создания используйте класс .breadcrumb. Текущая страница обозначается классом .active:

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Work</a></li>
<li class="active">Wordpress</li>
</ul>

Результат:

Пагинация

Bootstrap 4 предлагает интерфейс с нумерацией страниц в виде неупорядоченного списка, с оболочкой <nav>, которая имеет специальный класс пагинации.

Все классы пагинации:

  • active - выделение активной страницы.
  • disabled - отключение страницы.
  • pagination-lg и pagination-sm - размер пагинации.
<nav>
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="disabled"><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>

Результат:

Простая пагинация

Если вам нужно создать простую пагинацию страниц (кнопки Назад-Вперед), вы можете воспользоваться классом .pager, в котором добавить две соответствующие ссылки:

<nav>
<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>
</nav>

Метки

Метки - отличный способ отображения подсказок. В Bootstrap 4, был представлен класс .label-pill.

Для создания метки просто добавьте класс .label вместе с выбранным классом .label-* к элементу span, есть шесть классов на выбор:

  • label-default
  • label-primary
  • label-success
  • label-info
  • label-danger
  • label-warning
<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

Результат:

Кнопки

Для создания кнопок в Bootstrap 4 используйте класс btn вместе с выбранным классом btn-* к элементу button, список классов на выбор:

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-warning
  • btn-danger
  • btn-link
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Результат:

Кнопки с обводкой

Вы можете создать интересные кнопки, с цветной рамкой в качестве обводки, используя класс .btn-*-outline.

<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>

Результат:

Изображения

Для стилизации изображений, присутствуют следующие классы:

  • img-rounded - добавление border-radius в 3rem
  • img-circle - border-radius в 50%
  • img-thumbnail - добавление отступов и серой рамки.
<img src="http://goo.gl/KJ4Js8" width="200" class="img-rounded" alt="">
<img src="http://goo.gl/lyGPzm" width="200" class="img-circle" alt="">
<img src="http://goo.gl/vEdKOG" width="200" class="img-thumbnail" alt="">

Результат:

Перевод статьи Bootstrap 4 CSS Tutorial (Part 1)

Тэги: Frameworkbootstrap

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.