كارتا
Bootstrap نىڭ كارتىلىرى جانلىق ۋە كېڭەيتكىلى بولىدىغان مەزمۇن قاچىسى بىلەن تەمىنلەيدۇ.
ھەققىدە
كارتا جانلىق ۋە كېڭەيتكىلى بولىدىغان مەزمۇن قاچىسى . ئۇ ماۋزۇ ۋە بەت ئاستى تاللاشلىرى ، كۆپ خىل مەزمۇنلار ، ئارقا كۆرۈنۈش رەڭلىرى ۋە كۈچلۈك كۆرسىتىش تاللانمىلىرىنى ئۆز ئىچىگە ئالىدۇ. ئەگەر Bootstrap 3 گە پىششىق بولسىڭىز ، كارتا كونا تاختاي ، قۇدۇق ۋە كىچىك كۆرۈنۈشلىرىمىزنىڭ ئورنىنى ئالىدۇ. بۇ زاپچاسلارغا ئوخشاش ئىقتىدارلار كارتا ئۈچۈن ئۆزگەرتىش سىنىپى سۈپىتىدە تەمىنلىنىدۇ.
مىسال
كارتا ئىمكانقەدەر ئاز بەلگە ۋە ئۇسلۇب بىلەن ياسالغان ، ئەمما يەنىلا بىر توننا كونترول ۋە خاسلاشتۇرۇشنى باشقۇرىدۇ. ئەۋرىشىم ساندۇق بىلەن ياسالغان ، ئۇلار ئاسان ماسلاشتۇرۇش بىلەن تەمىنلەيدۇ ھەمدە باشقا Bootstrap زاپچاسلىرى بىلەن ياخشى ئارىلاشتۇرۇلىدۇ. ئۇلارنىڭ margin
سۈكۈتتىكى قىممىتى يوق ، شۇڭا ئېھتىياجغا ئاساسەن بوشلۇق ئەسلىھەلىرىنى ئىشلىتىڭ .
تۆۋەندىكىسى ئارىلاشما مەزمۇن ۋە كەڭلىكتىكى ئاساسىي كارتىنىڭ مىسالى. كارتىلارنىڭ قوزغىلىدىغان مۇقىم كەڭلىكى يوق ، شۇڭا ئۇلار تەبىئىي ھالدا ئانا ئېلېمېنتنىڭ تولۇق كەڭلىكىنى تولدۇرىدۇ. بۇ بىزنىڭ ھەرخىل چوڭلۇقتىكى تاللاشلىرىمىز بىلەن ئاسانلا خاسلاشتۇرۇلغان .
كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
بىر يەرگە بېرىڭ<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
مەزمۇن تىپلىرى
كارتا رەسىم ، تېكىست ، تىزىملىك گۇرۇپپىسى ، ئۇلىنىش ۋە باشقىلارنى ئۆز ئىچىگە ئالغان كۆپ خىل مەزمۇنلارنى قوللايدۇ. تۆۋەندە قوللايدىغان مىساللار.
بەدەن
كارتىنىڭ قۇرۇلۇش بۆلىكى .card-body
. كارتا ئىچىدىكى پاتقاققا ئېھتىياجلىق بولغاندا ئۇنى ئىشلىتىڭ.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
ماۋزۇ ، تېكىست ۋە ئۇلىنىشلار
كارتا ماۋزۇلىرى بەلگە قوشۇش ئارقىلىق .card-title
ئىشلىتىلىدۇ <h*>
. .card-link
ئوخشاش ئۇسۇلدا ، ئۇلانمىلار قوشۇلۇپ ، بەلگە قوشۇش ئارقىلىق بىر-بىرىنىڭ يېنىغا قويۇلىدۇ <a>
.
خەتكۈچكە بەلگە قوشۇش ئارقىلىق .card-subtitle
ئىشلىتىلىدۇ <h*>
. ئەگەر .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 خەتكۈچلىرى بىلەنمۇ يېزىشقا بولىدۇ.
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
گۇرۇپپىلارنى تىزىڭ
يۇمىلاق تىزىملىك گۇرۇپپىسى بار كارتىدىكى مەزمۇن تىزىملىكىنى قۇرۇڭ.
- بىر تۈر
- ئىككىنچى تۈر
- ئۈچىنچى تۈر
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- بىر تۈر
- ئىككىنچى تۈر
- ئۈچىنچى تۈر
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- بىر تۈر
- ئىككىنچى تۈر
- ئۈچىنچى تۈر
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
ئاشخانا چۆكمىسى
لازىملىق كارتا قۇرۇش ئۈچۈن كۆپ خىل مەزمۇن تىپلىرىنى ئارىلاشتۇرۇڭ ۋە ماسلاشتۇرۇڭ ياكى ھەممە نەرسىنى شۇ يەرگە تاشلاڭ. تۆۋەندە كۆرسىتىلگەن رەسىم ئۇسلۇبى ، بۆلەك ، تېكىست ئۇسلۇبى ۋە تىزىملىك گۇرۇپپىسى - ھەممىسى مۇقىم كەڭلىكتىكى كارتىغا ئورالغان.
كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
- بىر تۈر
- ئىككىنچى تۈر
- ئۈچىنچى تۈر
<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
كارتا ئىچىگە ئىختىيارى ماۋزۇ ۋە / ياكى ئاستى بەت قوشۇڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ<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>
ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
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>
ئاممىۋى مۇلازىمەتلەرنى ئىشلىتىش
ئىشلەتكىلى بولىدىغان رازمېرلىق قوراللىرىمىزدىن پايدىلىنىپ كارتىنىڭ كەڭلىكىنى تېز بەلگىلەڭ.
<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-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 زاپچاسلىرى بىلەن كارتىنىڭ بېشىغا (ياكى توسۇش) بىر قىسىم يول باشلاش قوشۇڭ .
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ<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>
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ<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 مىنۇت ئىلگىرى يېڭىلانغان
<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>
رەسىم قاپلانغان
رەسىمنى كارتا تەگلىكىگە ئايلاندۇرۇپ ، كارتىڭىزنىڭ تېكىستىنى قاپلاڭ. رەسىمگە ئاساسەن ، قوشۇمچە ئۇسلۇب ياكى ئىقتىدارلارغا ئېھتىياجلىق بولۇشىڭىز مۇمكىن.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
توغرىسىغا
كاتەكچە ۋە ئاممىۋى دەرسلىكلەرنى بىرلەشتۈرۈش ئارقىلىق ، كارتا كۆچمە ۋە دوستانە ئۇسۇلدا توغرىسىغا توغرىلىنىدۇ. تۆۋەندىكى مىسالدا ، تور تورىنى ئۆچۈرۈۋېتىمىز .g-0
ۋە .col-md-*
دەرسلەرنى ئىشلىتىپ كارتىنى توغرىسىغا md
توغرىلايمىز. كارتا مەزمۇنىغا ئاساسەن يەنىمۇ تەڭشەش كېرەك.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئەڭ ئاخىر��ى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
<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>
كارتا ئۇسلۇبى
كارتا ئۇلارنىڭ تەگلىكى ، چېگرىسى ۋە رەڭگىنى تەڭشەش ئۈچۈن ھەر خىل تاللاشلارنى ئۆز ئىچىگە ئالىدۇ.
تەگلىك ۋە رەڭ
تېكىستنىڭ رەڭگى ۋە تەگلىك ئەسلىھەلىرىنى ئىشلىتىپ كارتىنىڭ كۆرۈنۈشىنى ئۆزگەرتىڭ.
دەسلەپكى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئىككىلەمچى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
خەتەرلىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئۇچۇر كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
يېنىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
قاراڭغۇ كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
<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-dark 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-dark 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-dark 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>
ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش
رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .visually-hidden
دەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.
چېگرا
چېگرا ئەسلىھەلىرىنى ئىشلىتىپ 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">
<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
.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
<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 مىنۇت ئىلگىرى يېڭىلانغان
<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>
بەت ئاستى بىلەن كارتا گۇرۇپپىسىنى ئىشلەتكەندە ، ئۇلارنىڭ مەزمۇنى ئاپتوماتىك تىزىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ كارتىنىڭ ھەتتا ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
<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
تۆت نۇقتىنى بۆلۈش ئارقىلىق ئوتتۇرا سىزىقتىن يۇقىرى قۇرغا ئوخشاش كەڭلىكتە ئوخشاش كەڭلىكتە بۆلۈش.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
<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
، تۆتىنچى كارتا ئورالغانلىقىنى كۆرىسىز.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
<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 نى تەڭشىسىڭىز بولىدۇ .
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ قىسقا كارتا.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
<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>
كارتا گۇرۇپپىلىرىغا ئوخشاش ، كارتا ئاستىدىكىلەر ئاپتوماتىك تىزىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ كارتىنىڭ ھەتتا ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
<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
Sass
ئۆزگەرگۈچى مىقدار
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$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;