Карталар

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

туралы

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

Мысал

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

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

Карта атауы

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

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

<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. Оны картада толтырылған бөлім қажет болғанда пайдаланыңыз.

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

<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, карта тақырыбы мен субтитр жақсы тураланады.

Карта атауы

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

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

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

<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 тегтерімен де стильдеуге болады.

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

<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>

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

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

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

<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>

Таңдаулы

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

<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>

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

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

<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>

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

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

Карта атауы

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

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

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

<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>

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

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

Таңдаулы

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

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

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

<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*>

Таңдаулы

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

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

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

<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 бойынша танымал біреу

<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 күн бұрын

<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 араластырулары немесе утилиталар арқылы өзгертуге болады.

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

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

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

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

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

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

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

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

<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>

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

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

Карта атауы

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

Түйме

Карта атауы

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

Түйме

<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 пайдаланыңыз.

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

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

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

<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" 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-right" 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 шолу құрамдастары бар карта тақырыбына (немесе блогына) шарлауды қосыңыз .

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

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

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

<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">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>

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

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

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

<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 минут бұрын жаңартылды

<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 минут бұрын жаңартылды

<div class="card bg-dark text-white">
  <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">Last updated 3 mins ago</p>
  </div>
</div>

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

Көлденең

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

Карта атауы

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." 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>

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

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

Фон және түс

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

<div class="card text-white 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-white 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-white 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-white 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-white 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-white 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 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-white 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>

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

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

Шекара

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

Тақырып

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

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

<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 text-warning">
    <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 text-info">
    <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.

Тақырып

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

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

Колонтитул

<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 минут бұрын жаңартылды

<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 минут бұрын жаңартылды

<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>

Карта палубасы

Бір-біріне қосылмаған ені мен биіктігі бірдей карталар жиынтығы қажет пе? Карточкаларды пайдаланыңыз.

Карта атауы

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

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

Карта атауы

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

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

Карта атауы

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

<div class="card-deck">
  <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>
      <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 минут бұрын жаңартылды

<div class="card-deck">
  <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төрт карта орташа үзіліс нүктесінен бастап бірнеше жолдар бойынша бірдей енге бөлінеді.

Карта атауы

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

Карта атауы

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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және сіз төртінші карта орамын көресіз.

Карта атауы

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

Карта атауы

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 қолданбасында орнатуға болады.

Карта атауы

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

Карта атауы

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

Карта атауы

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Карточка бағандары

Карточкаларды тек CSS көмегімен қалау.card-columns тәрізді бағандарға оларды орау арқылы ұйымдастыруға болады . columnКарталар оңай теңестіру үшін flexbox орнына CSS сипаттарымен жасалған. Карточкалар жоғарыдан төменге және солдан оңға қарай реттелген.

Ескерту! Карта бағандары бар жүгірісіңіз әртүрлі болуы мүмкін. Карточкалардың бағандар арқылы өтуіне жол бермеу үшін біз оларды display: inline-blockәлі column-break-inside: avoidоқ өткізбейтін шешім емес етіп орнатуымыз керек.

Жаңа жолға өтетін карта тақырыбы

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

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

Карта атауы

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

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

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

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

Карта атауы

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

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

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

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

Карта атауы

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

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

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Карта бағандарын кейбір қосымша кодпен кеңейтуге және теңшеуге болады. Төменде .card-columnsбағандар санын өзгерту үшін жауап беретін деңгейлер жинағын жасау үшін біз пайдаланатын CSS-ті (CSS бағандарын) қолданатын сыныптың кеңейтімі көрсетілген.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Карталар

туралы

Мысал

Карта атауы

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

Дене

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

Карта атауы

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

Суреттер

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

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

Карта атауы

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

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

Таңдаулы

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

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

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

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

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

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

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

Карта атауы

Карта атауы

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

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

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

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

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

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

Навигация

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

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

Суреттер

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

Карта атауы

Карта атауы

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

Карта атауы

Көлденең

Карта атауы

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

Фон және түс

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

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

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

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

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

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

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

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

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

Шекара

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

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

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

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

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

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

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

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

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

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

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

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

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта палубасы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Карта атауы

Тор карталар