كارتا

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

بۇ بەتتە

ھەققىدە

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

مىسال

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

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

كارتا ئىسمى

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

بىر يەرگە بېرىڭ

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

مەزمۇن تىپلىرى

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

بەدەن

كارتىنىڭ قۇرۇلۇش بۆلىكى .card-body. كارتا ئىچىدىكى پاتقاققا ئېھتىياجلىق بولغاندا ئۇنى ئىشلىتىڭ.

بۇ كارتا گەۋدىسى ئىچىدىكى بەزى تېكىستلەر.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ماۋزۇ ، تېكىست ۋە ئۇلىنىشلار

كارتا ماۋزۇلىرى بەلگە قوشۇش ئارقىلىق .card-titleئىشلىتىلىدۇ <h*>. .card-linkئوخشاش ئۇسۇلدا ، ئۇلانمىلار قوشۇلۇپ ، بەلگە قوشۇش ئارقىلىق بىر-بىرىنىڭ يېنىغا قويۇلىدۇ <a>.

خەتكۈچكە بەلگە قوشۇش ئارقىلىق .card-subtitleئىشلىتىلىدۇ <h*>. ئەگەر .card-titleۋە .card-subtitleتۈرلەر بىر .card-bodyتۈرگە قويۇلسا ، كارتا ئىسمى ۋە تارماق ئىسمى چىرايلىق توغرىلىنىدۇ.

كارتا ئىسمى

Card subtitle

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

كارتا ئۇلىنىشى باشقا ئۇلىنىش

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

سۈرەتلەر

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

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

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

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

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Featured

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

Card footer

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

ئاشخانا چۆكمىسى

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

كارتا ئىسمى

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

بىر تۈر
ئىككىنچى تۈر
ئۈچىنچى تۈر

كارتا ئۇلىنىشى باشقا ئۇلىنىش

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Header and footer

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

Featured

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

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

بىر يەرگە بېرىڭ

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ئېلېمېنتلارنى قوشۇش ئارقىلىق كارتا ماۋزۇسىنى ئۇسلۇب .card-headerقىلىشقا بولىدۇ.<h*>

Featured

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

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

بىر يەرگە بېرىڭ

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

نەقىل

ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.

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

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Featured

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

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

بىر يەرگە بېرىڭ

2 كۈن بۇرۇن

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Sizing

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

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

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

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

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

بىر يەرگە بېرىڭ

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

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

بىر يەرگە بېرىڭ

html

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

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

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

كارتا ئىسمى

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

Button

كارتا ئىسمى

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

Button

html

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

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

ئىختىيارى CSS ئىشلىتىش

ئۇسلۇب جەدۋىلىڭىزدە ياكى ئىچكى ئۇسلۇبتا خاس CSS نى ئىشلىتىپ كەڭلىك بەلگىلەڭ.

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

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

بىر يەرگە بېرىڭ

html

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

تېكىستنى توغرىلاش

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

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

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

بىر يەرگە بېرىڭ

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

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

بىر يەرگە بېرىڭ

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

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

بىر يەرگە بېرىڭ

html

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

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

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

Bootstrap نىڭ nav زاپچاسلىرى بىلەن كارتىنىڭ بېشىغا (ياكى توسۇش) بىر قىسىم يول باشلاش قوشۇڭ .

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

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

بىر يەرگە بېرىڭ

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

بىر يەرگە بېرىڭ

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

سۈرەتلەر

كارتا رەسىم بىلەن ئىشلەشنىڭ بىر قانچە تاللانمىسىنى ئۆز ئىچىگە ئالىدۇ. كارتىنىڭ ئىككى تەرىپىگە «رەسىم قالپىقى» قوشۇش ، رەسىملەرنى كارتا مەزمۇنى بىلەن قاپلاش ياكى رەسىمنى كارتىغا قىستۇرۇشتىن تاللاڭ.

رەسىم قالپىقى

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

كارتا ئىسمى

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

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

كارتا ئىسمى

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

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

رەسىم قاپلانغان

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

كارتا ئىسمى

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

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

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

توغرىسىغا

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

كارتا ئىسمى

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

html

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

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

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

تەگلىك ۋە رەڭ

V5.2.0 گە قوشۇلدى

ياردەمچىلىرىمىز بىلەن background-colorسېلىشتۇرما ئالدىنقى ئورۇنغا قويۇڭ . ئىلگىرى سىز ئۆزىڭىزنىڭ تاللىشى ۋە ئۇسلۇبتىكى ئىشلىتىش قوراللىرىنى قولدا جۈپلەشتۈرۈش تەلەپ قىلىنغان بولۇپ ، ياقتۇرسىڭىز يەنىلا ئىشلىتەلەيسىز.color.text-bg-{color}.text-{color}.bg-{color}

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

html

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

ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش

رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .visually-hiddenدەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.

چېگرا

چېگرا ئەسلىھەلىرىنى ئىشلىتىپ border-colorكارتىنىلا ئۆزگەرتىڭ . شۇنىڭغا دىققەت قىلىڭكى ، تۆۋەندە كۆرسىتىلگەندەك ئاتا-ئانىلارغا ياكى كارتا مەزمۇنىنىڭ بىر قىسمىغا .text-{color}دەرس قويسىڭىز بولىدۇ ..card

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

Header

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

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

html

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

Mixins utilities

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

Header

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

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

Footer

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

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

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

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

كارتا گۇرۇپپىلىرىنى ئىشلىتىپ ، كەڭلىك ۋە ئېگىزلىك تۈۋرۈكى بىلەن يەككە ، قوشۇمچە ئېلېمېنت قىلىپ كۆرسىتىڭ. كارتا گۇرۇپپىلىرى رەتكە تۇرغۇزۇلۇپ ، بۆسۈش نۇقتىسىدىن display: flex;باشلاپ ئوخشاش ئۆلچەم بىلەن باغلىنىدۇ .sm

كارتا ئىسمى

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

كارتا ئىسمى

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

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

كارتا ئىسمى

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

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

html

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

بەت ئاستى بىلەن كارتا گۇرۇپپىسىنى ئىشلەتكەندە ، ئۇلارنىڭ مەزمۇنى ئاپتوماتىك تىزىلىدۇ.

كارتا ئىسمى

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

كارتا ئىسمى

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

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

كارتا ئىسمى

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

html

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

كاتەكچە كارتا

Bootstrap تور سىستېمىسى ۋە ئۇنىڭ .row-colsسىنىپلىرىنى ئىشلىتىپ ، ھەر بىر قۇردا قانچە كاتەكچە ئىستون (كارتىڭىزغا ئورالغان) نى كونترول قىلىڭ. مەسىلەن ، بۇ يەردە .row-cols-1كارتىلارنى بىر ئىستونغا تىزىش ، ھەمدە .row-cols-md-2تۆت نۇقتىنى بۆلۈش ئارقىلىق ئوتتۇرا سىزىقتىن يۇقىرى قۇرغا ئوخشاش كەڭلىكتە ئوخشاش كەڭلىكتە بۆلۈش.

كارتا ئىسمى

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

كارتا ئىسمى

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

كارتا ئىسمى

html

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

ئۇنى ئۆزگەرتىڭ .row-cols-3، تۆتىنچى كارتا ئورالغانلىقىنى كۆرىسىز.

كارتا ئىسمى

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

كارتا ئىسمى

html

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

ئوخشاش ئېگىزلىككە ئېھتىياجلىق بولغاندا .h-100، كارتىغا قوشۇڭ. $card-height: 100%ئەگەر سۈكۈتتىكى تەڭ ئېگىزلىكنى ئويلىسىڭىز ، Sass نى تەڭشىسىڭىز بولىدۇ .

كارتا ئىسمى

بۇ قىسقا كارتا.

كارتا ئىسمى

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

كارتا ئىسمى

html

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

كارتا گۇرۇپپىلىرىغا ئوخشاش ، كارتا ئاستىدىكىلەر ئاپتوماتىك تىزىلىدۇ.

كارتا ئىسمى

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

كارتا ئىسمى

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

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

كارتا ئىسمى

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

بىز ماسونغاv4 ئوخشاش تۈۋرۈكلەرنىڭ ھەرىكىتىنى تەقلىد قىلىش ئۈچۈن پەقەت CSS تېخنىكىسىنى قوللاندۇق ، ئەمما بۇ تېخنىكا نۇرغۇن يېقىمسىز ئەكىس تەسىرلەرنى ئېلىپ كەلدى. ئەگەر بۇ خىل ئورۇنلاشتۇرۇشنى ئويلىسىڭىز ، Masonry قىستۇرمىسىدىن پايدىلانسىڭىز بولىدۇ. Masonry Bootstrap غا كىرگۈزۈلمىگەن ، ئەمما بىز سىزنىڭ ئىش باشلىشىڭىزغا ياردەم بېرىش ئۈچۈن ئۈلگە مىسال كەلتۈردۇق .v5

CSS

ئۆزگەرگۈچى مىقدار

V5.2.0 گە قوشۇلدى

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

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

Sass ئۆزگەرگۈچى مىقدار

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