Карталар

Bootstrap карталары бірнеше нұсқалары мен опциялары бар икемді және кеңейтілетін мазмұн контейнерін қамтамасыз етеді.

Бұл бетте

туралы

Карта - икемді және кеңейтілетін мазмұн контейнері. Ол үстіңгі және төменгі колонтитулдарға арналған опцияларды, мазмұнның кең ауқымын, контекстік фондық түстерді және қуатты дисплей опцияларын қамтиды. Егер сіз Bootstrap 3-пен таныс болсаңыз, карталар ескі панельдерді, ұңғымаларды және нобайларды ауыстырады. Осы құрамдастарға ұқсас функциялар карталарға арналған модификатор кластары ретінде қол жетімді.

Мысал

Карталар мүмкіндігінше аз белгілеулер мен стильдермен жасалған, бірақ әлі де көптеген бақылау мен теңшеуді қамтамасыз ете алады. Flexbox көмегімен жасалған олар оңай туралауды ұсынады және басқа Bootstrap компоненттерімен жақсы араласады. Оларда marginәдепкі бойынша жоқ, сондықтан қажет болған жағдайда аралық утилиталарды пайдаланыңыз .

Төменде аралас мазмұнды және бекітілген ені бар негізгі картаның мысалы келтірілген. Карталардың басталатын тұрақты ені жоқ, сондықтан олар табиғи түрде оның негізгі элементінің толық енін толтырады. Бұл әртүрлі өлшем опцияларымен оңай реттеледі .

Карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Бір жерге барыңыз

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Мазмұн түрлері

Карталар кескіндерді, мәтінді, тізім топтарын, сілтемелерді және т.б. қоса алғанда, әртүрлі мазмұнды қолдайды. Төменде қолдау көрсетілетін нәрселердің мысалдары берілген.

Дене

Картаның құрылыс блогы болып табылады .card-body. Оны картада толтырылған бөлім қажет болғанда пайдаланыңыз.

Бұл карта корпусындағы кейбір мәтін.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Тақырыптар, мәтін және сілтемелер

Карта тақырыптары тегке қосу .card-titleарқылы пайдаланылады. Дәл осылай, сілтемелер тегке қосу арқылы <h*>қосылады және бір-бірінің қасына орналастырылады ..card-link<a>

Субтитрлер тегке .card-subtitlea қосу арқылы пайдаланылады . <h*>Егер .card-titleжәне .card-subtitleэлементтері элементке орналастырылса .card-body, карта тақырыбы мен субтитр жақсы тураланады.

Карта атауы

Картаның субтитрі

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Карта сілтемесі Басқа сілтеме

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Суреттер

.card-img-topкартаның жоғарғы жағына суретті орналастырады. , арқылы .card-textмәтінді картаға қосуға болады. Ішкі мәтінді .card-textстандартты HTML тегтерімен де стильдеуге болады.

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Топтарды тізімдеу

Тізімдер тобы бар картадағы мазмұн тізімдерін жасаңыз.

Элемент
Екінші элемент
Үшінші элемент

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Таңдаулы

Элемент
Екінші элемент
Үшінші элемент

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Элемент
Екінші элемент
Үшінші элемент

Картаның төменгі деректемесі

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Ас үйге арналған раковина

Қажетті картаны жасау үшін бірнеше мазмұн түрлерін араластырыңыз және сәйкестендіріңіз немесе барлығын сол жерге тастаңыз. Төменде кескін мәнерлері, блоктар, мәтін мәнерлері және тізімдер тобы көрсетілген — барлығы бекітілген ені бар картаға оралған.

Карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Элемент
Екінші элемент
Үшінші элемент

Карта сілтемесі Басқа сілтеме

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Үстіңгі деректеме және төменгі деректеме

Картаға қосымша үстіңгі және/немесе төменгі деректеме қосыңыз.

Таңдаулы

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Карта тақырыптарын элементтерге қосу .card-headerарқылы стильдеуге болады.<h*>

Таңдаулы

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Дәйексөз

Блок тырнақша элементінде қамтылған белгілі дәйексөз.

Source Title бойынша танымал біреу

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Таңдаулы

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

2 күн бұрын

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Өлшемді анықтау

Карточкаларда widthбастау үшін арнайы ештеңе жоқ, сондықтан олар басқаша көрсетілмесе, ені 100% болады. Мұны қажетінше теңшелетін CSS, тор сыныптары, тор Sass араластырулары немесе утилиталар арқылы өзгертуге болады.

Тор белгілеуді пайдалану

Торды пайдаланып, қажетінше карталарды бағандар мен жолдарға ораңыз.

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</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">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Утилиталарды пайдалану

Картаның енін жылдам орнату үшін қол жетімді өлшемдерді анықтау утилиталарымызды пайдаланыңыз .

Карта атауы

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Түйме

Карта атауы

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Түйме

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Пайдаланушы CSS пайдалану

Енді орнату үшін мәнерлер кестелерінде немесе кірістірілген мәнерлер ретінде реттелетін CSS пайдаланыңыз.

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Мәтінді туралау

Біздің мәтінді туралау сыныптары арқылы кез келген картаның мәтіндік туралануын толық немесе белгілі бір бөліктерде жылдам өзгертуге болады .

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap шолу құрамдастары бар карта тақырыбына (немесе блогына) шарлауды қосыңыз .

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<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" aria-current="true" 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">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Арнайы атауды өңдеу

Қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтінмен.

Бір жерге барыңыз

html

<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">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Суреттер

Карточкалар кескіндермен жұмыс істеудің бірнеше нұсқасын қамтиды. Карточканың кез келген шетіне «сурет қақпақтарын» қосу, карта мазмұны бар кескіндерді қабаттастыру немесе кескінді картаға жай ғана ендіруді таңдаңыз.

Кескін қақпақтары

Үстіңгі және астыңғы деректемелерге ұқсас, карталарда үстіңгі және астыңғы «сурет қақпақтары» — картаның жоғарғы немесе төменгі жағындағы кескіндер болуы мүмкін.

Карта атауы

Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар кеңірек карта. Бұл мазмұн сәл ұзағырақ.

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Кескін қабаттары

Кескінді карта фонына айналдырып, карта мәтінін қабаттаңыз. Кескінге байланысты сізге қосымша стильдер немесе утилиталар қажет болуы мүмкін немесе қажет болмауы мүмкін.

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Мазмұн кескіннің биіктігінен үлкен болмауы керек екенін ескеріңіз. Мазмұн кескіннен үлкенірек болса, мазмұн кескіннің сыртында көрсетіледі.

Көлденең

Тор және утилита кластарының тіркесімін пайдалана отырып, карталарды мобильді құрылғыларға ыңғайлы және жауап беретін түрде көлденең жасауға болады. Төмендегі мысалда біз тор ағындарын алып тастаймыз және картаны тоқтау нүктесінде көлденең ету үшін сыныптарды .g-0қолданамыз . Карта мазмұнына байланысты қосымша түзетулер қажет болуы мүмкін..col-md-*md

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Карта стильдері

Карточкалар өңін, жиектерін және түсін реттеуге арналған әртүрлі опцияларды қамтиды.

Фон және түс

v5.2.0 нұсқасына қосылды

Көмекшілерімізбен қарама - background-colorқарсы алдыңғы планды орнатыңыз . Бұрын таңдауды және сәндеуге арналған утилиталарды қолмен жұптау қажет болды , егер қаласаңыз, оларды әлі де пайдалана аласыз.color.text-bg-{color}.text-{color}.bg-{color}

Тақырып

Негізгі карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Қосымша карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Сәттілік картасының атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Қауіпті карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Ескерту картасының тақырыбы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Ақпараттық карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Жарық карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Қараңғы карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Көмекші технологияларға мән беру

Түсті мағына қосу үшін пайдалану тек көрнекі нұсқауды қамтамасыз етеді, ол экраннан оқу құралдары сияқты көмекші технологияларды пайдаланушыларға берілмейді. Түспен белгіленген ақпарат мазмұнның өзінен анық (мысалы, көрінетін мәтін) немесе .visually-hiddenсыныппен жасырылған қосымша мәтін сияқты балама құралдар арқылы енгізілгеніне көз жеткізіңіз.

Шекара

Тек картаны өзгерту үшін шекаралық утилиталарды пайдаланыңыз. Төменде көрсетілгендей ата-анаға немесе карта мазмұнының ішкі жиынына сыныптарды border-colorқоюға болатынын ескеріңіз ..text-{color}.card

Тақырып

Негізгі карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Қосымша карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Сәттілік картасының атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Қауіпті карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Ескерту картасының тақырыбы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Ақпараттық карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Жарық карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Тақырып

Қараңғы карта атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins утилиталары

Сондай-ақ, картаның үстіңгі және астыңғы деректемелеріндегі жиектерді қажетінше өзгертуге, тіпті олардың background-colorкөмегімен жоюға болады .bg-transparent.

Тақырып

Сәттілік картасының атауы

Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.

Колонтитул

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Картаның орналасуы

Карталардағы мазмұнды сәндеуден басқа, Bootstrap карталар сериясын орналастырудың бірнеше опцияларын қамтиды. Әзірге бұл орналасу опциялары әлі жауап бермейді .

Карта топтары

Карточкаларды ені мен биіктігі бірдей бағандары бар жалғыз бекітілген элемент ретінде көрсету үшін карта топтарын пайдаланыңыз. Карточка топтары жинақталып басталады және тоқтау нүктесінен display: flex;бастап біркелкі өлшемдермен қосылу үшін пайдаланылады.sm

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Бұл картада қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтін бар.

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар кеңірек карта. Бұл картада бірдей биіктік әрекетін көрсететін біріншіден де ұзағырақ мазмұн бар.

Соңғы рет 3 минут бұрын жаңартылды

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Төменгі деректемелері бар карта топтарын пайдаланған кезде олардың мазмұны автоматты түрде түзетіледі.

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Бұл картада қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтін бар.

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Тор карталар

Әр жолда қанша тор бағанасын (карталарыңызға оралған) көрсететінін басқару үшін Bootstrap тор жүйесін және оның .row-colsсыныптарын пайдаланыңыз. Мысалы, мұнда .row-cols-1карталар бір бағанға орналасады және .row-cols-md-2төрт карта орташа үзіліс нүктесінен бастап бірнеше жолдар бойынша бірдей енге бөлінеді.

Карта атауы

Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта. Бұл мазмұн сәл ұзағырақ.

Карта атауы

Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта.

Карта атауы

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Оны өзгертіңіз .row-cols-3және сіз төртінші карта орамын көресіз.

Карта атауы

Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта.

Карта атауы

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Сізге бірдей биіктік қажет болғанда .h-100, карталарға қосыңыз. Әдепкі бойынша тең биіктіктерді қаласаңыз $card-height: 100%, Sass қолданбасында орнатуға болады.

Карта атауы

Бұл қысқа карта.

Карта атауы

Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта.

Карта атауы

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Карта топтарындағы сияқты, картаның төменгі деректемелері автоматты түрде қатарға тұрады.

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Бұл картада қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтін бар.

Соңғы рет 3 минут бұрын жаңартылды

Карта атауы

Соңғы рет 3 минут бұрын жаңартылды

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Тас қалау

Біз Масондықv4 тәрізді бағандардың мінез-құлқын имитациялау үшін тек CSS әдісін қолдандық , бірақ бұл әдіс көптеген жағымсыз жанама әсерлермен бірге келді . Егер сізде орналасудың осы түрін алғыңыз келсе , сіз жай ғана Masonry плагинін пайдалана аласыз. Masonry Bootstrap ішіне кірмейді , бірақ біз сізге бастауға көмектесу үшін демонстрациялық мысал жасадық.v5

CSS

Айнымалылар

v5.2.0 нұсқасына қосылды

.cardBootstrap-тың дамып келе жатқан CSS айнымалы мәндерінің бір бөлігі ретінде карталар енді нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалыларын пайдаланады . CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass айнымалылары

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Карталар

туралы

Мысал

Карта атауы

Мазмұн түрлері

Дене

Тақырыптар, мәтін және сілтемелер

Карта атауы

Картаның субтитрі

Суреттер

Топтарды тізімдеу

Ас үйге арналған раковина

Карта атауы

Үстіңгі деректеме және төменгі деректеме

Арнайы атауды өңдеу

Таңдаулы

Арнайы атауды өңдеу

Арнайы атауды өңдеу

Өлшемді анықтау

Тор белгілеуді пайдалану

Арнайы атауды өңдеу

Арнайы атауды өңдеу

Утилиталарды пайдалану

Карта атауы

Карта атауы

Пайдаланушы CSS пайдалану

Арнайы атауды өңдеу

Мәтінді туралау

Арнайы атауды өңдеу

Арнайы атауды өңдеу

Арнайы атауды өңдеу

Навигация

Арнайы атауды өңдеу

Арнайы атауды өңдеу

Суреттер

Кескін қақпақтары

Карта атауы

Карта атауы

Кескін қабаттары

Карта атауы

Көлденең

Карта атауы

Карта стильдері

Фон және түс

Негізгі карта атауы

Қосымша карта атауы

Сәттілік картасының атауы

Қауіпті карта атауы

Ескерту картасының тақырыбы

Ақпараттық карта атауы

Жарық карта атауы

Қараңғы карта атауы

Көмекші технологияларға мән беру

Шекара

Негізгі карта атауы

Қосымша карта атауы

Сәттілік картасының атауы

Қауіпті карта атауы

Ескерту картасының тақырыбы

Ақпараттық карта атауы

Жарық карта атауы

Қараңғы карта атауы

Mixins утилиталары

Сәттілік картасының атауы

Картаның орналасуы

Карта топтары

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Тор карталар

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы