Макет үчүн утилиталар

Мобилдик телефонго ыңгайлуураак жана тезирээк иштеп чыгуу үчүн, Bootstrap мазмунду көрсөтүү, жашыруу, тегиздөө жана аралыкты коюу үчүн ондогон пайдалуу класстарды камтыйт.

өзгөртүүdisplay

Мүлктүн жалпы баалуулуктарын ыкчам которуу үчүн дисплейдин утилиталарын колдонуңуз display. Аны белгилүү бир көрүү терезелеринде көрсөтүү же жашыруу үчүн аны тор тутумубуз, мазмунубуз же компоненттерибиз менен аралаштырыңыз.

Flexbox параметрлери

Bootstrap 4 flexbox менен курулган, бирок ар бир эле элемент displayөзгөртүлгөн эмес, display: flexанткени бул көптөгөн керексиз жокко чыгарууларды кошуп, серепчинин негизги жүрүм-турумун күтүлбөгөн жерден өзгөртөт. Биздин компоненттердин көбү flexbox иштетилген менен курулган.

Элементке кошуу керек болсо, аны же жооп берүүчү варианттардын бири менен жасаңыз (мисалы, display: flex) . Өлчөм , тегиздөө, аралык жана башкалар үчүн биздин кошумча флексбокс утилиталарыбызды колдонууга уруксат берүү үчүн бул класс же маани керек болот..d-flex.d-sm-flexdisplay

Маржа жана толтуруу

Элементтер жана компоненттер кантип аралыкта жана өлчөмдөрүн көзөмөлдөө үчүн marginжана padding аралыкты колдонуңуз . 1remBootstrap 4 маанинин демейки $spacerөзгөрмөсүнө негизделген аралыктар үчүн беш деңгээлдүү шкаланы камтыйт . Бардык көрүү терезелери үчүн маанилерди тандаңыз (мисалы, .mr-3үчүн margin-right: 1rem) же конкреттүү көрүнүштөрдү максаттуу үчүн жооп берүүчү варианттарды тандаңыз (мисалы, үзгүлтүксүз баштоо .mr-md-3үчүн ).margin-right: 1remmd

Которууvisibility

Которуштуруунун displayкереги жок болгондо, биздин көрүнүү утилиталарыvisibility менен элементти которуштурууга болот . Көрүнбөгөн элементтер дагы эле барактын макетине таасирин тийгизет, бирок көрүүчүлөрдөн көрүнөө жашырылат.