Bootstrap نىڭ كارتىلىرى جانلىق ۋە كېڭەيتكىلى بولىدىغان مەزمۇن قاچىسى بىلەن تەمىنلەيدۇ.
ھەققىدە
كارتا جانلىق ۋە كېڭەيتكىلى بولىدىغان مەزمۇن قاچىسى . ئۇ ماۋزۇ ۋە بەت ئاستى تاللاشلىرى ، كۆپ خىل مەزمۇنلار ، ئارقا كۆرۈنۈش رەڭلىرى ۋە كۈچلۈك كۆرسىتىش تاللانمىلىرىنى ئۆز ئىچىگە ئالىدۇ. ئەگەر Bootstrap 3 گە پىششىق بولسىڭىز ، كارتا كونا تاختاي ، قۇدۇق ۋە كىچىك كۆرۈنۈشلىرىمىزنىڭ ئورنىنى ئالىدۇ. بۇ زاپچاسلارغا ئوخشاش ئىقتىدارلار كارتا ئۈچۈن ئۆزگەرتىش سىنىپى سۈپىتىدە تەمىنلىنىدۇ.
مىسال
كارتا ئىمكانقەدەر ئاز بەلگە ۋە ئۇسلۇب بىلەن ياسالغان ، ئەمما يەنىلا بىر توننا كونترول ۋە خاسلاشتۇرۇشنى باشقۇرىدۇ. ئەۋرىشىم ساندۇق بىلەن ياسالغان ، ئۇلار ئاسان ماسلاشتۇرۇش بىلەن تەمىنلەيدۇ ھەمدە باشقا Bootstrap زاپچاسلىرى بىلەن ياخشى ئارىلاشتۇرۇلىدۇ. ئۇلارنىڭ margin
سۈكۈتتىكى قىممىتى يوق ، شۇڭا ئېھتىياجغا ئاساسەن بوشلۇق ئەسلىھەلىرىنى ئىشلىتىڭ .
تۆۋەندىكىسى ئارىلاشما مەزمۇن ۋە كەڭلىكتىكى ئاساسىي كارتىنىڭ مىسالى. كارتىلارنىڭ قوزغىلىدىغان مۇقىم كەڭلىكى يوق ، شۇڭا ئۇلار تەبىئىي ھالدا ئانا ئېلېمېنتنىڭ تولۇق كەڭلىكىنى تولدۇرىدۇ. بۇ بىزنىڭ ھەرخىل چوڭلۇقتىكى تاللاشلىرىمىز بىلەن ئاسانلا خاسلاشتۇرۇلغان .
كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
بىر يەرگە بېرىڭ
مەزمۇن تىپلىرى
كارتا رەسىم ، تېكىست ، تىزىملىك گۇرۇپپىسى ، ئۇلىنىش ۋە باشقىلارنى ئۆز ئىچىگە ئالغان كۆپ خىل مەزمۇنلارنى قوللايدۇ. تۆۋەندە قوللايدىغان مىساللار.
بەدەن
كارتىنىڭ قۇرۇلۇش بۆلىكى .card-body
. كارتا ئىچىدىكى پاتقاققا ئېھتىياجلىق بولغاندا ئۇنى ئىشلىتىڭ.
بۇ كارتا گەۋدىسى ئىچىدىكى بەزى تېكىستلەر.
ماۋزۇ ، تېكىست ۋە ئۇلىنىشلار
كارتا ماۋزۇلىرى بەلگە قوشۇش ئارقىلىق .card-title
ئىشلىتىلىدۇ <h*>
. .card-link
ئوخشاش ئۇسۇلدا ، ئۇلانمىلار قوشۇلۇپ ، بەلگە قوشۇش ئارقىلىق بىر-بىرىنىڭ يېنىغا قويۇلىدۇ <a>
.
خەتكۈچكە بەلگە قوشۇش ئارقىلىق .card-subtitle
ئىشلىتىلىدۇ <h*>
. ئەگەر .card-title
ۋە .card-subtitle
تۈرلەر بىر .card-body
تۈرگە قويۇلسا ، كارتا ئىسمى ۋە تارماق ئىسمى چىرايلىق توغرىلىنىدۇ.
كارتا ئىسمى
Card subtitle
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
كارتا ئۇلىنىشى
باشقا ئۇلىنىش
سۈرەتلەر
.card-img-top
رەسىمنى كارتىنىڭ ئۈستىگە قويىدۇ. بۇنىڭ بىلەن .card-text
، كارتىغا تېكىست قوشقىلى بولىدۇ. ئىچىدىكى تېكىستنى .card-text
ئۆلچەملىك HTML خەتكۈچلىرى بىلەنمۇ يېزىشقا بولىدۇ.
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
گۇرۇپپىلارنى تىزىڭ
يۇمىلاق تىزىملىك گۇرۇپپىسى بار كارتىدىكى مەزمۇن تىزىملىكىنى قۇر.
- Cras justo odio
- Dapibus ac facilisis in
- Eros دىكى Vestibulum
- Cras justo odio
- Dapibus ac facilisis in
- Eros دىكى Vestibulum
- Cras justo odio
- Dapibus ac facilisis in
- Eros دىكى Vestibulum
ئاشخانا چۆكمىسى
لازىملىق كارتا قۇرۇش ئۈچۈن كۆپ مەزمۇن مەزمۇنىنى ئارىلاشتۇرۇڭ ۋە ماسلاشتۇرۇڭ ياكى ھەممە نەرسىنى شۇ يەرگە تاشلاڭ. تۆۋەندە كۆرسىتىلگەن رەسىم ئۇسلۇبى ، بۆلەكلەر ، تېكىست ئۇسلۇبى ۋە تىزىملىك گۇرۇپپىسى - ھەممىسى مۇقىم كەڭلىكتىكى كارتىغا ئورالغان.
كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
- Cras justo odio
- Dapibus ac facilisis in
- Eros دىكى Vestibulum
كارتا ئىچىگە ئىختىيارى ماۋزۇ ۋە / ياكى ئاستى بەت قوشۇڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئېلېمېنتلارنى قوشۇش ئارقىلىق كارتا ماۋزۇسىنى ئۇسلۇب .card-header
قىلىشقا بولىدۇ.<h*>
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى تالانت. پۈتۈن سان پوستلاق چۈمۈلە.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
Sizing
كارتا width
باشلاشنىڭ كونكرېت ئەمەسلىكىنى پەرەز قىلىدۇ ، شۇڭا باشقىچە دېيىلمىگەن بولسا ، ئۇلارنىڭ كەڭلىكى 100% بولىدۇ. ئىختىيارى CSS ، كاتەكچە دەرسلىكى ، كاتەكچە Sass ئارىلاشمىسى ياكى ئاممىۋى مۇلازىمەتلەر بىلەن ئېھتىياجغا ئاساسەن بۇنى ئۆزگەرتەلەيسىز.
كاتەكچە بەلگىنى ئىشلىتىش
كاتەكچە ئىشلىتىپ ، ئېھتىياجغا ئاساسەن كارتىلارنى ستون ۋە قۇرغا ئوراپ بېرىڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئاممىۋى مۇلازىمەتلەرنى ئىشلىتىش
ئىشلەتكىلى بولىدىغان رازمېرلىق قوراللىرىمىزدىن پايدىلىنىپ كارتىنىڭ كەڭلىكىنى تېز بەلگىلەڭ.
كارتا ئىسمى
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
Button
كارتا ئىسمى
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
Button
ئىختىيارى CSS ئىشلىتىش
ئۇسلۇب جەدۋىلىڭىزدە ياكى ئىچكى ئۇسلۇبتا خاس CSS نى ئىشلىتىپ كەڭلىك بەلگىلەڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
تېكىستنى توغرىلاش
سىز ھەر قانداق كارتىنىڭ تېكىست توغرىلىنىشىنى پۈتۈنلەي ياكى ئالاھىدە قىسىمدا تېكىست توغرىلاش سىنىپىمىز بىلەن ئۆزگەرتەلەيسىز .
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
يول باشلاش
Bootstrap نىڭ nav زاپچاسلىرى بىلەن كارتىنىڭ بېشىغا (ياكى توسۇش) بىر قىسىم يول باشلاش قوشۇڭ .
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
سۈرەتلەر
كارتا رەسىم بىلەن ئىشلەشنىڭ بىر قانچە تاللاشلىرىنى ئۆز ئىچىگە ئالىدۇ. كارتىنىڭ ئىككى تەرىپىگە «رەسىم قالپىقى» نى قوشۇش ، رەسىملەرنى كارتا مەزمۇنى بىلەن قاپلاش ياكى رەسىمنى كارتىغا قىستۇرۇشنى تاللاڭ.
رەسىم قالپىقى
ماۋزۇ ۋە بەت ئاستىغا ئوخشاش ، كارتا ئۈستى ۋە ئاستىدىكى «رەسىم قالپىقى» نى ئۆز ئىچىگە ئالىدۇ - كارتىنىڭ ئۈستى ياكى ئاستىدىكى رەسىملەر.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
رەسىم قاپلاش
رەسىمنى كارتا تەگلىكىگە ئايلاندۇرۇپ ، كارتىڭىزنىڭ تېكىستىنى قاپلاڭ. رەسىمگە ئاساسەن ، سىز قوشۇمچە ئۇسلۇب ياكى ئىقتىدارغا ئېھتىياجلىق بولۇشىڭىز مۇمكىن.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
شۇنىڭغا دىققەت قىلىڭكى ، مەزمۇن رەسىمنىڭ ئېگىزلىكىدىن چوڭ بولماسلىقى كېرەك. مەزمۇن رەسىمدىن چوڭ بولسا مەزمۇن رەسىمنىڭ سىرتىدا كۆرسىتىلىدۇ.
توغرىسىغا
كاتەكچە ۋە ئاممىۋى دەرسلىكلەرنى بىرلەشتۈرۈپ ئىشلىتىپ ، كارتا كۆچمە ۋە دوستانە ئۇسۇلدا توغرىسىغا توغرىلىنىدۇ. تۆۋەندىكى مىسالدا ، بىز تور تورىنى ئۆچۈرۈۋېتىمىز .no-gutters
ۋە .col-md-*
دەرسلەرنى ئىشلىتىپ كارتىنى توغرىسىغا md
توغرىلايمىز. كارتا مەزمۇنىغا ئاساسەن يەنىمۇ تەڭشەش كېرەك.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئۇسلۇبى
كارتا ئۇلارنىڭ تەگلىكى ، چېگرىسى ۋە رەڭگىنى تەڭشەش ئۈچۈن ھەر خىل تاللاشلارنى ئۆز ئىچىگە ئالىدۇ.
تەگلىك ۋە رەڭ
تېكىست ۋە تەگلىك ئەسلىھەلىرىنى ئىشلىتىپ كارتىنىڭ كۆرۈنۈشىنى ئۆزگەرتىڭ.
دەسلەپكى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئىككىلەمچى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
خەتەرلىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئۇچۇر كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
يېنىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
قاراڭغۇ كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش
رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .sr-only
دەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.
چېگرا
چېگرا ئەسلىھەلىرىنى ئىشلىتىپ border-color
كارتىنىلا ئۆزگەرتىڭ . شۇنىڭغا دىققەت قىلىڭكى ، تۆۋەندە كۆرسىتىلگەندەك ئاتا-ئانىلارغا ياكى كارتا مەزمۇنىنىڭ بىر قىسمىغا .text-{color}
دەرس قويسىڭىز بولىدۇ ..card
دەسلەپكى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئىككىلەمچى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
خەتەرلىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئۇچۇر كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
يېنىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
قاراڭغۇ كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
Mixins utilities
ئېھتىياجغا ئاساسەن كارتا بېشى ۋە بەت ئاستىدىكى چېگرالارنى ئۆزگەرتەلەيسىز ، ھەتتا ئۇلارنى background-color
ئۆچۈرەلەيسىز .bg-transparent
.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
كارتا ئورۇنلاشتۇرۇشى
Bootstrap كارتا ئىچىدىكى مەزمۇنلارنى لايىھىلەشتىن باشقا ، بىر يۈرۈش كارتا ئورۇنلاشتۇرۇشنىڭ بىر قانچە تاللاشلىرىنى ئۆز ئىچىگە ئالىدۇ. ھازىرچە بۇ ئورۇنلاشتۇرۇش تاللانمىلىرى تېخى ئىنكاس قايتۇرمىدى .
كارتا گۇرۇپپىلىرى
كارتا گۇرۇپپىلىرىنى ئىشلىتىپ ، كەڭلىك ۋە ئېگىزلىك تۈۋرۈكى بىلەن يەككە ، قوشۇمچە ئېلېمېنت قىلىپ كۆرسىتىڭ. كارتا گۇرۇپپىلىرى رەتكە تۇرغۇزۇلۇپ ، بۆسۈش نۇقتىسىدىن display: flex;
باشلاپ ئوخشاش ئۆلچەم بىلەن باغلىنىدۇ .sm
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ كارتا قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ كارتىنىڭ ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
بەت ئاستى بىلەن كارتا گۇرۇپپىسىنى ئىشلەتكەندە ، ئۇلارنىڭ مەزمۇنى ئاپتوماتىك تىزىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ كارتا قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ كارتىنىڭ ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
كارتا قەۋىتى
بىر-بىرىگە باغلانمىغان كەڭلىك ۋە ئېگىزلىك كارتىسى لازىممۇ؟ كارتا قەۋىتىنى ئىشلىتىڭ.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ كارتا قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ كارتىنىڭ ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا گۇرۇپپىلىرىغا ئوخشاش ، پەلەمپەيدىكى كارتا ئاستى ئاپتوماتىك تىزىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ كارتا قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي باشلامچىسى سۈپىتىدە تۆۋەندىكى تېكىستلەر بار. بۇ كارتىنىڭ ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
كاتەكچە كارتا
Bootstrap تور سىستېمىسى ۋە ئۇنىڭ .row-cols
سىنىپلىرىنى ئىشلىتىپ ، ھەر بىر قۇردا قانچە كاتەكچە ئىستون (كارتىڭىزغا ئورالغان) نى كونترول قىلىڭ. مەسىلەن ، بۇ يەردە .row-cols-1
كارتىلارنى بىر ئىستونغا تىزىش ، ھەمدە .row-cols-md-2
تۆت نۇقتىنى بۆلۈش ئارقىلىق ئوتتۇرا سىزىقتىن يۇقىرى قۇرغا ئوخشاش كەڭلىكتە ئوخشاش كەڭلىكتە بۆلۈش.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستن�� قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئۇنى ئۆزگەرتىڭ .row-cols-3
، تۆتىنچى كارتا ئورالغانلىقىنى كۆرىسىز.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئوخشاش ئېگىزلىككە ئېھتىياجلىق بولغاندا .h-100
، كارتىغا قوشۇڭ. $card-height: 100%
ئەگەر سۈكۈتتىكى تەڭ ئېگىزلىكنى ئويلىسىڭىز ، Sass نى تەڭشىسىڭىز بولىدۇ .
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ قىسقا كارتا.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا تۈۋرۈكى
كارتىلارنى ماسونغا ئوخشايدىغان ئىستونلارغا ئوراپلا CSS ئارقىلىق تەشكىللىگىلى بولىدۇ .card-columns
. column
كارتا ئاسان ماسلاشتۇرۇش ئۈچۈن flexbox نىڭ ئورنىغا CSS خۇسۇسىيىتى بىلەن ياسالغان . كارتا يۇقىرىدىن تۆۋەنگە ، سولدىن ئوڭغا بۇيرۇلغان.
Heads up! كارتا تۈۋرۈكى بىلەن بولغان مۇساپىڭىز ئوخشىماسلىقى مۇمكىن. كارتىلارنىڭ تۈۋرۈكتىن بۆسۈپ ئۆتۈشىنىڭ ئالدىنى ئېلىش ئۈچۈن ، بىز ئۇلارنى ئوق ئۆتمەس ھەل قىلىش چارىسى ئەمەس display: inline-block
قىلىپ بېكىتىشىمىز كېرەك.column-break-inside: avoid
يېڭى قۇرغا ئورالغان كارتا ئىسمى
بۇ تېخىمۇ ئۇزۇن كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى تالانت. پۈتۈن سان پوستلاق چۈمۈلە.
كارتا ئىسمى
بۇ كارتا قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى تالانت. Integer posuere erat.
كارتا ئىسمى
بۇ كارتىنىڭ ئاستىدا دائىملىق تېما ۋە قىسقا تېكىست بار.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى تالانت. پۈتۈن سان پوستلاق چۈمۈلە.
كارتا ئىسمى
بۇ تۆۋەندىكى ماۋزۇ ۋە قوشۇمچە تېكىست بار باشقا كارتا. بۇ كارتىنىڭ ئومۇمىي جەھەتتىن سەل ئېگىز بولۇشى ئۈچۈن قوشۇمچە مەزمۇنلار بار.
ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ستونلىرىنى يەنە بىر قىسىم قوشۇمچە كودلار بىلەن ئۇزارتقىلى ۋە خاسلاشتۇرغىلى بولىدۇ. تۆۋەندە كۆرسىتىلگىنى بىز ئوخشاش CSS - CSS تۈۋرۈكى ئارقىلىق سىنىپنىڭ كېڭەيتىلمىسى بولۇپ ، .card-columns
ستون سانىنى ئۆزگەرتىش ئۈچۈن بىر يۈرۈش ئىنكاسچان قاتلام ھاسىل قىلىدۇ.