ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ካርድታት

ናይ ቡትስትራፕ ካርድታት ተዓጻጻፍን ዝዝርጋሕን ትሕዝቶ መትሓዚ ምስ ብዙሓት ፍልልያትን ኣማራጺታትን ይህቡ።

ኣብዚ ገጽ

ብዝዕባ

ካርድ ተዓጻጻፍን ዝዝርጋሕን ትሕዝቶ ዝሓዘ መትሓዚ እዩ ። ንርእስታትን እግርን ዝኸውን ኣማራጺታት፡ ዝተፈላለየ ትሕዝቶታት፡ ዓውደ-ጽሑፋዊ ሕብርታት ድሕረ ባይታ፡ ከምኡ’ውን ሓያል ናይ ምርኣይ ኣማራጺታት የጠቓልል። ምስ ቡትስትራፕ 3 ትፋለጡ እንተኾይንኩም፡ ካርድታት ንናይ ቀደም ፓነላትና፡ ዒላታትናን ንኣሽቱ ስእልታትናን ይትክኡ። ምስቶም ኣካላት ተመሳሳሊ ተግባር ከም መቐየሪ ክፍልታት ንካርድታት ይርከብ።

ኣብነት

ካርድታት ብዝተኻእለ መጠን ብውሑድ ምልክትን ቅዲታትን ዝተሃንጹ ኮይኖም፡ ሕጂ’ውን ቶን ምቁጽጻርን ምምዕርራይን ከቕርቡ ይኽእሉ። ብፍሌክስቦክስ ዝተሃንጹ ኮይኖም፡ ቀሊል ኣሰላልፋ ዘቕርቡን ምስ ካልኦት ኣካላት ቡትስትራፕ ጽቡቕ ጌሮም ዝተሓዋወሱን እዮም። marginብነባሪ መልክዑ የብሎምን ፣ ስለዚ ከም ኣድላይነቱ ናይ ርሕቀት ዩቲሊቲታት ተጠቐም።

ኣብ ታሕቲ ኣብነት ናይ ሓደ ዝተሓዋወሰ ትሕዝቶን ውሱን ስፍሓትን ዘለዎ መሰረታዊ ካርድ ኣሎ። ካርድታት ንኽጅምሩ ውሱን ስፍሓት የብሎምን፣ ስለዚ ብተፈጥሮኡ ምሉእ ስፍሓት ናይቲ ወላዲ ባእታኡ ክመልእዎ እዮም። እዚ ብዝተፈላለዩ ናይ ዓቐን ኣማራጺታትና ብቐሊሉ ንዓኻ ዝምጥን ’ ዩ ።

Placeholder Image cap
ኣርእስቲ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ዓይነታት ትሕዝቶ

ካርድታት ዝተፈላለየ ትሕዝቶታት ይድግፉ፣ ንኣብነት ምስልታት፣ ጽሑፍ፣ ዝርዝር ጉጅለታት፣ መላግቦታትን ካልእን ዝኣመሰሉ። ኣብ ታሕቲ ኣብነታት ናይቲ ዝድገፍ ኣሎ።

ሰውነት

ህንጻዊ ብሎክ ናይ ሓደ ካርድ እቲ .card-body. ኣብ ውሽጢ ካርድ ዝተዓሸገ ክፍሊ ኣብ ዘድልየካ እዋን ተጠቐመሉ።

እዚ ገለ ጽሑፍ ኣብ ውሽጢ ኣካል ካርድ እዩ።
html ዝብል ጽሑፍ ኣሎ። 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ኣርእስታት፡ ጽሑፍን መላግቦታትን

.card-titleኣርእስታት ካርድ ኣብ ሓደ <h*>መለለዪ ብምውሳኽ ይጥቀሙ ። .card-linkብተመሳሳሊ መንገዲ፡ ሊንክታት ኣብ ሓደ <a>መለለዪ ብምውሳኽ ይውሰኹን ኣብ ጎኒ ነንሕድሕዶም ይቕመጡን።

.card-subtitleንኡስ ርእሲ ኣብ ሓደ <h*>መለለዪ a ብምውሳኽ ይጥቀሙ ። እቲን .card-titleእቶም .card-subtitleኣቑሑትን ኣብ ሓደ ኣቕሓ እንተተቐሚጦም .card-body፡ ኣርእስቲ ካርድን ንኡስ ኣርእስትን ብጽቡቕ ተሰሪዖም ኣለዉ።

ኣርእስቲ ካርድ
ንኡስ ርእሲ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ካርድ ሊንክ ካልእ ሊንክ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ምስልታት

.card-img-topኣብ ላዕሊ ናይቲ ካርድ ምስሊ የቐምጥ። ብ .card-text፡ ጽሑፍ ኣብቲ ካርድ ክውሰኽ ይኽእል። ኣብ ውሽጢ .card-textዘሎ ጽሑፍ ብመደበኛ ኤችቲኤምኤል መለለዪታት እውን ቅዲ ክግበር ይኽእል።

Placeholder Image cap

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

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>

ጉጅለታት ዝርዝር

ኣብ ሓደ ካርድ ዝርዝር ትሕዝቶታት ምስ ፍሉሽ ዝርዝር ጉጅለ ምፍጣር።

  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
ፍሉይ መደብ
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
እግረ ጽሑፍ ካርድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

ናይ ክሽነ መሕጸቢ

ብዙሓት ዓይነታት ትሕዝቶ ብምሕዋስን ምትሕውዋስን ዘድልየካ ካርድ ምፍጣር፣ ወይ ድማ ኩሉ ኣብኡ ደርብዮ። ኣብ ታሕቲ ቅዲ ምስልታት፡ ብሎኮታት፡ ቅዲታት ጽሑፍን ጉጅለ ዝርዝርን ተገሊጾም ኣለዉ-ኩሎም ኣብ ውሱን ስፍሓት ዘለዎም ካርድ ዝተጠቕለሉ እዮም።

Placeholder Image cap
ኣርእስቲ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
ካርድ ሊንክ ካልእ ሊንክ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

ኣብ ውሽጢ ካርድ ኣማራጺ ርእስን/ወይ እግርን ምውሳኽ።

ፍሉይ መደብ
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

.card-headerርእሲ ካርድታት ኣብ <h*>ባእታታት ብምውሳኽ ቅዲ ክግበር ይከኣል ።

ፍሉይ መደብ
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ጥቕሲ

ፍሉጥ ጥቕሲ፡ ኣብ ብሎክኮት ባእታ ዝሓዘ።

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
ፍሉይ መደብ
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
ቅድሚ 2 መዓልቲ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

ሳይዚንግ ምግባር

ካርድታት widthንምጅማር ፍሉይ ከምዘይኮነ ይግምቱ፣ ስለዚ ካልእ ምልክት እንተዘይተገይሩሉ 100% ስፍሓት ክህልዎም እዩ። ነዚ ከም ኣድላይነቱ ብብሕታዊ CSS፣ ግሪድ ክፍልታት፣ ግሪድ Sass mixins፣ ወይ ዩቲሊቲታት ክትቅይሮ ትኽእል ኢኻ።

ሽቦ ምልክት ምጥቃም

ነቲ ሽቦ ተጠቒምካ፡ ካርድታት ከም ኣድላይነቱ ብዓምድታትን መስመራትን ጠቕልሎም።

ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ዩቲሊቲታት ምጥቃም

ስፍሓት ናይ ሓደ ካርድ ብቕልጡፍ ንምቕማጥ ብኣጻብዕ ዝቑጸሩ ዘለዉ ናይ ዓቐን ዩቲሊቲታትና ተጠቐሙ ።

ኣርእስቲ ካርድ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

መጠወቒ
ኣርእስቲ ካርድ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

መጠወቒ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

ብሕታዊ CSS ምጥቃም

ስፍሓት ንምቕማጥ ኣብ ቅዲ ጽሑፋትካ ወይ ከም ውሽጣዊ ቅዲታት ብሕታዊ CSS ተጠቐም።

ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ጽሑፍ ኣሰላልፋ

ናይ ዝኾነ ካርድ ጽሑፍ ኣሰላልፋ ብቕልጡፍ ክትቅይሮ ትኽእል ኢኻ-ብምሉኡ ወይ ፍሉይ ክፋሉ-ብናይ ጽሑፍ ኣሰላልፋ ክፍልታትና .

ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ገለ ምድህሳስ ኣብ ርእሲ (ወይ ብሎክ) ናይ ሓደ ካርድ ብ Bootstrap's nav components ምውሳኽ ።

ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ፍሉይ ኣተሓሕዛ መዓርግ

ምስ ደጋፊ ጽሑፍ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ።

ናብ ሓደ ቦታ ኪድ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ምስልታት

ካርድታት ምስ ምስልታት ንምስራሕ ገለ ኣማራጺታት የጠቓልል። ኣብ ክልቲኡ ጫፋት ካርድ “ናይ ምስሊ ቆብዕ” ካብ ምውሳኽ፡ ምስልታት ብትሕዝቶ ካርድ ምድብላቕ፡ ወይ ድማ ነቲ ምስሊ ኣብ ካርድ ምትእትታው ጥራይ ምረጽ።

ምስሊ ቆቢዕ

ካርድታት ልክዕ ከም ርእስን እግርን: ኣብ ላዕሊን ታሕተዋይን “ናይ ምስሊ ሽፋን” ማለት ኣብ ላዕሊ ወይ ታሕቲ ናይ ሓንቲ ካርድ ዚርከብ ምስልታት ኬጠቓልላ ይኽእላ እየን።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

Placeholder Image cap
html ዝብል ጽሑፍ ኣሎ። 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

ምስሊ ምድብላቕ

ንሓደ ምስሊ ናብ ድሕረ ባይታ ካርድ ቀይርካ ንጽሑፍ ካርድካ ድርብዮ። ከከም ምስሊ ተወሳኺ ቅዲታት ወይ ዩቲሊቲታት ከድልየካ ይኽእል ወይ ኣየድልየካን ይኸውን።

Placeholder Card image
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

html ዝብል ጽሑፍ ኣሎ። 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
ትሕዝቶ ካብ ቁመት ናይቲ ምስሊ ክዓቢ ከምዘይብሉ ኣስተውዕል። ትሕዝቶ ካብቲ ምስሊ ዝዓበየ እንተኾይኑ እቲ ትሕዝቶ ካብቲ ምስሊ ወጻኢ ክረአ እዩ።

ንጋድም

ውህደት ግሪድን ዩቲሊቲን ክፍልታት ብምጥቃም ካርድታት ብሞባይል ምቹእን ምላሽ ዝህብን መንገዲ ኣግማድ ክስራሕ ይኽእል። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ነቶም ናይ ሽቦ ጓተርስ ምስ ነወግዶምን ክላሳት .g-0ንጥቀምን .col-md-*፡ ነቲ ካርድ ኣብቲ ናይ mdምብታኽ ነጥቢ ኣግማድ ንገብሮ። ከከም ትሕዝቶ ካርድኻ ተወሳኺ ምትዕርራይ ከድልየካ ይኽእል እዩ።

Placeholder Image
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

html ዝብል ጽሑፍ ኣሎ። 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

ቅዲታት ካርድ

ካርድታት ድሕረ ባይታኦምን ዶባቶምን ሕብሮምን ንምምዕርራይ ዝተፈላለዩ ኣማራጺታት የጠቓልሉ።

ድሕረ ባይታ ሕብርን

ኣብ v5.2.0 ተወሰኸ

ምስ ሓገዝትና ንጽጽርbackground-color ቅድሚት ኣቐምጥ ። ቅድሚ ሕጂ ዝመረጽካዮን ንቅዲ ዝኸውን ዩቲሊቲታትን ብኢድካ ምጽምባር ይግደድ ነይሩ ፡ እንተደሊኻ ሕጂ’ውን ክትጥቀመሉ ትኽእል ኢኻ።color.text-bg-{color}.text-{color}.bg-{color}

ርእሲ ጽሑፍ
ኣርእስቲ መባእታ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ካልኣይ ደረጃ ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ናይ ዓወት ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ናይ ሓደጋ ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ናይ መጠንቀቕታ ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ኣርእስቲ ኢንፎ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ኣርእስቲ ብርሃን ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ጸሊም ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ

ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .visually-hiddenክፍሊ ዝተሓብአ።

ዶብ

ናይ ሓደ ካርድ ጥራይ ንምቕያር ናይ ዶብ ዩቲሊቲታት ተጠቐም ። ኣስተውዕል ከምቲ ኣብ ታሕቲ ዘሎ ኣብ ወላዲ ወይ ንኡስ ትሕዝቶ ናይቲ ካርድ ክፍልታት border-colorከተቐምጥ ትኽእል ኢኻ ።.text-{color}.card

ርእሲ ጽሑፍ
ኣርእስቲ መባእታ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ካልኣይ ደረጃ ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ናይ ዓወት ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ናይ ሓደጋ ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ናይ መጠንቀቕታ ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ኣርእስቲ ኢንፎ ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ኣርእስቲ ብርሃን ካርድ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

ርእሲ ጽሑፍ
ጸሊም ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ሚክሲንስ ዩቲሊቲታት

ከምኡ’ውን ኣብ ርእሲን እግርን ካርድ ዘሎ ዶባት ከም ኣድላይነቱ ክትቅይሮም ትኽእል ኢኻ፣ ዋላ’ውን background-colorብ .bg-transparent.

ርእሲ ጽሑፍ
ናይ ዓወት ካርድ ኣርእስቲ

ገለ ቅልጡፍ ኣብነት ጽሑፍ ኣብ ኣርእስቲ ካርድ ንምህናጽን ዝበዝሕ ትሕዝቶ ናይታ ካርድ ንምፍጣርን እዩ።

እግረ ጽሑፍ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

ኣቀማምጣ ካርድ

ቡትስትራፕ ኣብ ውሽጢ ካርድታት ዘሎ ትሕዝቶ ኣብ ርእሲ ቅዲ ምግባር፡ ተኸታታሊ ካርድታት ንምንጻፍ ዝሕግዙ ውሑዳት ኣማራጺታት የጠቓልል። ንግዚኡ እዞም ናይ ኣቀማምጣ ኣማራጺታት ገና ምላሽ ኣይሃቡን .

ናይ ካርድ ጉጅለታት

ካርድታት ከም ሓደ፡ ዝተተሓሓዘ ባእታ ምስ ማዕረ ስፍሓትን ቁመትን ዓምድታት ንምቕራብ ጉጅለታት ካርድታት ተጠቐም። ጉጅለታት ካርድ ተደራሪቦም ይጅምሩን ካብቲ ምብታኽ ነጥቢ display: flex;ዝጅምሩ ሓደ ዓይነት መለክዒታት ንኽተሓሓዙ ይጥቀሙን።sm

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ካርድ እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዝድግፍ ጽሑፍ ኣለዎ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ካርድ እዚ ካብቲ ቀዳማይ ንላዕሊ ነዊሕ ትሕዝቶ ኣለዎ ነቲ ማዕረ ቁመት ስጉምቲ ንምርኣይ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ

html ዝብል ጽሑፍ ኣሎ። 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

እግረ ጽሑፍ ዘለዎም ናይ ካርድ ጉጅለታት ክትጥቀም ከለኻ፡ ትሕዝቶኦም ብኣውቶማቲክ ክስለፍ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ካርድ እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዝድግፍ ጽሑፍ ኣለዎ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ካርድ እዚ ካብቲ ቀዳማይ ንላዕሊ ነዊሕ ትሕዝቶ ኣለዎ ነቲ ማዕረ ቁመት ስጉምቲ ንምርኣይ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
html ዝብል ጽሑፍ ኣሎ። 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

ሽቦ ካርድታት

ኣብ ሓደ መስርዕ ክንደይ ዓምድታት ሽቦ (ኣብ ዙርያ ካርድታትካ ዝተጠቕለሉ) ከም እተርኢ ንምቁጽጻር Bootstrap grid systemን ክፍልታቱን ተጠቐም .row-cols። ንኣብነት፡ ኣብዚ .row-cols-1ነተን ካርድታት ኣብ ሓደ ዓምዲ ምቕማጥ፡ ከምኡ’ውን .row-cols-md-2ኣርባዕተ ካርድታት ብማዕረ ስፍሓት ኣብ ብዙሓት መስመራት ምምቃል፡ ካብቲ ማእከላይ ነጥቢ ምብታኽ ንላዕሊ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ናብ .row-cols-3ቀይርካዮ ራብዓይ ካርድ ምጥቕላል ክትሪኢ ኢኻ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ማዕረ ቁመት ኣብ ዘድልየካ .h-100እዋን፡ ኣብተን ካርድታት ወስኸለን። ብነባሪ ማዕረ ቁመት እንተደሊኻ $card-height: 100%ኣብ Sass ከተቐምጥ ትኽእል ኢኻ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ሓጺር ካርድ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝነውሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

html ዝብል ጽሑፍ ኣሎ። 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ልክዕ ከምቲ ኣብ ጉጅለታት ካርድ ዝግበር፡ እግረ ጽሑፍ ካርድ ብኣውቶማቲክ ክስለፍ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ትሕዝቶ ቁሩብ ዝነውሐ እዩ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ካርድ እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዝድግፍ ጽሑፍ ኣለዎ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ኣብ ታሕቲ ከም ተፈጥሮኣዊ መሪሕነት ተወሳኺ ትሕዝቶ ዘለዎ ደጋፊ ጽሑፍ ዘለዎ ዝሰፍሐ ካርድ እዩ። እዚ ካርድ እዚ ካብቲ ቀዳማይ ንላዕሊ ነዊሕ ትሕዝቶ ኣለዎ ነቲ ማዕረ ቁመት ስጉምቲ ንምርኣይ።

ንመወዳእታ ግዜ ቅድሚ 3 ደቓይቕ ዝተመሓየሸ
html ዝብል ጽሑፍ ኣሎ። 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

ምህናጽ ዕንጸይቲ

ኣብ ንሕና ንባህሪ ናይ Masonryv4 -like ዓምድታት ንምምሳል CSS-only ሜላ ተጠቒምና ፣ እዚ ሜላ ግን ብዙሕ ዘይጥዑም ጎናዊ ሳዕቤናት ሒዙ መጺኡ . እዚ ዓይነት ኣቀማምጣ ኣብ ክህልወካ እንተደሊኻ ፡ በቃ ናይ Masonry plugin ክትጥቀም ትኽእል ኢኻ። Masonry ኣብ Bootstrap ኣይተኻተተን , ግን ንኽትጅምር ዝሕግዘካ ናይ ዲሞ ኣብነት ሰሪሕና ኣለና ።v5

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ ናይ CSS ተለዋዋጢ ኣቀራርባ፡ ካርድታት ሕጂ .cardንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ CSS ተቐያየርቲ ብመንገዲ Sass ይቕመጡ፣ ስለዚ Sass ምምዕርራይ ጌና ይድገፍ እዩ፣ ንሱ እውን።

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

ሳስ ተለዋዋጢ ረቛሒታት

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;