in English

ბარათები

Bootstrap-ის ბარათები უზრუნველყოფს მოქნილ და გაფართოებულ კონტეინერს მრავალი ვარიანტითა და ვარიანტებით.

შესახებ

ბარათი არის მოქნილი და გაფართოებადი შინაარსის კონტეინერი. მასში შედის სათაურებისა და ქვედა კოლონტიტულის ვარიანტები, შინაარსის მრავალფეროვნება, კონტექსტური ფონის ფერები და ჩვენების ძლიერი პარამეტრები. თუ თქვენ იცნობთ Bootstrap 3-ს, ბარათები ცვლის ჩვენს ძველ პანელებს, ჭებს და ესკიზებს. ამ კომპონენტების მსგავსი ფუნქციონირება ხელმისაწვდომია ბარათების მოდიფიკატორის კლასების სახით.

მაგალითი

ბარათები აგებულია რაც შეიძლება ნაკლები მარკირებითა და სტილით, მაგრამ მაინც ახერხებენ მრავალი კონტროლისა და პერსონალიზაციის მიწოდებას. აგებული flexbox-ით, ისინი გვთავაზობენ მარტივ გასწორებას და კარგად ერწყმის Bootstrap-ის სხვა კომპონენტებს. ნაგულისხმევად მათ არ აქვთ margin, ამიტომ გამოიყენეთ ინტერვალის კომუნალური საშუალებები საჭიროებისამებრ.

ქვემოთ მოცემულია ძირითადი ბარათის მაგალითი შერეული შინაარსით და ფიქსირებული სიგანით. ბარათებს არ აქვთ ფიქსირებული სიგანე დასაწყებად, ამიტომ ისინი ბუნებრივად შეავსებენ მისი ძირითადი ელემენტის სრულ სიგანეს. ეს ადვილად მორგებულია ჩვენი სხვადასხვა ზომის ვარიანტებით .

Placeholder Image cap
ბარათის სათაური

რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.

Სადმე წასვლა
<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>.

სუბტიტრები გამოიყენება ტეგზე a- .card-subtitleს დამატებით <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 ტეგებით.

Placeholder Image cap

რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.

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

ჩამოთვალეთ ჯგუფები

შექმენით შინაარსის სიები ბარათში flush list ჯგუფთან ერთად.

  • Ნივთი
  • მეორე ნივთი
  • მესამე ნივთი
<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>

Სამზარეულოს ნიჟარა

შეურიეთ და შეადარეთ შინაარსის მრავალი ტიპი, რათა შექმნათ თქვენთვის სასურველი ბარათი, ან ჩააგდეთ ყველაფერი იქ. ქვემოთ ნაჩვენებია გამოსახულების სტილები, ბლოკები, ტექსტის სტილები და სიის ჯგუფი - ყველაფერი შეფუთულია ფიქსირებული სიგანის ბარათში.

Placeholder Image cap
ბარათის სათაური

რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.

  • Ნივთი
  • მეორე ნივთი
  • მესამე ნივთი
<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>
ციტატა

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

ვინმე ცნობილი წყაროს სათაურში
<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>
გამორჩეული
სპეციალური ტიტული მკურნალობა

ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი შინაარსის ბუნებრივი წყარო.

Სადმე წასვლა
<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-ით, ბადის კლასებით, Grid 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>

სურათები

ბარათები მოიცავს სურათებთან მუშაობის რამდენიმე ვარიანტს. აირჩიეთ ბარათის ორივე ბოლოში „გამოსახულების ქუდების“ დამატება, სურათების გადაფარვა ბარათის შინაარსით ან უბრალოდ სურათის ბარათში ჩასმა.

გამოსახულების ქუდები

სათაურებისა და ქვედა კოლონტიტულის მსგავსად, ბარათები შეიძლება შეიცავდეს ზედა და ქვედა "სურათის ქუდები" - სურათებს ბარათის ზედა ან ქვედა ნაწილში.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ბოლოს განახლდა 3 წუთის წინ

ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ბოლოს განახლდა 3 წუთის წინ

Placeholder Image cap
<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>

გამოსახულების გადაფარვები

გადააქციეთ სურათი ბარათის ფონად და გადაფარეთ თქვენი ბარათის ტექსტი. სურათიდან გამომდინარე, შეიძლება დაგჭირდეთ ან არ დაგჭირდეთ დამატებითი სტილები ან უტილიტები.

Placeholder Card image
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ბოლოს განახლდა 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წყვეტის წერტილში. შესაძლოა საჭირო გახდეს დამატებითი კორექტირება თქვენი ბარათის შინაარსიდან გამომდინარე.

Placeholder Image
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ბოლოს განახლდა 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>

აერთიანებს კომუნალურებს

თქვენ ასევე შეგიძლიათ შეცვალოთ საზღვრები ბარათის სათაურსა და ქვედა კოლონტიტზე, როგორც საჭიროა, და წაშალოთ 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წყვეტის წერტილიდან.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ბოლოს განახლდა 3 წუთის წინ

Placeholder Image cap
ბარათის სათაური

ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

ბოლოს განახლდა 3 წუთის წინ

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ამ ბარათს აქვს უფრო გრძელი კონტენტი, ვიდრე პირველი, რომელიც აჩვენებს თანაბარი სიმაღლის მოქმედებას.

ბოლოს განახლდა 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>

როდესაც იყენებთ ბარათების ჯგუფებს ქვედა კოლონტიტულით, მათი შინაარსი ავტომატურად დალაგდება.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ამ ბარათს აქვს უფრო გრძელი კონტენტი, ვიდრე პირველი, რომელიც აჩვენებს თანაბარი სიმაღლის მოქმედებას.

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

ბარათის გემბანები

გჭირდებათ თანაბარი სიგანისა და სიმაღლის ბარათების ნაკრები, რომლებიც არ არის მიმაგრებული ერთმანეთზე? გამოიყენეთ ბარათის გემბანები.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ბოლოს განახლდა 3 წუთის წინ

Placeholder Image cap
ბარათის სათაური

ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

ბოლოს განახლდა 3 წუთის წინ

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ამ ბარათს აქვს უფრო გრძელი კონტენტი, ვიდრე პირველი, რომელიც აჩვენებს თანაბარი სიმაღლის მოქმედებას.

ბოლოს განახლდა 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>

ისევე, როგორც ბარათების ჯგუფებში, ბარათების ქვედა კოლონტიტულები გემბანზე ავტომატურად განლაგდება.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ამ ბარათს აქვს უფრო გრძელი კონტენტი, ვიდრე პირველი, რომელიც აჩვენებს თანაბარი სიმაღლის მოქმედებას.

<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ოთხი კარტის გაყოფა თანაბარ სიგანეზე რამდენიმე მწკრივზე, საშუალო წყვეტის წერტილიდან ზემოთ.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

<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და დაინახავთ მეოთხე კარტის შეფუთვას.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

<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-ში.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

Placeholder Image cap
ბარათის სათაური

ეს არის მოკლე ბარათი.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

Placeholder Image cap
ბარათის სათაური

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

<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. ბარათები აგებულია CSS columnთვისებებით, ნაცვლად flexbox-ისა, უფრო მარტივი გასწორებისთვის. ბარათები დალაგებულია ზემოდან ქვემოდან და მარცხნიდან მარჯვნივ.

Თავები მაღლა! თქვენი გარბენი ბარათის სვეტებით შეიძლება განსხვავდებოდეს. იმისათვის, რომ თავიდან ავიცილოთ ბარათები სვეტების გასწვრივ, ჩვენ უნდა დავაყენოთ ისინი, display: inline-blockროგორც column-break-inside: avoidჯერ არ არის ტყვიაგაუმტარი გამოსავალი.

Placeholder Image cap
ბარათის სათაური, რომელიც შეფუთულია ახალ ხაზში

ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

ვინმე ცნობილი წყაროს სათაურში
Placeholder Image cap
ბარათის სათაური

ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.

ბოლოს განახლდა 3 წუთის წინ

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

ვინმე ცნობილი წყაროს სათაურში
ბარათის სათაური

ამ ბარათს აქვს ჩვეულებრივი სათაური და ტექსტის მოკლე აბზაცი მის ქვემოთ.

ბოლოს განახლდა 3 წუთის წინ

Placeholder Card image

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

ვინმე ცნობილი წყაროს სათაურში
ბარათის სათაური

ეს არის კიდევ ერთი ბარათი სათაურით და დამხმარე ტექსტით ქვემოთ. ამ ბარათს აქვს დამატებითი კონტენტი, რათა ის ოდნავ უფრო მაღალი იყოს.

ბოლოს განახლდა 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;
  }
}