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.
Също така можем да добавяме навигация и изображения към картите.