Source

ካርድታት

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

ብዝዕባ

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

ኣብነት

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

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

ናብ ሓደ ቦታ ኪድ
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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ዘሎ ጽሑፍ ብመደበኛ ኤችቲኤምኤል መለለዪታት እውን ቅዲ ክግበር ይኽእል።

ሽፋን ምስሊ [100%x180]።

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

ናይ ክሽነ መሕጸቢ

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

ሽፋን ምስሊ [100%x180]።
ኣርእስቲ ካርድ

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

  • ክራስ ጁስቶ ኦዲዮ
  • ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
  • ቬስቲቡሉም ኣብ ኤሮስ
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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="#">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="#">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>

ምስልታት

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

ምስሊ ቆቢዕ

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

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

ኣርእስቲ ካርድ

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

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

100%x180 ይኸውን
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

ምስሊ ምድብላቕ

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

100%x270 ይኸውን
ኣርእስቲ ካርድ

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

ቅዲታት ካርድ

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

ድሕረ ባይታ ሕብርን

መልክዕ ካርድ ንምቕያር ናይ ጽሑፍን ድሕረ ባይታ ዩቲሊቲታት ተጠቐም ።

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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;ንዩኒፎርም ስዝነቶም ንምዕዋት ይጥቀሙሉ።

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

ካርድ ዲክስ

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

100%x200 ይኸውን
ኣርእስቲ ካርድ

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

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

100%x200 ይኸውን
ኣርእስቲ ካርድ

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

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

100%x200 ይኸውን
ኣርእስቲ ካርድ

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

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

100%x180 ይኸውን
ኣርእስቲ ካርድ

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

ዓምድታት ካርድ

ካርድታት ብ CSS ጥራይ ናብ Masonry ዝመስሉ ዓምድታት ብ CSS ብምጥቕላል ክውደቡ ይኽእሉ .card-columns። ካርድታት ኣብ columnክንዲ ብflexbox ብCSS ንብረታት ንቐሊል ኣሰላልፋ ይስራሕ። ካርድታት ካብ ላዕሊ ናብ ታሕቲን ካብ ጸጋም ናብ የማንን ይእዘዙ።

ርእሲ ንላዕሊ! ምስ ዓምድታት ካርድ ዘለካ ማይልስ ክፈላለ ይኽእል እዩ። ካርድታት ኣብ ዓምድታት ከይስበር ንምክልኻል ፡ ገና ጥይት ዘይብሉ ፍታሕ ከምዘይኮነ ክንሰርዖም ኣለና display: inline-blockcolumn-break-inside: avoid

100%x160 ይኸውን
ናብ ሓድሽ መስመር ዝጠቕልል ኣርእስቲ ካርድ

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

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.

ኣብ ምንጪ ኣርእስቲ ፍሉጥ ሰብ
100%x160 ይኸውን
ኣርእስቲ ካርድ

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

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

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat.

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

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

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

100%x260 ይኸውን

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ posuere erat a ante.

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

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

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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;
  }
}