Приод

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

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

Резиме

Ќе се нурнеме во секое од овие повеќе во текот, но на високо ниво, еве што го води нашиот пристап.

• Компонентите треба да бидат одговорни и на прво место на мобилните
• Компонентите треба да се градат со основна класа и да се прошират преку класи на модификатори
• Состојбите на компонентите треба да се покоруваат на заедничката скала на z-индекс
• Секогаш кога е можно, претпочитајте имплементација на HTML и CSS наместо JavaScript
• Секогаш кога е можно, користете комунални услуги преку сопствени стилови
• Секогаш кога е можно, избегнувајте да спроведувате строги барања за HTML (детски избирачи)

Одговорен

Респонзивните стилови на Bootstrap се изградени да бидат одговорни, пристап кој често се нарекува како мобилен-прво . Ние го користиме овој термин во нашите документи и во голема мера се согласуваме со него, но понекогаш може да биде премногу широк. Иако не мора секоја компонента да биде целосно одговорна во Bootstrap, овој одговорен пристап е за намалување на CSS-откривањата со притискање да додавате стилови како што приказот станува поголем.

Низ Bootstrap, ова најјасно ќе го видите во нашите медиумски прашања. Во повеќето случаи, ние користиме min-widthпрашања кои почнуваат да се применуваат на одредена точка на прекин и се пренесуваат низ повисоките точки на прекин. На пример, a .d-noneсе применува од min-width: 0до бесконечност. Од друга страна, a .d-md-noneсе применува од средната точка на прекин и нагоре.

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

Часови

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

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

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

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

Постојат две z-indexскали во Bootstrap-елементи во компонента и компоненти за преклопување.

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

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

Преклопени компоненти

Bootstrap вклучува неколку компоненти кои функционираат како преклоп од некој вид. Ова ги вклучува, по редослед на највисоки z-index, паѓачки паѓачки мени, фиксни и лепливи ленти за навигација, модали, совети за алатки и поповери. Овие компоненти имаат своја z-indexскала која започнува на 1000. Овој почетен број е избран произволно и служи како мал тампон помеѓу нашите стилови и приспособените стилови на вашиот проект.

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

Дознајте повеќе за ова во нашата z-indexстраница за распоред .

HTML и CSS преку JS

Секогаш кога е можно, претпочитаме да пишуваме HTML и CSS преку JavaScript. Општо земено, HTML и CSS се поплодни и достапни за повеќе луѓе од сите различни нивоа на искуство. HTML и CSS се исто така побрзи во вашиот прелистувач од JavaScript, а вашиот прелистувач генерално обезбедува голема функционалност за вас.

Овој принцип е нашиот првокласен JavaScript API кој користи dataатрибути. Не треба да пишувате речиси каков било 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 да биде поедноставен и помалку специфичен.

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

Водичот за кодови (од ко-креаторот на Bootstrap, @mdo) документира како ги пишуваме нашите HTML и CSS низ Bootstrap. Спецификува насоки за општо форматирање, стандардни поставки за здрав разум, нарачки на својства и атрибути и многу повеќе.

Ние користиме Stylelint за да ги спроведеме овие стандарди и повеќе во нашиот Sass/CSS. Нашата приспособена конфигурација на Stylelint е со отворен код и достапна за другите да ја користат и да ја прошират.

Ние користиме vnu-jar за спроведување на стандарден и семантички HTML, како и откривање на вообичаени грешки.