Source

ئورۇنلاشتۇرۇش ئۈچۈن ئىشلىتىلىدۇ

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

ئۆزگەرتىشdisplay

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

Flexbox تاللانمىلىرى

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

display: flexئەگەر سىز بىر ئېلېمېنتقا قوشۇشقا ئېھتىياجلىق بولسىڭىز ، ئۇنى .d-flexياكى ئىنكاسچان ۋارىيانتلارنىڭ بىرىنى قىلىڭ (مەسىلەن ، .d-sm-flex). بىزنىڭ بۇ ئەۋرىشىم ، ماسلاشتۇرۇش ، ئارىلىق ۋە باشقىلار ئۈچۈن displayقوشۇمچە ئەۋرىشىم قوراللىرىمىزنى ئىشلىتىشىمىز ئۈچۈن بۇ سىنىپ ياكى قىممەتكە ئېھتىياجلىق بولىسىز .

Margin and padding

marginبوشلۇق ۋە padding بوشلۇقتىن پايدىلىنىپ ، ئېلېمېنت ۋە زاپچاسلارنىڭ بوشلۇق ۋە چوڭ-كىچىكلىكىنى كونترول قىلىڭ. 1remBootstrap 4 قىممەت سۈكۈتتىكى $spacerئۆزگەرگۈچى مىقدارنى ئاساس قىلىپ ، بوشلۇق ئەسلىھەلىرىنىڭ بەش دەرىجىلىك كۆلىمىنى ئۆز ئىچىگە ئالىدۇ . بارلىق كۆرۈش نۇقتىلىرىنىڭ قىممىتىنى تاللاڭ (مەسىلەن ، .mr-3ئۈچۈن margin-right: 1rem) ياكى ئالاھىدە كۆرۈنۈشلەرنى نىشانلاش ئۈچۈن ئىنكاسچان ۋارىيانتلارنى تاللاڭ (مەسىلەن ، بۆسۈش ئېغىزىدىن باشلاش .mr-md-3ئۈچۈن ).margin-right: 1remmd

Togglevisibility

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