in English

ካርድታት

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

ብዝዕባ

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

ኣብነት

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

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

ናብ ሓደ ቦታ ኪድ
<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ዘሎ ጽሑፍ ብመደበኛ ኤችቲኤምኤል መለለዪታት እውን ቅዲ ክግበር ይኽእል።

Placeholder Image cap

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

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

ናይ ክሽነ መሕጸቢ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

  • ሓደ ኣቕሓ
  • ካልኣይ ኣቕሓ
  • ሳልሳይ ኣቕሓ
<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>
ጥቕሲ

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
<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 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">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>

ምስልታት

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

ምስሊ ቆቢዕ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

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

ኣርእስቲ ካርድ

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

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

Placeholder Image cap
<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 ደቓይቕ ዝተመሓየሸ

<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ምብታኽ ነጥቢ ኣግማድ ንገብሮ። ከከም ትሕዝቶ ካርድኻ ተወሳኺ ምትዕርራይ ከድልየካ ይኽእል እዩ።

Placeholder Image
ኣርእስቲ ካርድ

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

ንመወዳእታ ግዜ ቅድሚ 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

Placeholder Image cap
ኣርእስቲ ካርድ

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

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

ንመወዳእታ ግዜ ቅድሚ 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>

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

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

ካርድ ዲክስ

ኣብ ነንሕድሕዶም ዘይተተሓሓዙ ማዕረ ስፍሓትን ቁመትን ዘለዎም ስብስብ ካርድታት የድልዩኻ? ናይ ካርድ ዲክስ ተጠቐም።

Placeholder Image cap
ኣርእስቲ ካርድ

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

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

ንመወዳእታ ግዜ ቅድሚ 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>

ልክዕ ከምቲ ምስ ጉጅለታት ካርድ ዝግበር፡ ኣብ ዲክስ ዝርከቡ እግረ-ገጻት ካርድ ብኣውቶማቲክ ክስለፉ እዮም።

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

<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ኣርባዕተ ካርድታት ብማዕረ ስፍሓት ኣብ ብዙሓት መስመራት ምምቃል፡ ካብቲ ማእከላይ ነጥቢ ምብታኽ ንላዕሊ።

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

<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ቀይርካዮ ራብዓይ ካርድ ምጥቕላል ክትሪኢ ኢኻ።

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

<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 ከተቐምጥ ትኽእል ኢኻ።

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

እዚ ሓጺር ካርድ እዩ።

Placeholder Image cap
ኣርእስቲ ካርድ

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

Placeholder Image cap
ኣርእስቲ ካርድ

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

<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-blockcolumn-break-inside: avoid

Placeholder Image cap
ናብ ሓድሽ መስመር ዝጠቕልል ኣርእስቲ ካርድ

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

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
Placeholder Image cap
ኣርእስቲ ካርድ

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

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

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
ኣርእስቲ ካርድ

እዚ ካርድ እዚ ኣብ ትሕቲኡ ስሩዕ ኣርእስትን ሓጺር ሕጡበ ጽሑፍን ኣለዎ።

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

Placeholder Card image

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

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
ኣርእስቲ ካርድ

እዚ ካልእ ኣብ ታሕቲ ኣርእስትን ደጋፊ ጽሑፍን ዘለዎ ካርድ እዩ። እዚ ካርድ ብሓፈሻ ቁሩብ ነዊሕ ንኽኸውን ገለ ተወሳኺ ትሕዝቶ ኣለዎ።

ንመወዳእታ ግዜ ቅድሚ 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;
  }
}