ბარათები
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>
.
სუბტიტრები გამოიყენება ტეგზე 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 ტეგებით.
რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.
<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>
Სამზარეულოს ნიჟარა
შეურიეთ და შეადარეთ შინაარსის მრავალი ტიპი, რათა შექმნათ თქვენთვის სასურველი ბარათი, ან ჩააგდეთ ყველაფერი იქ. ქვემოთ ნაჩვენებია გამოსახულების სტილები, ბლოკები, ტექსტის სტილები და სიის ჯგუფი - ყველაფერი შეფუთულია ფიქსირებული სიგანის ბარათში.
ბარათის სათაური
რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.
- Ნივთი
- მეორე ნივთი
- მესამე ნივთი
<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>
სურათები
ბარათები მოიცავს სურათებთან მუშაობის რამდენიმე ვარიანტს. აირჩიეთ ბარათის ორივე ბოლოში „გამოსახულების ქუდების“ დამატება, სურათების გადაფარვა ბარათის შინაარსით ან უბრალოდ სურათის ბარათში ჩასმა.
გამოსახულების ქუდები
სათაურებისა და ქვედა კოლონტიტულის მსგავსად, ბარათები შეიძლება შეიცავდეს ზედა და ქვედა "სურათის ქუდები" - სურათებს ბარათის ზედა ან ქვედა ნაწილში.
ბარათის სათაური
ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.
ბოლოს განახლდა 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>
გამოსახულების გადაფარვები
გადააქციეთ სურათი ბარათის ფონად და გადაფარეთ თქვენი ბარათის ტექსტი. სურათიდან გამომდინარე, შეიძლება დაგჭირდეთ ან არ დაგჭირდეთ დამატებითი სტილები ან უტილიტები.
<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>
აერთიანებს კომუნალურებს
თქვენ ასევე შეგიძლიათ შეცვალოთ საზღვრები ბარათის სათაურსა და ქვედა კოლონტიტზე, როგორც საჭიროა, და წაშალოთ 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>
როდესაც იყენებთ ბარათების ჯგუფებს ქვედა კოლონტიტულით, მათი შინაარსი ავტომატურად დალაგდება.
ბარათის სათაური
ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.
ბარათის სათაური
ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.
ბარათის სათაური
ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ამ ბარათს აქვს უფრო გრძელი კონტენტი, ვიდრე პირველი, რომელიც აჩვენებს თანაბარი სიმაღლის მოქმედებას.
<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>
ისევე, როგორც ბარათების ჯგუფებში, ბარათების ქვედა კოლონტიტულები გემბანზე ავტომატურად განლაგდება.
ბარათის სათაური
ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.
ბარათის სათაური
ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.
ბარათის სათაური
ეს არის უფრო ფართო ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ამ ბარათს აქვს უფრო გრძელი კონტენტი, ვიდრე პირველი, რომელიც აჩვენებს თანაბარი სიმაღლის მოქმედებას.
<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
. ბარათები აგებულია CSS column
თვისებებით, ნაცვლად flexbox-ისა, უფრო მარტივი გასწორებისთვის. ბარათები დალაგებულია ზემოდან ქვემოდან და მარცხნიდან მარჯვნივ.
Თავები მაღლა! თქვენი გარბენი ბარათის სვეტებით შეიძლება განსხვავდებოდეს. იმისათვის, რომ თავიდან ავიცილოთ ბარათები სვეტების გასწვრივ, ჩვენ უნდა დავაყენოთ ისინი, display: inline-block
როგორც column-break-inside: avoid
ჯერ არ არის ტყვიაგაუმტარი გამოსავალი.
ბარათის სათაური, რომელიც შეფუთულია ახალ ხაზში
ეს არის უფრო გრძელი ბარათი ქვემოთ მოცემული დამხმარე ტექსტით, როგორც დამატებითი კონტენტის ბუნებრივი წყარო. ეს შინაარსი ცოტათი გრძელია.
ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.
ბარათის სათაური
ამ ბარათს აქვს დამხმარე ტექსტი ქვემოთ, როგორც დამატებითი კონტენტის ბუნებრივი წყარო.
ბოლოს განახლდა 3 წუთის წინ
ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.
ბარათის სათაური
ამ ბარათს აქვს ჩვეულებრივი სათაური და ტექსტის მოკლე აბზაცი მის ქვემოთ.
ბოლოს განახლდა 3 წუთის წინ
ცნობილი ციტატა, რომელიც შეიცავს 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;
}
}