мамиле

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

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

Жыйынтык

Биз булардын ар бирине кененирээк токтолобуз, бирок жогорку деңгээлде, бул жерде биздин мамилебизди жетектейт.

• Компоненттер жооп берүүгө жана мобилдүү болушу керек
• Компоненттер базалык класс менен курулуп, модификатор класстары аркылуу кеңейтилиши керек
• Компонент мамлекеттер жалпы z-индекс шкаласына баш ийиши керек
• Мүмкүнчүлүккө жараша, JavaScript үстүнөн HTML жана CSS ишке ашырууну тандаңыз
• Мүмкүн болушунча, ыңгайлаштырылган стилдердин үстүнөн утилиттерди колдонуңуз
• Мүмкүн болушунча катуу HTML талаптарын аткаруудан качыңыз (балдарды тандоочулар)

Жооптуу

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

Bootstrap аркылуу сиз муну биздин медиа сурамдардан ачык көрөсүз. Көпчүлүк учурларда, биз min-widthбелгилүү бир үзгүлтүккө учуроо чекитинде колдонула баштаган жана жогорку чекиттер аркылуу өтүүчү сурамдарды колдонобуз. Мисалы, а чексиздикке .d-noneчейин колдонулат . min-width: 0Башка жагынан алганда, а .d-md-noneорто үзүү чекитинен жана андан жогору колдонулат.

Кээде биз max-widthкомпоненттин татаалдыгы талап кылынганда колдонобуз. Кээде, бул жокко чыгаруулар биздин компоненттерден негизги функцияларды кайра жазууга караганда, ишке ашыруу жана колдоо үчүн функционалдык жана акыл-эс жактан айкыныраак болот. Биз бул ыкманы чектөөгө аракет кылабыз, бирок аны мезгил-мезгили менен колдонобуз.

Класстар

Биздин кайра жүктөөдөн, кайчылаш браузерди нормалдаштыруу стилдер жадыбалынан тышкары, биздин бардык стилдер класстарды селектор катары колдонууга багытталган. Бул тип тандагычтардан (мисалы, input[type="text"]) жана тышкаркы ата-эне класстардан (мисалы, .parent .child) арылууну билдирет, бул стилдерди оңой эле жокко чыгаруу үчүн өтө спецификалык кылат.

Ошентип, компоненттер жалпы, жокко чыгарылбаган мүлк-нарк жуптарын камтыган базалык класс менен түзүлүшү керек. Мисалы, .btnжана .btn-primary. Биз , жана .btnсыяктуу бардык жалпы стилдер үчүн колдонобуз . Андан кийин биз түс, фон-түс, чек-түс ж.б. кошуу үчүн модификаторлорду колдонобуз.displaypaddingborder-width.btn-primary

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

z-индекс шкалалары

Bootstrapте эки z-indexшкала бар — компоненттин ичиндеги элементтер жана үстүнкү компоненттер.

Компоненттик элементтер

• Bootstrap'тин кээ бир компоненттери касиетти өзгөртпөстөн, кош чектерди болтурбоо үчүн бири-бирин кайталаган элементтер менен курулган border. Мисалы, баскыч топтору, киргизүү топтору жана баракчалар.
• Бул компоненттер аркылуу стандарттык z-indexшкала бөлүшөт .03
• 0демейки (баштапкы), 1болуп саналат :hover, 2болуп саналат :active/ .active, жана 3болуп саналат :focus.
• Бул ыкма биздин эң жогорку колдонуучу артыкчылыктуу күтүүлөрүбүзгө дал келет. Эгер элемент фокусталган болсо, ал көрүү жана колдонуучунун назарында болот. Активдүү элементтер экинчи эң жогору, анткени алар абалды көрсөтөт. Hover үчүнчү эң жогору, анткени ал колдонуучунун ниетин көрсөтөт, бирок дээрлик бардык нерсени кармап турууга болот.

Катталуу компоненттери

Bootstrap кандайдыр бир катмар катары иштеген бир нече компоненттерди камтыйт. Буга эң жогорку ирети боюнча z-indexылдый түшүүчү тизмелер, туруктуу жана жабышчаак навигация тилкелери, модалдар, куралдар кеңештери жана поповерлер кирет. Бул компоненттердин өз z-indexшкалалары бар 1000. Бул баштапкы сан өзүм билемдик менен тандалган жана биздин стилдер менен долбооруңуздун ыңгайлаштырылган стилдеринин ортосунда кичинекей буфер катары кызмат кылат.

Ар бир катмар компоненти анын z-indexмаанисин бир аз жогорулатат, ушундай жол менен жалпы UI принциптери колдонуучуга багытталган же курсордогу элементтерди ар дайым көрүү мүмкүнчүлүгүн берет. Мисалы, модаль - бул документти бөгөттөө (мисалы, сиз модалдын аракетинен башка эч кандай аракетти жасай албайсыз), ошондуктан биз аны навигация тилкелерибиздин үстүнө койдук.

Бул тууралуу кененирээк биздин z-indexмакет баракчабыздан билиңиз .

JS аркылуу HTML жана CSS

Мүмкүн болушунча, биз HTML жана CSS-ти JavaScript аркылуу жазууну туура көрөбүз. Жалпысынан алганда, HTML жана CSS көбүрөөк жемиштүү жана ар кандай тажрыйба деңгээлиндеги көбүрөөк адамдар үчүн жеткиликтүү. HTML жана CSS браузериңизде JavaScriptге караганда ылдамыраак жана сиздин браузериңиз жалпысынан сиз үчүн көптөгөн функцияларды камсыз кылат.

dataБул принцип атрибуттарды колдонгон биринчи класстагы JavaScript API . JavaScript плагиндерибизди колдонуу үчүн дээрлик эч кандай JavaScript жазуунун кереги жок; анын ордуна, HTML жаз. Бул тууралуу кененирээк биздин JavaScript серептөө барагынан окуңуз .

Акырында, биздин стилдер жалпы желе элементтеринин негизги жүрүм-турумуна негизделет. Мүмкүн болушунча, биз браузер берген нерселерди колдонууну каалайбыз. Мисалы, сиз .btnклассты дээрлик бардык элементтерге кое аласыз, бирок көпчүлүк элементтер эч кандай семантикалык маанини же браузердин иштешин камсыз кылбайт. Ошентип, анын ордуна биз <button>s жана <a>s колдонобуз.

Ошол эле татаал компоненттерге да тиешелүү. Киргизилген абалдын негизинде ата-эне элементке класстарды кошуу үчүн өзүбүздүн форманы текшерүү плагинибизди жаза алсак да, бул бизге текстти кызыл деп айтууга стилдештирүүгө мүмкүндүк бергенибиз менен, ар бир браузер бизге берген / псевдо -элементтерди :validколдонууну туура көрөбүз.:invalid

Утилиталар

Пайдалуу класстар — мурда Bootstrap 3'те жардамчы болгон — CSS кекиртектери жана барактын начар иштеши менен күрөшүүдө күчтүү өнөктөш. Пайдалуу класс, адатта, класс катары туюнтулган бир, өзгөрүлгүс касиет-баалуулук жупташуу (мисалы, .d-blockбилдирет display: block;). Алардын негизги жагымдуулугу HTML жазууда колдонуу ылдамдыгы жана сиз жаза турган жеке CSS көлөмүн чектөө.

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

Ийкемдүү HTML

Дайыма эле мүмкүн боло бербесе да, биз компоненттерге болгон HTML талаптарыбызда өтө догмалык болбош үчүн аракет кылабыз. Ошентип, биз CSS селекторлорубузда жалгыз класстарга көңүл бурабыз жана дароо балдар селекторлорунан качууга аракет кылабыз ( >). Бул сизге ишке ашырууда көбүрөөк ийкемдүүлүк берет жана биздин CSS жөнөкөй жана анча конкреттүү эмес болууга жардам берет.

Код конвенциялары

Code Guide (Bootstrap биргелешип жаратуучусунан, @mdo) Bootstrap аркылуу HTML жана CSS-ти кантип жазганыбызды документтештирет. Ал жалпы форматтоо, жалпы маанидеги демейкилер, менчик жана атрибут буйруктары жана башкалар үчүн көрсөтмөлөрдү конкреттештирет.

Бул стандарттарды жана башкаларды биздин Sass/ CSS'те колдонуу үчүн Stylelint колдонобуз. Биздин ыңгайлаштырылган Stylelint конфигурациябыз ачык булак жана башкалар колдонууга жана кеңейтүүгө жеткиликтүү.

Биз vnu-jarды стандарттык жана семантикалык HTMLди колдонуу, ошондой эле жалпы каталарды аныктоо үчүн колдонобуз.