ካርድታት
ናይ ቡትስትራፕ ካርድታት ተዓጻጻፍን ዝዝርጋሕን ትሕዝቶ መትሓዚ ምስ ብዙሓት ፍልልያትን ኣማራጺታትን ይህቡ።
ብዝዕባ
ካርድ ተዓጻጻፍን ዝዝርጋሕን ትሕዝቶ ዝሓዘ መትሓዚ እዩ ። ንርእስታትን እግርን ዝኸውን ኣማራጺታት፡ ዝተፈላለየ ትሕዝቶታት፡ ዓውደ-ጽሑፋዊ ሕብርታት ድሕረ ባይታ፡ ከምኡ’ውን ሓያል ናይ ምርኣይ ኣማራጺታት የጠቓልል። ምስ ቡትስትራፕ 3 ትፋለጡ እንተኾይንኩም፡ ካርድታት ንናይ ቀደም ፓነላትና፡ ዒላታትናን ንኣሽቱ ስእልታትናን ይትክኡ። ምስቶም ኣካላት ተመሳሳሊ ተግባር ከም መቐየሪ ክፍልታት ንካርድታት ይርከብ።
ኣብነት
ካርድታት ብዝተኻእለ መጠን ብውሑድ ምልክትን ቅዲታትን ዝተሃንጹ ኮይኖም፡ ሕጂ’ውን ቶን ምቁጽጻርን ምምዕርራይን ከቕርቡ ይኽእሉ። ብፍሌክስቦክስ ዝተሃንጹ ኮይኖም፡ ቀሊል ኣሰላልፋ ዘቕርቡን ምስ ካልኦት ኣካላት ቡትስትራፕ ጽቡቕ ጌሮም ዝተሓዋወሱን እዮም። 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*>መለለዪ a ብምውሳኽ ይጥቀሙ ። እቲን .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ዘሎ ጽሑፍ ብመደበኛ ኤችቲኤምኤል መለለዪታት እውን ቅዲ ክግበር ይኽእል።
ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።
<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">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</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">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</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">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</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>ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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 mixins፣ ወይ ዩቲሊቲታት ክትቅይሮ ትኽእል ኢኻ።
ሽቦ ምልክት ምጥቃም
ነቲ ሽቦ ተጠቒምካ፡ ካርድታት ከም ኣድላይነቱ ብዓምድታትን መስመራትን ጠቕልሎም።
<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 components ምውሳኽ ።
<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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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-top" 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="..." class="card-img" 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;ንዩኒፎርም ስዝነቶም ንምዕዋት ይጥቀሙሉ።
ኣርእስቲ ካርድ
እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።
ንመወዳእታ ግዜ ቅድሚ 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 grid systemን ክፍልታቱን ተጠቐም .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 ጥራይ ናብ Masonry ዝመስሉ ዓምድታት ብ CSS ብምጥቕላል ክውደቡ ይኽእሉ .card-columns። ካርድታት ኣብ columnክንዲ ብflexbox ብCSS ንብረታት ይስራሕ ንቐሊል ኣሰላልፋ። ካርድታት ካብ ላዕሊ ናብ ታሕቲን ካብ ጸጋም ናብ የማንን ይእዘዙ።
ርእሲ ንላዕሊ! ምስ ዓምድታት ካርድ ዘለካ ማይልስ ክፈላለ ይኽእል እዩ። ካርድታት ኣብ ዓምድታት ከይስበር ንምክልኻል display: inline-block፡ ከምቲ column-break-inside: avoidገና ጥይት ዘይብሉ ፍታሕ ከምዘይኮነ ክንሰርዖም ኣለና።
ናብ ሓድሽ መስመር ዝጠቕልል ኣርእስቲ ካርድ
እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።
ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.
ኣርእስቲ ካርድ
እዚ ካርድ እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዝድግፍ ጽሑፍ ኣለዎ።
ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat.
ኣርእስቲ ካርድ
እዚ ካርድ እዚ ኣብ ትሕቲኡ ስሩዕ ኣርእስትን ሓጺር ሕጡበ ጽሑፍን ኣለዎ።
ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.
ኣርእስቲ ካርድ
እዚ ካልእ ኣብ ታሕቲ ኣርእስትን ደጋፊ ጽሑፍን ዘለዎ ካርድ እዩ። እዚ ካርድ ብሓፈሻ ቁሩብ ነዊሕ ንኽኸውን ገለ ተወሳኺ ትሕዝቶ ኣለዎ።
ንመወዳእታ ግዜ ቅድሚ 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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;
}
}