Bootstrap 5 е в алфа версия, когато това е написано и подлежи на промяна.

Bootstrap е популярна UI библиотека за всякакви JavaScript приложения.

В тази статия ще разгледаме как да персонализирате карти с Bootstrap 5.

Оразмеряване

Можем да променим ширината на картата с класовете на колоните.

Например, можем да напишем:

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Имаме 2 карти с класове col-sm-6, за да ги накараме да заемат половината от ширината на прозореца за изглед, ако достигне точката на прекъсване sm или по-широка.

Използване на помощни програми

Също така можем да използваме помощните класове, за да променим ширината на картата.

Например, можем да напишем:

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

за да направите карта 75% от ширината на екрана.

w-75 е класът, който го прави такъв.

Използване на персонализиран CSS

За да променим размерите, можем също да използваме персонализиран CSS.

Например, можем да напишем:

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

за да стане ширината на картата 20 rem.

Подравняване на текст

Подравняването на текста може да се промени.

Например, можем да напишем:

<div class="card text-center" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

за да направите текстовия център с класа .text-center.

Можем също да използваме класа .text-right за дясно подравняване на текста:

<div class="card text-right" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Навигация

Можем да добавим навигация в горната част на картата.

Например, можем да напишем:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Добавяме ul с приложените към него класове nav.

И имаме li s с nav-item класове.

Сега имаме навигационна лента в горната част на страницата, показана като раздел.

.card-header-tab и .nav-tabs карат връзките да се показват като раздели.

Навигацията се добавя в заглавката на картата, за да се покаже отгоре.

Можем да направим връзките показани като хапчета с класа .card-header-pills.

Например, можем да напишем:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

за показване на връзки като раздели.

Изображения

Можем да добавяме изображения вътре в картите.

Например, можем да напишем:

<div class="card mb-3">
  <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Изображението се добавя над тялото.

Ние го изравняваме с ръбовете с класа .card-img-top.

Заключение

Можем да променим размера с вградени класове или CSS.

Също така можем да добавяме навигация и изображения към картите.