ბარათები

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

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

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

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

Ნივთი
მეორე ნივთი
მესამე ნივთი

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>

ციტატა

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

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

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

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

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

CSS

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, ბარათები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .cardრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. 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;