Четверг, 10 января 2019 10:13

Классы Bootstrap 4 для оформления текста

Автор
Оцените материал
(0 голосов)

Классы Bootstrap 4 для оформления текста

Bootstrap 4 как продолжение тройки копирует почти все, что было раньше, но в нем есть и изменения. В этой статье будут приведены классы, которые используют для форматирования текста. Значит если у вас шаблон сайта сделан на Bootstrap 4 то можно смело вставлять в редактор такие классы и они будут делать то, что они должны делать по смыслу.

<div class="container">

<h2>Alerts</h2>
 <p>Alerts are created with the alert class, followed by a contextual color classes:</p>

<div class="alert alert-success"><strong>Success!</strong> This alert box could indicate a successful or positive </div>

<div class="alert alert-info" /><strong>Info!</strong> This alert box could indicate a successful or positive </div>

<div class="alert alert-warning"> <strong>Warning!</strong> This alert box could indicate a warning that might need attention. </div>


<div class="alert alert-danger"> <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action. </div>


<div class="alert alert-primary">   <strong>Primary!</strong> Indicates an important action. </div>


<div class="alert alert-secondary">   <strong>Secondary!</strong> Indicates a slightly less important action. </div>


<div class="alert alert-dark">   <strong>Dark!</strong> Dark grey alert. </div>


<div class="alert alert-light">   <strong>Light!</strong> Light grey alert. </div>


</div>

Класс "card" в Bootstrap 4 представляет собой рамку с некоторым наполнением вокруг её содержимого. Она включает в себя параметры для верхних колонтитулов, содержание, цвета и т.д.

<div class="card bg-primary text-white"> <div class="card-body">Primary card</div> </div>

<div class="card bg-success text-white"> <div class="card-body">Success card</div> </div>

<div class="card bg-info text-white"> <div class="card-body">Info card</div> </div>

<div class="card bg-warning text-white"> <div class="card-body">Warning card</div> </div>

<div class="card bg-danger text-white"> <div class="card-body">Danger card</div> </div>

<div class="card bg-secondary text-white"> <div class="card-body">Secondary card</div> </div>

<div class="card bg-dark text-white"> <div class="card-body">Dark card</div> </div>

<div class="card bg-light text-dark"> <div class="card-body">Light card</div></div>

Выпадающий текст

Lorem ipsum dolor text....

<button type="button" class="btn btn-primary"  data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

Перелистывание

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

Прочитано 165 раз Последнее изменение Суббота, 16 февраля 2019 19:42
Другие материалы в этой категории: « Создание ссылок HTML »

Оставить комментарий

Убедитесь, что Вы ввели всю требуемую информацию, в поля, помеченные звёздочкой (*). HTML код не допустим.