Pieeja

Uzziniet par pamatprincipiem, stratēģijām un metodēm, kas tiek izmantotas Bootstrap izveidei un uzturēšanai, lai jūs pats varētu to vieglāk pielāgot un paplašināt.

Lai gan darba sākšanas lapās ir sniegta ievada ceļvedis par projektu un tā piedāvājumiem, šajā dokumentā galvenā uzmanība ir pievērsta tam, kāpēc mēs darām to, ko darām programmā Bootstrap. Tajā ir izskaidrota mūsu filozofija, kā veidot tīmeklī, lai citi varētu mācīties no mums, sniegt savu ieguldījumu un palīdzēt mums uzlaboties.

Vai redzat kaut ko, kas neizklausās pareizi, vai varbūt to varētu izdarīt labāk? Atveriet jautājumu — mēs labprāt to apspriestu ar jums.

Kopsavilkums

Mēs iedziļināsimies katrā no tiem plašāk, bet augstā līmenī, lūk, kas nosaka mūsu pieeju.

• Komponentiem jābūt atsaucīgiem un vispirms mobilajiem
• Komponenti jāveido ar bāzes klasi un jāpaplašina, izmantojot modifikatoru klases
• Komponentu stāvokļiem ir jāatbilst kopējai z indeksa skalai
• Kad vien iespējams, dodiet priekšroku HTML un CSS ieviešanai, nevis JavaScript
• Kad vien iespējams, izmantojiet utilītas, nevis pielāgotos stilus
• Kad vien iespējams, izvairieties no stingru HTML prasību izpildes (bērnu atlasītāji)

Atsaucīgs

Bootstrap responsīvie stili ir veidoti tā, lai tie būtu atsaucīgi — pieeja, ko bieži dēvē par mobilajām ierīcēm paredzētu pieeju . Mēs izmantojam šo terminu savos dokumentos un lielā mērā tam piekrītam, taču dažkārt tas var būt pārāk plašs. Lai gan ne katram komponentam ir jābūt pilnībā atsaucīgam programmā Bootstrap, šī adaptīvā pieeja ir vērsta uz CSS ignorēšanas samazināšanu, liekot jums pievienot stilus, kad skatvieta kļūst lielāka.

Visā Bootstrap to visskaidrāk redzēsit mūsu multivides vaicājumos. Vairumā gadījumu mēs izmantojam min-widthvaicājumus, kas tiek piemēroti noteiktā pārtraukuma punktā un tiek turpināti augstākajos pārtraukuma punktā. Piemēram, a .d-noneattiecas no min-width: 0līdz bezgalībai. No otras puses, .d-md-nonetiek lietots no vidējā pārtraukuma punkta un uz augšu.

Reizēm mēs to izmantosim max-width, ja to prasa komponentam raksturīgā sarežģītība. Dažkārt šīs ignorēšanas funkcijas ir funkcionāli un garīgi skaidrāk ieviest un atbalstīt, nekā pārrakstīt pamata funkcionalitāti no mūsu komponentiem. Mēs cenšamies ierobežot šo pieeju, taču laiku pa laikam to izmantosim.

Klases

Papildus mūsu Reboot — starppārlūkprogrammu normalizēšanas stila lapai, visu mūsu stilu mērķis ir izmantot klases kā atlasītājus. Tas nozīmē, ka jāatsakās no veida atlasītājiem (piemēram, input[type="text"]) un svešām vecākklasēm (piemēram, .parent .child), kas padara stilus pārāk specifiskus, lai tos viegli ignorētu.

Tādējādi komponenti ir jābūvē ar bāzes klasi, kurā ir kopīgi, nepārkāpjami īpašuma vērtību pāri. Piemēram, .btnun .btn-primary. Mēs izmantojam .btnvisiem izplatītākajiem stiliem, piemēram display, padding, un border-width. Pēc tam mēs izmantojam modifikatorus, piemēram .btn-primary, lai pievienotu krāsu, fona krāsu, apmales krāsu utt.

Modifikatoru klases ir jāizmanto tikai tad, ja ir vairāki rekvizīti vai vērtības, kas jāmaina vairākos variantos. Modifikatori ne vienmēr ir nepieciešami, tāpēc pārliecinieties, vai tiešām saglabājat koda rindiņas un novēršat nevajadzīgas ignorēšanas. Labi modifikatoru piemēri ir mūsu tēmu krāsu klases un izmēru varianti.

z indeksa skalas

Programmā Bootstrap ir divas z-indexskalas — elementi komponentā un pārklājuma komponenti.

Komponentu elementi

• Daži Bootstrap komponenti ir veidoti ar elementiem, kas pārklājas, lai novērstu dubultās apmales, nemainot borderīpašumu. Piemēram, pogu grupas, ievades grupas un lappušu maiņa.
• Šiem komponentiem ir kopīga standarta z-indexskala 0līdz 3.
• 0ir noklusējuma (sākotnējais), 1ir :hover, 2ir :active/ .activeun 3ir :focus.
• Šī pieeja atbilst mūsu cerībām par augstāko lietotāja prioritāti. Ja elements ir fokusēts, tas ir redzams un lietotāja uzmanības lokā. Aktīvie elementi ir otrie augstākie, jo tie norāda stāvokli. Kursora novietošana ir trešais augstākais rādītājs, jo tas norāda uz lietotāja nodomu, taču kursoru var novietot gandrīz jebko .

Pārklājuma sastāvdaļas

Bootstrap ietver vairākus komponentus, kas darbojas kā sava veida pārklājums. Tas ietver z-indexnolaižamās izvēlnes, fiksētās un lipīgās navigācijas joslas, modāļus, rīka padomus un uznirstošos logus. Šiem komponentiem ir sava z-indexskala, kas sākas ar 1000. Šis sākuma numurs tika izvēlēts patvaļīgi, un tas kalpo kā neliels buferis starp mūsu stiliem un jūsu projekta pielāgotajiem stiliem.

Katrs pārklājuma komponents z-indexnedaudz palielina savu vērtību tādā veidā, ka vispārīgie lietotāja interfeisa principi ļauj vienmēr redzami uz lietotāju vērstiem vai virs kursora novietotiem elementiem. Piemēram, modāls ir dokumentu bloķēšana (piemēram, jūs nevarat veikt nekādas citas darbības, izņemot modāla darbību), tāpēc mēs to novietojam virs navigācijas joslām.

Uzziniet vairāk par to mūsu z-indexizkārtojuma lapā .

HTML un CSS, izmantojot JS

Kad vien iespējams, mēs dodam priekšroku HTML un CSS rakstīšanai, nevis JavaScript. Kopumā HTML un CSS ir produktīvāki un pieejami lielākam skaitam cilvēku ar dažādiem pieredzes līmeņiem. Arī HTML un CSS jūsu pārlūkprogrammā ir ātrāki nekā JavaScript, un jūsu pārlūkprogramma parasti nodrošina jums daudz funkcionalitātes.

Šis princips ir mūsu pirmās klases JavaScript API, kas izmanto dataatribūtus. Jums nav jāraksta gandrīz neviens JavaScript, lai izmantotu mūsu JavaScript spraudņus; tā vietā rakstiet HTML. Uzziniet vairāk par to mūsu JavaScript pārskata lapā .

Visbeidzot, mūsu stili ir balstīti uz parasto tīmekļa elementu uzvedību. Kad vien iespējams, mēs dodam priekšroku pārlūkprogrammas piedāvātajām iespējām. Piemēram, jūs varat ievietot .btnklasi gandrīz jebkuram elementam, taču lielākā daļa elementu nenodrošina nekādu semantisku vērtību vai pārlūkprogrammas funkcionalitāti. Tā vietā mēs izmantojam <button>s un <a>s.

Tas pats attiecas uz sarežģītākām sastāvdaļām. Lai gan mēs varētu uzrakstīt savu veidlapas validācijas spraudni, lai pievienotu klases vecākajam elementam, pamatojoties uz ievades stāvokli, tādējādi ļaujot tekstam piešķirt sarkanu stilu, mēs dodam priekšroku :valid/ :invalidpseidoelementu izmantošanai, ko nodrošina katra pārlūkprogramma.

Komunālie pakalpojumi

Lietderības klases, kas agrāk bija Bootstrap 3 palīgi, ir spēcīgs sabiedrotais cīņā pret CSS uzpūšanos un sliktu lapu veiktspēju. Lietderības klase parasti ir vienots, nemainīgs īpašuma un vērtības savienojums, kas izteikts kā klase (piemēram, .d-blockapzīmē display: block;). Viņu galvenā pievilcība ir lietošanas ātrums HTML rakstīšanas laikā un rakstāmā pielāgotā CSS apjoma ierobežošana.

Īpaši attiecībā uz pielāgotu CSS — utilītas var palīdzēt cīnīties pret faila lieluma palielināšanos, samazinot visbiežāk atkārtotos īpašuma vērtību pārus atsevišķās klasēs. Tam var būt dramatiska ietekme jūsu projektos.

Elastīgs HTML

Lai gan tas ne vienmēr ir iespējams, mēs cenšamies izvairīties no pārāk dogmatiskiem mūsu HTML prasībās attiecībā uz komponentiem. Tādējādi CSS atlasītājos mēs koncentrējamies uz atsevišķām klasēm un cenšamies izvairīties no tūlītējas bērnu atlasītājiem ( >). Tas nodrošina lielāku elastību ieviešanā un palīdz padarīt mūsu CSS vienkāršāku un mazāk specifisku.

Koda konvencijas

Kodu rokasgrāmata (no Bootstrap līdzveidotāja @mdo) dokumentē, kā mēs rakstām HTML un CSS, izmantojot Bootstrap. Tajā ir norādītas vispārīgas formatēšanas, veselā saprāta noklusējuma, rekvizītu un atribūtu secības un citas vadlīnijas.

Mēs izmantojam Stylelint , lai ieviestu šos un citus standartus mūsu Sass/CSS. Mūsu pielāgotā Stylelint konfigurācija ir atvērtā koda, un tā ir pieejama citiem lietošanai un paplašināšanai.

Mēs izmantojam vnu-jar , lai ieviestu standarta un semantisko HTML, kā arī noteiktu izplatītas kļūdas.