Mga utility para sa layout
Para sa mas mabilis na mobile-friendly at tumutugon na pag-unlad, ang Bootstrap ay may kasamang dose-dosenang mga klase ng utility para sa pagpapakita, pagtatago, pag-align, at paglalagay ng espasyo ng nilalaman.
Gamitin ang aming mga display utilities para sa tumutugon na pag-toggle ng mga karaniwang value ng display
property. Ihalo ito sa aming grid system, nilalaman, o mga bahagi upang ipakita o itago ang mga ito sa mga partikular na viewport.
Ang Bootstrap 4 ay binuo gamit ang flexbox, ngunit hindi lahat ng elemento display
ay nabago sa display: flex
dahil ito ay magdaragdag ng maraming hindi kinakailangang pag-override at hindi inaasahang magbabago ng mga pangunahing gawi ng browser. Karamihan sa aming mga bahagi ay binuo gamit ang flexbox na pinagana.
Kung kailangan mong magdagdag display: flex
sa isang elemento, gawin ito gamit ang .d-flex
o isa sa mga tumutugong variant (hal, .d-sm-flex
). Kakailanganin mo ang klase o display
value na ito upang payagan ang paggamit ng aming mga karagdagang flexbox utility para sa sizing, alignment, spacing, at higit pa.
Gamitin ang margin
at padding
spacing utilities upang kontrolin kung paano ang mga elemento at bahagi ay may pagitan at laki. Kasama sa Bootstrap 4 ang limang antas na sukat para sa mga kagamitan sa pagpupuwang, batay sa isang 1rem
default na $spacer
variable ng halaga. Pumili ng mga halaga para sa lahat ng viewport (hal, .mr-3
para sa margin-right: 1rem
), o pumili ng mga tumutugong variant upang i-target ang mga partikular na viewport (hal, .mr-md-3
para sa margin-right: 1rem
simula sa md
breakpoint).
Kapag display
hindi kailangan ang pag-toggle, maaari mong i-toggle ang visibility
isang elemento gamit ang aming mga visibility utility . Ang mga hindi nakikitang elemento ay makakaapekto pa rin sa layout ng pahina, ngunit biswal na nakatago mula sa mga bisita.