Sourceكارتا
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
- Vosibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vosibulum at eros
لازىملىق كارتا قۇرۇش ئۈچۈن كۆپ خىل مەزمۇن تىپلىرىنى ئارىلاشتۇرۇڭ ۋە ماسلاشتۇرۇڭ ياكى ھەممە نەرسىنى شۇ يەرگە تاشلاڭ. تۆۋەندە كۆرسىتىلگەن رەسىم ئۇسلۇبى ، بۆلەك ، تېكىست ئۇسلۇبى ۋە تىزىملىك گۇرۇپپىسى - ھەممىسى مۇقىم كەڭلىكتىكى كارتىغا ئورالغان.
كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
- Cras justo odio
- Dapibus ac facilisis in
- Vosibulum at eros
كارتا ئىچىگە ئىختىيارى ماۋزۇ ۋە / ياكى ئاستى بەت قوشۇڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئېلېمېنتلارنى قوشۇش ئارقىلىق كارتا ماۋزۇسىنى ئۇسلۇب .card-header
قىلىشقا بولىدۇ.<h*>
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
كارتا width
باشلاشنىڭ كونكرېت مەزمۇنى يوق ، شۇڭا باشقىچە دېيىلمىگەن بولسا ، ئۇلارنىڭ كەڭلىكى% 100 بولىدۇ. ئىختىيارى CSS ، كاتەكچە دەرسلىكى ، كاتەكچە Sass ئارىلاشمىسى ياكى ئاممىۋى مۇلازىمەتلەر بىلەن ئېھتىياجغا ئاساسەن بۇنى ئۆزگەرتەلەيسىز.
ئېلېكتر تورىنى ئىشلىتىپ ، ئېھتىياجغا ئاساسەن كارتىلارنى ستون ۋە قۇرغا ئوراپ بېرىڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئاممىۋى مۇلازىمەتلەرنى ئىشلىتىش
ئىشلەتكىلى بولىدىغان رازمېرلىق قوراللىرىمىزدىن پايدىلىنىپ كارتىنىڭ كەڭلىكىنى تېز بەلگىلەڭ.
كارتا ئىسمى
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
Button
كارتا ئىسمى
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
Button
ئۇسلۇب جەدۋىلىڭىزدە ياكى ئىچكى ئۇسلۇبتا خاس CSS نى ئىشلىتىپ كەڭلىك بەلگىلەڭ.
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
سىز ھەر قانداق كارتىنىڭ تېكىست ماسلاشتۇرۇشىنى تېزلىكتە ياكى تولۇق بۆلەكلىرىدە بىزنىڭ تېكىست توغرىلاش سىنىپىمىز بىلەن ئۆزگەرتەلەيسىز .
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
Bootstrap نىڭ nav زاپچاسلىرى بىلەن كارتىنىڭ بېشىغا (ياكى توسۇش) بىر قىسىم يول باشلاش قوشۇڭ .
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
ئالاھىدە ماۋزۇ داۋالاش
تۆۋەندىكى قوشۇمچە تېكىستلەرنى قوشۇمچە مەزمۇنغا تەبىئىي يېتەكلەش سۈپىتىدە.
بىر يەرگە بېرىڭ
كارتا رەسىم بىلەن ئىشلەشنىڭ بىر قانچە تاللانمىسىنى ئۆز ئىچىگە ئالىدۇ. كارتىنىڭ ئىككى تەرىپىگە «رەسىم قالپىقى» قوشۇش ، رەسىملەرنى كارتا مەزمۇنى بىلەن قاپلاش ياكى رەسىمنى كارتىغا قىستۇرۇشتىن تاللاڭ.
ماۋزۇ ۋە بەت ئاستىغا ئوخشاش ، كارتا ئۈستى ۋە ئاستىدىكى «رەسىم قالپىقى» - كارتىنىڭ ئۈستى ياكى ئاستىدىكى رەسىملەرنى ئۆز ئىچىگە ئالىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
رەسىمنى كارتا تەگلىكىگە ئايلاندۇرۇپ ، كارتىڭىزنىڭ تېكىستىنى قاپلاڭ. رەسىمگە ئاساسەن ، قوشۇمچە ئۇسلۇب ياكى ئىقتىدارلارغا ئېھتىياجلىق بولۇشىڭىز مۇمكىن.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئۇلارنىڭ تەگلىكى ، چېگرىسى ۋە رەڭگىنى تەڭشەش ئۈچۈن ھەر خىل تاللاشلارنى ئۆز ئىچىگە ئالىدۇ.
تېكىست ۋە تەگلىك ئەسلىھەلىرىنى ئىشلىتىپ كارتىنىڭ كۆرۈنۈشىنى ئۆزگەرتىڭ.
دەسلەپكى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئىككىلەمچى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
خەتەرلىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئۇچۇر كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
يېنىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
قاراڭغۇ كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ياردەمچى تېخنىكىلارغا مەنە يەتكۈزۈش
رەڭ ئىشلىتىش ئارقىلىق مەنە قوشۇش پەقەت كۆرۈنۈشلۈك كۆرسەتكۈچ بىلەن تەمىنلەيدۇ ، بۇ ئېكران تېخنىكىلىرىغا ئوخشاش ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە يەتكۈزۈلمەيدۇ. رەڭ بىلەن ئىپادىلەنگەن ئۇچۇرنىڭ مەزمۇننىڭ ئۆزىدىن ئېنىق بولۇشىغا كاپالەتلىك قىلىڭ (مەسىلەن كۆرۈنگەن تېكىست) ، ياكى باشقا ئۇسۇللار ئارقىلىق ئۆز ئىچىگە ئېلىنغان ، مەسىلەن .sr-only
دەرسكە يوشۇرۇنغان قوشۇمچە تېكىست دېگەندەك.
چېگرا ئەسلىھەلىرىنى ئىشلىتىپ border-color
كارتىنىلا ئۆزگەرتىڭ . شۇنىڭغا دىققەت قىلىڭكى ، تۆۋەندە كۆرسىتىلگەندەك ئاتا-ئانىلارغا ياكى كارتا مەزمۇنىنىڭ بىر قىسمىغا .text-{color}
دەرس قويسىڭىز بولىدۇ ..card
دەسلەپكى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئىككىلەمچى كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
خەتەرلىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئاگاھلاندۇرۇش كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئۇچۇر كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
يېنىك كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
قاراڭغۇ كارتا ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
ئېھتىياجغا ئاساسەن كارتا بېشى ۋە بەت ئاستىدىكى چېگرالارنى ئۆزگەرتەلەيسىز ، ھەتتا ئۇلارنى background-color
ئۆچۈرەلەيسىز .bg-transparent
.
مۇۋەپپەقىيەت كارتىسىنىڭ ئىسمى
كارتا ماۋزۇسىغا قۇرۇلغان ۋە كارتا مەزمۇنىنىڭ كۆپ قىسمىنى تەشكىل قىلىدىغان بىر قىسىم تېز مىسال تېكىستلىرى.
Bootstrap كارتا ئىچىدىكى مەزمۇنلارنى لايىھىلەشتىن باشقا ، بىر يۈرۈش كارتا ئورۇنلاشتۇرۇشنىڭ بىر قانچە تاللاشلىرىنى ئۆز ئىچىگە ئالىدۇ. ھازىرچە بۇ ئورۇنلاشتۇرۇش تاللانمىلىرى تېخى ئىنكاس قايتۇرمىدى .
كارتا گۇرۇپپىلىرىنى ئىشلىتىپ ، كەڭلىك ۋە ئېگىزلىك تۈۋرۈكى بىلەن يەككە ، قوشۇمچە ئېلېمېنت قىلىپ كۆرسىتىڭ. كارتا گۇرۇپپىلىرى display: flex;
بىردەك چوڭلۇقنى ئەمەلگە ئاشۇرۇش ئۈچۈن ئىشلىتىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ كارتىنىڭ ھەتتا ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
بەت ئاستى بىلەن كارتا گۇرۇپپىسىنى ئىشلەتكەندە ، ئۇلارنىڭ مەزمۇنى ئاپتوماتىك تىزىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ كارتىنىڭ ھەتتا ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
بىر-بىرىگە باغلانمىغان كەڭلىك ۋە ئېگىزلىك كارتىسى لازىممۇ؟ كارتا قەۋىتىنى ئىشلىتىڭ.
كارتا ئىسمى
بۇ ئۇزۇنراق كارتا بولۇپ ، قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىستنى قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئىلگىرى يېڭىلانغان
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ كارتىنىڭ ھەتتا ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
ئەڭ ئاخىرقى قېتىم 3 مىنۇت ئى��گىرى يېڭىلانغان
كارتا گۇرۇپپىلىرىغا ئوخشاش ، پەلەمپەيدىكى كارتا ئاستى ئاپتوماتىك تىزىلىدۇ.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ مەزمۇن سەل ئۇزۇنراق.
كارتا ئىسمى
بۇ كارتىنىڭ قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە تۆۋەندىكى تېكىست بار.
كارتا ئىسمى
بۇ تېخىمۇ كەڭ كارتا بولۇپ ، تۆۋەندىكى مەزمۇنلارنى قوشۇمچە مەزمۇنلارنىڭ تەبىئىي يېتەكچىسى سۈپىتىدە قوللايدۇ. بۇ كارتىنىڭ ھەتتا ئوخشاش ئېگىزلىك ھەرىكىتىنى كۆرسەتكەن بىرىنچىدىن ئۇزۇن مەزمۇن بار.
كارتىلارنى ماسونغا ئوخشايدىغان ئىستونلارغا ئوراپلا 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
ستون سانىنى ئۆزگەرتىش ئۈچۈن بىر يۈرۈش ئىنكاسچان قاتلام ھاسىل قىلىدۇ.