Source

كارتا

Bootstrap نىڭ كارتىلىرى جانلىق ۋە كېڭەيتكىلى بولىدىغان مەزمۇن قاچىسى بىلەن تەمىنلەيدۇ.

ھەققىدە

كارتا جانلىق ۋە كېڭەيتكىلى بولىدىغان مەزمۇن قاچىسى . ئۇ ماۋزۇ ۋە بەت ئاستى تاللاشلىرى ، كۆپ خىل مەزمۇنلار ، ئارقا كۆرۈنۈش رەڭلىرى ۋە كۈچلۈك كۆرسىتىش تاللانمىلىرىنى ئۆز ئىچىگە ئالىدۇ. ئەگەر Bootstrap 3 گە پىششىق بولسىڭىز ، كارتا كونا تاختاي ، قۇدۇق ۋە كىچىك كۆرۈنۈشلىرىمىزنىڭ ئورنىنى ئالىدۇ. بۇ زاپچاسلارغا ئوخشاش ئىقتىدارلار كارتا ئۈچۈن ئۆزگەرتىش سىنىپى سۈپىتىدە تەمىنلىنىدۇ.

مىسال

كارتا ئىمكانقەدەر ئاز بەلگە ۋە ئۇسلۇب بىلەن ياسالغان ، ئەمما يەنىلا بىر توننا كونترول ۋە خاسلاشتۇرۇشنى باشقۇرىدۇ. ئەۋرىشىم ساندۇق بىلەن ياسالغان ، ئۇلار ئاسان ماسلاشتۇرۇش بىلەن تەمىنلەيدۇ ھەمدە باشقا Bootstrap زاپچاسلىرى بىلەن ياخشى ئارىلاشتۇرۇلىدۇ. ئۇلارنىڭ 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*>. ئەگەر .card-titleۋە .card-subtitleتۈرلەر بىر .card-bodyتۈرگە قويۇلسا ، كارتا ئىسمى ۋە تارماق ئىسمى چىرايلىق توغرىلىنىدۇ.

كارتا ئىسمى
Card subtitle

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

كارتا ئۇلىنىشى باشقا ئۇلىنىش
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

سۈرەتلەر

.card-img-topرەسىمنى كارتىنىڭ ئۈستىگە قويىدۇ. بۇنىڭ بىلەن .card-text، كارتىغا تېكىست قوشقىلى بولىدۇ. ئىچىدىكى تېكىستنى .card-textئۆلچەملىك HTML خەتكۈچلىرى بىلەنمۇ يېزىشقا بولىدۇ.

رەسىم قالپىقى [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>

گۇرۇپپىلارنى تىزىڭ

يۇمىلاق تىزىملىك ​​گۇرۇپپىسى بار كارتىدىكى مەزمۇن تىزىملىكىنى قۇرۇڭ.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vosibulum at eros
<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>
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vosibulum at eros
<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]
كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vosibulum at eros
<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>

كارتا ئىچىگە ئىختىيارى ماۋزۇ ۋە / ياكى ئاستى بەت قوشۇڭ.

Featured
ئالاھىدە ماۋزۇ داۋالاش

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

بىر يەرگە بېرىڭ
<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*>

Featured
ئالاھىدە ماۋزۇ داۋالاش

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

بىر يەرگە بېرىڭ
<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>
نەقىل

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى
<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>
Featured
ئالاھىدە ماۋزۇ داۋالاش

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

بىر يەرگە بېرىڭ
<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>

Sizing

كارتا widthباشلاشنىڭ كونكرېت مەزمۇنى يوق ، شۇڭا باشقىچە دېيىلمىگەن بولسا ، ئۇلارنىڭ كەڭلىكى% 100 بولىدۇ. ئىختىيارى CSS ، كاتەكچە دەرسلىكى ، كاتەكچە Sass ئارىلاشمىسى ياكى ئاممىۋى مۇلازىمەتلەر بىلەن ئېھتىياجغا ئاساسەن بۇنى ئۆزگەرتەلەيسىز.

كاتەكچە بەلگىنى ئىشلىتىش

ئېلېكتر تورىنى ئىشلىتىپ ، ئېھتىياجغا ئاساسەن كارتىلارنى ستون ۋە قۇرغا ئوراپ بېرىڭ.

ئالاھىدە ماۋزۇ داۋالاش

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

بىر يەرگە بېرىڭ
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ئاممىۋى مۇلازىمەتلەرنى ئىشلىتىش

ئىشلەتكىلى بولىدىغان رازمېرلىق قوراللىرىمىزدىن پايدىلىنىپ كارتىنىڭ كەڭلىكىنى تېز بەلگىلەڭ.

كارتا ئىسمى

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

Button
كارتا ئىسمى

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

Button
<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 نىڭ nav زاپچاسلىرى بىلەن كارتىنىڭ بېشىغا (ياكى توسۇش) بىر قىسىم يول باشلاش قوشۇڭ .

ئالاھىدە ماۋزۇ داۋالاش

تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.

بىر يەرگە بېرىڭ
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" 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>

كارتا ئۇسلۇبى

كارتا ئۇلارنىڭ تەگلىكى ، چېگرىسى ۋە رەڭگىنى تەڭشەش ئۈچۈن ھەر خىل تاللاشلارنى ئۆز ئىچىگە ئالىدۇ.

تەگلىك ۋە رەڭ

تېكىست ۋە تەگلىك ئەسلىھەلىرىنى ئىشلىتىپ كارتىنىڭ كۆرۈنۈشىنى ئۆزگەرتىڭ.

Header
دەسلەپكى كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
ئىككىلەمچى كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
خەتەرلىك كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
ئۇچۇر كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
يېنىك كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
قاراڭغۇ كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

<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

Header
دەسلەپكى كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
ئىككىلەمچى كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
خەتەرلىك كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
ئۇچۇر كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
يېنىك كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

Header
قاراڭغۇ كارتا ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

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

Mixins utilities

ئېھتىياجغا ئاساسەن كارتا بېشى ۋە بەت ئاستىدىكى چېگرالارنى ئۆزگەرتەلەيسىز ، ھەتتا ئۇلارنى background-colorئۆچۈرەلەيسىز .bg-transparent.

Header
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى

كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.

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

كارتا ئورۇنلاشتۇرۇشى

Bootstrap كارتا ئىچىدىكى مەزمۇنلارنى لايىھىلەشتىن باشقا ، بىر يۈرۈش كارتا ئورۇنلاشتۇرۇشنىڭ بىر قانچە تاللاشلىرىنى ئۆز ئىچىگە ئالىدۇ. ھازىرچە بۇ ئورۇنلاشتۇرۇش تاللانمىلىرى تېخى ئىنكاس قايتۇرمىدى .

كارتا گۇرۇپپىلىرى

كارتا گۇرۇپپىلىرىنى ئىشلىتىپ ، كەڭلىك ۋە ئېگىزلىك تۈۋرۈكى بىلەن يەككە ، قوشۇمچە ئېلېمېنت قىلىپ كۆرسىتىڭ. كارتا گۇرۇپپىلىرى 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 ئارقىلىق تەشكىللىگىلى بولىدۇ .card-columns. columnكارتا ئوڭاي ​​ماسلاشتۇرۇش ئۈچۈن flexbox نىڭ ئورنىغا CSS خۇسۇسىيىتى بىلەن ياسالغان . كارتا يۇقىرىدىن تۆۋەنگە ، سولدىن ئوڭغا بۇيرۇلغان.

Heads up! كارتا تۈۋرۈكى بىلەن بولغان مۇساپىڭىز ئوخشىماسلىقى مۇمكىن. كارتىلارنىڭ تۈۋرۈكتىن بۆسۈپ ئۆتۈشىنىڭ ئالدىنى ئېلىش ئۈچۈن ، بىز ئۇلارنى ئوق ئۆتمەس ھەل قىلىش چارىسى ئەمەس display: inline-blockقىلىپ بېكىتىشىمىز كېرەك.column-break-inside: avoid

100% x160
يېڭى قۇرغا ئورالغان كارتا ئىسمى

بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى
100% x160
كارتا ئىسمى

بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.

ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. Integer posuere erat.

مەنبە ماۋزۇسىدا داڭلىق كىشى
كارتا ئىسمى

بۇ كارتىنىڭ ئاستىدا دائىملىق ماۋزۇ ۋە قىسقا تېكىست بار.

ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان

100% x260

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى
كارتا ئىسمى

بۇ تۆۋەندىكى ماۋزۇ ۋە قوشۇمچە تېكىست بار باشقا كارتا. بۇ كارتىنىڭ ئومۇمىي جەھەتتىن سەل ئېگىز بولۇشى ئۈچۈن قوشۇمچە مەزمۇنلار بار.

ئەڭ ئاخىرقى قېتىم 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>

كارتا ستونلىرىنى يەنە بىر قىسىم قوشۇمچە كودلار ب��لەن ئۇزارتقىلى ۋە خاسلاشتۇرغىلى بولىدۇ. تۆۋەندە كۆرسىتىلگىنى بىز ئوخشاش CSS - CSS تۈۋرۈكى ئارقىلىق سىنىپنىڭ كېڭەيتىلمىسى بولۇپ ، .card-columnsستون سانىنى ئۆزگەرتىش ئۈچۈن بىر يۈرۈش ئىنكاسچان قاتلام ھاسىل قىلىدۇ.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}