Макет үчүн утилиталар
Мобилдик телефонго ыңгайлуураак жана тезирээк иштеп чыгуу үчүн, Bootstrap мазмунду көрсөтүү, жашыруу, тегиздөө жана аралыкты коюу үчүн ондогон пайдалуу класстарды камтыйт.
Мүлктүн жалпы баалуулуктарын ыкчам которуу үчүн дисплейдин утилиталарын колдонуңуз display
. Аны белгилүү бир көрүү терезелеринде көрсөтүү же жашыруу үчүн аны тор тутумубуз, мазмунубуз же компоненттерибиз менен аралаштырыңыз.
Bootstrap 4 flexbox менен курулган, бирок ар бир эле элемент display
өзгөртүлгөн эмес, display: flex
анткени бул көптөгөн керексиз жокко чыгарууларды кошуп, серепчинин негизги жүрүм-турумун күтүлбөгөн жерден өзгөртөт. Биздин компоненттердин көбү flexbox иштетилген менен курулган.
Элементке кошуу керек болсо, аны же жооп берүүчү варианттардын бири менен жасаңыз (мисалы, display: flex
) . Өлчөм , тегиздөө, аралык жана башкалар үчүн биздин кошумча флексбокс утилиталарыбызды колдонууга уруксат берүү үчүн бул класс же маани керек болот..d-flex
.d-sm-flex
display
Элементтер жана компоненттер кантип аралыкта жана өлчөмдөрүн көзөмөлдөө үчүн margin
жана padding
аралыкты колдонуңуз . 1rem
Bootstrap 4 маанинин демейки $spacer
өзгөрмөсүнө негизделген аралыктар үчүн беш деңгээлдүү шкаланы камтыйт . Бардык көрүү терезелери үчүн маанилерди тандаңыз (мисалы, .mr-3
үчүн margin-right: 1rem
) же конкреттүү көрүнүштөрдү максаттуу үчүн жооп берүүчү варианттарды тандаңыз (мисалы, үзгүлтүксүз баштоо .mr-md-3
үчүн ).margin-right: 1rem
md
Которуштуруунун display
кереги жок болгондо, биздин көрүнүү утилиталарыvisibility
менен элементти которуштурууга болот . Көрүнбөгөн элементтер дагы эле барактын макетине таасирин тийгизет, бирок көрүүчүлөрдөн көрүнөө жашырылат.