ካርዶች
የ Bootstrap ካርዶች ከበርካታ ልዩነቶች እና አማራጮች ጋር ተለዋዋጭ እና ሊሰፋ የሚችል የይዘት መያዣ ይሰጣሉ።
ስለ
ካርድ ተለዋዋጭ እና ሊሰፋ የሚችል የይዘት መያዣ ነው። ለራስጌዎች እና ግርጌዎች አማራጮች፣ ብዙ አይነት ይዘቶች፣ የአውድ ዳራ ቀለሞች እና ኃይለኛ የማሳያ አማራጮችን ያካትታል። ስለ Bootstrap 3 የሚያውቁ ከሆኑ ካርዶች የድሮ ፓነሎችን፣ ጉድጓዶችን እና ድንክዬዎችን ይተካሉ። ከእነዚያ አካላት ጋር ተመሳሳይነት ያለው ተግባር ለካርዶች እንደ ማሻሻያ ክፍሎች ይገኛል።
ለምሳሌ
ካርዶች በተቻለ መጠን በትንሽ ማርክ እና ቅጦች የተገነቡ ናቸው፣ ነገር ግን አሁንም ብዙ ቁጥጥር እና ማበጀትን ችለዋል። በ flexbox የተገነቡ፣ ቀላል አሰላለፍ ያቀርባሉ እና ከሌሎች የቡትስትራፕ ክፍሎች ጋር በደንብ ይደባለቃሉ። margin
በነባሪነት የላቸውም ፣ ስለዚህ እንደ አስፈላጊነቱ የቦታ መገልገያዎችን ይጠቀሙ።
ከታች የተደባለቀ ይዘት እና ቋሚ ስፋት ያለው የመሠረታዊ ካርድ ምሳሌ ነው. ካርዶች ለመጀመር ምንም ቋሚ ስፋት የላቸውም፣ ስለዚህ በተፈጥሮ የወላጅ ኤለመንት ሙሉውን ስፋት ይሞላሉ። ይህ በተለያዩ የመጠን ምርጫዎቻችን በቀላሉ ተበጅቷል ።
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
የይዘት ዓይነቶች
ካርዶች ምስሎችን፣ ጽሑፎችን፣ የዝርዝር ቡድኖችን፣ አገናኞችን እና ሌሎችንም ጨምሮ የተለያዩ ይዘቶችን ይደግፋሉ። ከታች ያሉት የሚደገፉት ምሳሌዎች ናቸው።
አካል
የካርድ ግንባታው .card-body
እ.ኤ.አ. በካርድ ውስጥ የታሸገ ክፍል ሲፈልጉ ይጠቀሙበት።
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
ርዕሶች፣ ጽሑፍ እና አገናኞች
.card-title
የካርድ ርዕሶች ወደ <h*>
መለያ በማከል ጥቅም ላይ ይውላሉ . በተመሳሳይ መንገድ, ማገናኛዎች ተጨምረዋል እና መለያ ላይ በመጨመር እርስ በርስ ይቀመጣሉ .card-link
.<a>
የትርጉም ጽሑፎች ጥቅም ላይ የሚውሉት መለያ ላይ በማከል ነው .card-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>
ቡድኖችን ዘርዝር
በአንድ ካርድ ውስጥ የይዘት ዝርዝሮችን ከብልጭታ ዝርዝር ቡድን ጋር ይፍጠሩ።
- ንጥል ነገር
- ሁለተኛ ንጥል
- ሦስተኛው ንጥል
<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>
በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።
<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፣ በፍርግርግ ክፍሎች፣ በፍርግርግ 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's nav ክፍሎች ጋር በካርድ ራስጌ (ወይም እገዳ) ላይ አንዳንድ አሰሳ ያክሉ ።
<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>
የካርድ አቀማመጥ
በካርዶች ውስጥ ያለውን ይዘት ከመቅረጽ በተጨማሪ ቡትስትራፕ ተከታታይ ካርዶችን ለመዘርጋት ጥቂት አማራጮችን ያካትታል። ለጊዜው እነዚህ የአቀማመጥ አማራጮች ገና ምላሽ ሰጪ አይደሉም ።
የካርድ ቡድኖች
ካርዶችን እንደ አንድ ነጠላ ፣ እኩል ስፋት እና ቁመት አምዶች ያሉት አካል ለማድረግ የካርድ ቡድኖችን ይጠቀሙ። የካርድ ቡድኖች ተደራርበው ይጀምራሉ እና ከመቋረጫ ነጥብ 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
። column
ካርዶች በቀላሉ ለማጣጣም ከ flexbox ይልቅ በሲኤስኤስ ባህሪያት የተገነቡ ናቸው ። ካርዶች ከላይ ወደ ታች እና ከግራ ወደ ቀኝ ይታዘዛሉ.
ቀና በል! ከካርድ ዓምዶች ጋር ያለው ርቀትዎ ሊለያይ ይችላል። ካርዶች በአምዶች ላይ እንዳይሰበሩ ለመከላከል፣ እስካሁን ጥይት የማይበገር መፍትሄ display: inline-block
እንዲሆን ልናስቀምጣቸው ይገባል።column-break-inside: avoid
ወደ አዲስ መስመር የሚያጠቃልለው የካርድ ርዕስ
ይህ ከዚህ በታች ደጋፊ ጽሑፍ ያለው ረጅም ካርድ ነው ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪ። ይህ ይዘት ትንሽ ረዘም ያለ ነው።
በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።
የካርድ ርዕስ
ይህ ካርድ ወደ ተጨማሪ ይዘት እንደ ተፈጥሯዊ መሪነት ከዚህ በታች ደጋፊ ጽሑፍ አለው።
መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።
የካርድ ርዕስ
ይህ ካርድ ከሱ በታች መደበኛ ርዕስ እና አጭር አንቀፅ አለው።
መጨረሻ የዘመነው ከ3 ደቂቃ በፊት ነው።
በብሎክquote ኤለመንት ውስጥ የሚገኝ በጣም የታወቀ ጥቅስ።
የካርድ ርዕስ
ይህ ከታች ርዕስ እና ደጋፊ ጽሑፍ ያለው ሌላ ካርድ ነው። ይህ ካርድ በአጠቃላይ ትንሽ ከፍ እንዲል ለማድረግ አንዳንድ ተጨማሪ ይዘቶች አሉት።
መጨረሻ የዘመነው ከ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;
}
}