Тәсіл

Бастау беттерінде жоба және оның не ұсынатыны туралы кіріспе экскурсия берілгенімен, бұл құжат Bootstrap бағдарламасында не үшін жасайтын әрекеттерімізге назар аударады. Ол басқалар бізден үйреніп, бізбен бірге үлес қосып, жақсартуға көмектесуі үшін интернетте құру философиясын түсіндіреді.

Дұрыс емес нәрсені көріп тұрсыз ба, әлде жақсырақ істеуге болатын шығар? Мәселені ашыңыз - біз оны сізбен талқылағымыз келеді.

Түйіндеме

Біз олардың әрқайсысына толығырақ тоқталамыз, бірақ жоғары деңгейде біздің көзқарасымызды басшылыққа алатын нәрсе.

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

Жауапты

Bootstrap-тың жауап беру мәнерлері жауап беру үшін жасалған, бұл тәсіл көбінесе mobile-first деп аталады . Біз бұл терминді құжаттарымызда қолданамыз және онымен келісеміз, бірақ кейде ол тым кең болуы мүмкін. Bootstrap бағдарламасында әрбір құрамдас толығымен жауап беруі қажет болмаса да, бұл жауап беру тәсілі көрініс алаңы үлкейген сайын мәнерлерді қосуға итермелеу арқылы CSS қайта анықтауды азайтуға қатысты.

Bootstrap арқылы сіз мұны біздің медиа сұрауларымызда анық көресіз. Көп жағдайда біз min-widthбелгілі бір тоқтау нүктесінде қолданыла бастайтын және жоғары тоқтау нүктелері арқылы өтетін сұрауларды қолданамыз. Мысалы, a шексіздікке дейін .d-noneқолданылады . min-width: 0Екінші жағынан, a .d-md-noneорта үзіліс нүктесінен және жоғарыдан қолданылады.

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

Сабақтар

Қайта жүктеуден басқа, кросс-шолғышты қалыпқа келтіру стильдер кестесі, біздің барлық стильдер класстарды селектор ретінде пайдалануға бағытталған. Бұл мәнерлерді оңай қайта анықтау үшін тым ерекше ететін түр селекторларынан (мысалы, input[type="text"]) және сыртқы ата-аналық сыныптардан (мысалы, ) аулақ болуды білдіреді..parent .child

Осылайша, құрамдас бөліктер жалпы, қайта анықталмайтын сипат-мән жұптарын қамтитын негізгі сыныппен салынуы керек. Мысалы, .btnжәне .btn-primary. Біз , , және .btnсияқты барлық жалпы стильдер үшін қолданамыз . Содан кейін түс, фон түсін, жиек түсін және т.б. қосу үшін модификаторларды қолданамыз .displaypaddingborder-width.btn-primary

Модификатор кластары бірнеше нұсқада өзгертілетін бірнеше сипаттар немесе мәндер болғанда ғана пайдаланылуы керек. Модификаторлар әрқашан қажет емес, сондықтан код жолдарын шынымен сақтап жатқаныңызды және оларды жасау кезінде қажетсіз қайта анықтауды болдырмайтыныңызды тексеріңіз. Модификаторлардың жақсы мысалдары - біздің тақырыптық түс сыныптары мен өлшем нұсқалары.

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

Bootstrap бағдарламасында екі z-indexшкала бар — құрамдас ішіндегі элементтер және қабат құрамдастары.

Құрамдас элементтер

• borderBootstrap бағдарламасындағы кейбір құрамдас бөліктер сипатты өзгертпестен қосарлы шекараларды болдырмау үшін қабаттасатын элементтермен құрастырылған . Мысалы, түйме топтары, енгізу топтары және беттеу.
• Бұл компоненттер арқылы стандартты z-indexшкала ортақ .03
• 0әдепкі (бастапқы), 1болып табылады :hover, 2болып табылады :active/ .active, және 3болып табылады :focus.
• Бұл тәсіл пайдаланушының ең жоғары басымдылығы туралы күтуімізге сәйкес келеді. Элемент назарда болса, ол көрінеді және пайдаланушының назарында болады. Белсенді элементтер екінші ең жоғары, себебі олар күйді көрсетеді. Меңзерді жылжыту үшінші ең жоғары, себебі ол пайдаланушы ниетін көрсетеді, бірақ кез келген нәрсені дерлік апаруға болады.

Қабаттасу компоненттері

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 конфигурациясы ашық бастапқы код және басқалар пайдалануы және кеңейтуі үшін қол жетімді.

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