Приступ

Сазнајте више о водећим принципима, стратегијама и техникама које се користе за прављење и одржавање Боотстрап-а како бисте га сами лакше прилагодили и проширили.

Док странице за почетак пружају уводни обилазак пројекта и онога што нуди, овај документ се фокусира на то зашто радимо ствари које радимо у Боотстрапу. Објашњава нашу филозофију изградње на вебу како би други могли да уче од нас, доприносе са нама и помажу нам да се побољшамо.

Видите нешто што не звучи како треба или би се можда могло боље урадити? Отворите питање — волели бисмо да о њему разговарамо са вама.

Резиме

Детаљније ћемо уронити у сваки од њих, али на високом нивоу, ево шта води наш приступ.

• Компоненте треба да буду брзе и да буду на првом месту за мобилне уређаје
• Компоненте треба да буду изграђене са основном класом и проширене преко класа модификатора
• Компонентна стања треба да се придржавају уобичајене скале з индекса
• Кад год је могуће, дајте предност имплементацији ХТМЛ-а и ЦСС-а у односу на ЈаваСцрипт
• Кад год је могуће, користите услужне програме уместо прилагођених стилова
• Кад год је могуће, избегавајте наметање строгих ХТМЛ захтева (селектори за децу)

Респонсиве

Боотстрап-ови респонзивни стилови су направљени да буду прилагодљиви, приступ који се често назива мобилно-прво . Користимо овај термин у нашим документима и у великој мери се слажемо са њим, али понекад може бити преширока. Иако не мора свака компонента да буде у потпуности прилагодљива у Боотстрап-у, овај приступ који реагује се односи на смањење ЦСС заобилажења тако што вас тера да додате стилове како оквир за приказ постаје већи.

Широм Боотстрапа, то ћете најјасније видети у нашим медијским упитима. У већини случајева користимо min-widthупите који почињу да се примењују на одређеној тачки прекида и преносе се кроз више тачке прекида. На пример, а .d-noneсе примењује од min-width: 0до бесконачности. С друге стране, а .d-md-noneпримењује се од средње тачке прекида и навише.

Понекад ћемо користити max-widthкада то захтева инхерентна сложеност компоненте. Понекад су ове замене функционално и ментално јасније за имплементацију и подршку него за преписивање основне функционалности из наших компоненти. Настојимо да ограничимо овај приступ, али ћемо га с времена на време користити.

класе

Осим нашег Ребоот-а, табеле стилова за нормализацију међу прегледачима, сви наши стилови имају за циљ да користе класе као селекторе. Ово значи избегавање селектора типова (нпр. input[type="text"]) и страних родитељских класа (нпр. .parent .child) које стилове чине превише специфичним да би се лако могли заменити.

Као такве, компоненте би требало да буду изграђене са базном класом која садржи уобичајене парове својство-вредност који се не могу заменити. На пример, .btnи .btn-primary. Користимо .btnза све уобичајене стилове као што су display, paddingи border-width. Затим користимо модификаторе попут .btn-primaryдодавања боје, боје позадине, боје ивице итд.

Класе модификатора треба да се користе само када постоји више својстава или вредности које треба променити у више варијанти. Модификатори нису увек неопходни, па будите сигурни да заиста чувате линије кода и спречавате непотребна замена када их креирате. Добри примери модификатора су наше класе боја теме и варијанте величине.

з-индекс скале

У Боотстрап-у постоје две z-indexскале — елементи унутар компоненте и компоненте преклапања.

Компонентни елементи

• Неке компоненте у Боотстрапу су изграђене са елементима који се преклапају како би се спречиле дупле границе без модификације borderсвојства. На пример, групе дугмади, групе за унос и пагинација.
• Ове компоненте деле стандардну z-indexскалу од 0до 3.
• 0је подразумевано (почетно), 1је :hover, 2је :active/ .activeи 3је :focus.
• Овај приступ одговара нашим очекивањима највишег приоритета корисника. Ако је елемент фокусиран, он је на видику и на пажњи корисника. Активни елементи су други по висини јер указују на стање. Ховер је трећи по висини јер указује на намеру корисника, али скоро све може да се пређе.

Компоненте преклапања

Боотстрап укључује неколико компоненти које функционишу као нека врста преклапања. Ово укључује, редоследом највишег z-index, падајуће меније, фиксне и лепљиве навигационе траке, модале, описе алата и искачуће прозоре. Ове компоненте имају своју z-indexскалу која почиње на 1000. Овај почетни број је изабран произвољно и служи као мали бафер између наших стилова и прилагођених стилова вашег пројекта.

Свака компонента преклапања незнатно повећава своју z-indexвредност на начин да уобичајени принципи корисничког интерфејса омогућавају да елементи фокусирани на корисника или лебдећи мишем остану у видокругу у сваком тренутку. На пример, модал је блокирање документа (нпр. не можете предузети ниједну другу радњу осим радње модала), па то стављамо изнад наших навигационих трака.

Сазнајте више о томе на нашој z-indexстраници са изгледом .

ХТМЛ и ЦСС преко ЈС-а

Кад год је то могуће, радије пишемо ХТМЛ и ЦСС уместо ЈаваСцрипт-а. Генерално, ХТМЛ и ЦСС су плоднији и доступнији већем броју људи свих различитих нивоа искуства. ХТМЛ и ЦСС су такође бржи у вашем претраживачу од ЈаваСцрипт-а, а ваш претраживач вам генерално пружа велику функционалност.

Овај принцип је наш првокласни ЈаваСцрипт АПИ који користи dataатрибуте. Не морате да пишете скоро никакав ЈаваСцрипт да бисте користили наше ЈаваСцрипт додатке; уместо тога, напишите ХТМЛ. Прочитајте више о томе на нашој страници са прегледом ЈаваСцрипта .

На крају, наши стилови се заснивају на фундаменталном понашању уобичајених веб елемената. Кад год је то могуће, радије користимо оно што претраживач нуди. На пример, можете ставити .btnкласу на скоро сваки елемент, али већина елемената не пружа никакву семантичку вредност или функционалност претраживача. Дакле, уместо тога користимо <button>с и <a>с.

Исто важи и за сложеније компоненте. Иако бисмо могли да напишемо сопствени додатак за валидацију обрасца да бисмо додали класе родитељском елементу на основу стања уноса, чиме бисмо могли да стилизујемо текст који каже црвено, ми више волимо да користимо :valid/ :invalidпсеудо-елементе који нам сваки прегледач пружа.

Комуналне услуге

Услужне класе—раније помоћници у Боотстрап-у 3—су моћан савезник у борби против пренатрпаности ЦСС-а и лоших перформанси страница. Услужна класа је типично једно, непроменљиво упаривање својство-вредност изражено као класа (нпр. .d-blockпредставља display: block;). Њихова примарна привлачност је брзина употребе током писања ХТМЛ-а и ограничавање количине прилагођеног ЦСС-а који морате да напишете.

Конкретно у вези са прилагођеним ЦСС-ом, услужни програми могу помоћи у борби против повећања величине датотеке смањењем ваших најчешће понављаних парова својства-вредност у једну класу. Ово може имати драматичан ефекат у вашим пројектима.

Флексибилан ХТМЛ

Иако то није увек могуће, настојимо да избегнемо превише догматике у нашим ХТМЛ захтевима за компоненте. Стога се фокусирамо на појединачне класе у нашим ЦСС селекторима и покушавамо да избегнемо непосредне селекторе деце ( >). Ово вам даје већу флексибилност у имплементацији и помаже да наш ЦСС буде једноставнији и мање специфичан.

Кодне конвенције

Водич за коде (од ко-креатора Боотстрапа, @мдо) документује како пишемо наш ХТМЛ и ЦСС преко Боотстрапа. Он наводи смернице за опште форматирање, подразумеване вредности здравог разума, редослед својстава и атрибута и још много тога.

Користимо Стилелинт за спровођење ових стандарда и више у нашем Сасс/ЦСС. Наша прилагођена Стилелинт конфигурација је отвореног кода и доступна је другима за употребу и проширење.

Користимо вну-јар за спровођење стандардног и семантичког ХТМЛ-а, као и за откривање уобичајених грешака.