Nálgun

Þó að upphafssíðurnar gefi kynningarleiðsögn um verkefnið og hvað það býður upp á, fjallar þetta skjal um hvers vegna við gerum það sem við gerum í Bootstrap. Það útskýrir hugmyndafræði okkar um að byggja á vefnum svo að aðrir geti lært af okkur, lagt sitt af mörkum með okkur og hjálpað okkur að bæta okkur.

Sjáðu eitthvað sem hljómar ekki rétt, eða gæti verið gert betur? Opnaðu mál — við viljum gjarnan ræða það við þig.

Samantekt

Við munum kafa ofan í hvert af þessu meira í gegn, en á háu stigi, hér er það sem stýrir nálgun okkar.

• Íhlutir ættu að vera móttækilegir og vera fyrstir fyrir farsíma
• Íhlutir ættu að vera byggðir með grunnflokki og stækkaðir með breytiflokkum
• Íhlutaríki ættu að hlýða sameiginlegum z-vísitölu kvarða
• Ef mögulegt er skaltu velja HTML og CSS útfærslu fram yfir JavaScript
• Þegar mögulegt er, notaðu tól yfir sérsniðna stíl
• Þegar mögulegt er, forðastu að framfylgja ströngum HTML-kröfum (barnaval)

Móttækilegur

Móttækilegur stíll Bootstrap er byggður til að vera móttækilegur, nálgun sem oft er kölluð farsíma fyrst . Við notum þetta hugtak í skjölum okkar og erum að mestu sammála því, en stundum getur það verið of vítt. Þó að ekki þurfi allir íhlutir að vera algjörlega móttækilegir í Bootstrap, þá snýst þessi móttækileg nálgun um að draga úr CSS-hækkunum með því að ýta á þig til að bæta við stílum eftir því sem útsýnisgáttin verður stærri.

Yfir Bootstrap sérðu þetta skýrast í fjölmiðlafyrirspurnum okkar. Í flestum tilfellum notum við min-widthfyrirspurnir sem byrja að eiga við á tilteknum brotpunkti og bera upp í gegnum hærri brotpunktana. Til dæmis .d-nonegildir a frá min-width: 0til óendanleika. Aftur á móti .d-md-nonegildir a frá miðlungs brotpunkti og upp.

Stundum munum við nota max-widthþegar eðlislægur flókinn íhlutur krefst þess. Stundum eru þessar yfirfærslur virknilega og andlega skýrari í framkvæmd og stuðningi en að endurskrifa kjarnavirkni úr íhlutum okkar. Við leitumst við að takmarka þessa nálgun en munum nota hana af og til.

Flokkar

Burtséð frá endurræsingunni okkar, stílblaði fyrir eðlilega stillingu í gegnum vafra, miða allir stílarnir okkar að því að nota flokka sem veljara. Þetta þýðir að forðast tegundavali (td input[type="text"]) og utanaðkomandi foreldraflokka (td .parent .child) sem gera stíla of sérstaka til að hnekkja þeim.

Sem slíkir ættu íhlutir að vera byggðir með grunnflokki sem hýsir algeng pör eigna og verðmætis sem ekki má hnekkja. Til dæmis, .btnog .btn-primary. Við notum .btnfyrir alla algenga stíla eins og display, padding, og border-width. Við notum síðan breytingar eins og .btn-primaryað bæta við litnum, bakgrunnslitnum, rammalitnum osfrv.

Breytiflokka ætti aðeins að nota þegar það eru margar eiginleikar eða gildi sem á að breyta í mörgum afbrigðum. Breytingar eru ekki alltaf nauðsynlegar, svo vertu viss um að þú sért í raun að vista línur af kóða og koma í veg fyrir óþarfa hnekkingar þegar þú býrð til þær. Góð dæmi um breytingar eru þemalitaflokkar okkar og stærðarafbrigði.

z-vísitölu vog

Það eru tveir z-indexmælikvarðar í Bootstrap—þættir innan íhluta og yfirlagshlutar.

Íhlutir

• Sumir hlutir í Bootstrap eru smíðaðir með hlutum sem skarast til að koma í veg fyrir tvöföld landamæri án þess að breyta bordereigninni. Til dæmis, hnappahópar, inntakshópar og blaðsíðugerð.
• Þessir íhlutir deila stöðluðum z-indexmælikvarða í 0gegnum 3.
• 0er sjálfgefið (upphaflega), 1er :hover, 2er :active/ .active, og 3er :focus.
• Þessi nálgun passar við væntingar okkar um hæsta forgang notenda. Ef þáttur er einbeittur er hann í augsýn og við athygli notandans. Virkir þættir eru næsthæstir vegna þess að þeir gefa til kynna ástand. Sveima er þriðja hæst vegna þess að það gefur til kynna ásetning notenda, en næstum allt er hægt að sveima.

Yfirlagsíhlutir

Bootstrap inniheldur nokkra hluti sem virka sem yfirlag af einhverju tagi. Þetta felur í sér, í hæstu röð z-index, fellivalmyndir, fastar og klístraðar siglingastikur, modals, verkfæraábendingar og sprettiglugga. Þessir þættir hafa sinn eigin z-indexmælikvarða sem byrjar á 1000. Þetta upphafsnúmer var valið af geðþótta og þjónar sem lítill biðminni á milli stíla okkar og sérsniðna stíla verkefnisins þíns.

Hver yfirlagshluti eykur z-indexgildi sitt örlítið á þann hátt að algengar meginreglur notendaviðmótsins leyfa notandafókus eða sveimaeiningum að vera alltaf í sýn. Til dæmis er aðferð til að loka fyrir skjöl (td þú getur ekki gert neinar aðrar aðgerðir nema fyrir aðgerð aðferðarinnar), svo við setjum það fyrir ofan siglingastikurnar okkar.

Lærðu meira um þetta á z-indexskipulagssíðunni okkar .

HTML og CSS yfir JS

Þegar mögulegt er viljum við frekar skrifa HTML og CSS yfir JavaScript. Almennt séð eru HTML og CSS afkastameiri og aðgengilegri fyrir fleira fólk á öllum mismunandi reynslustigum. HTML og CSS eru líka hraðari í vafranum þínum en JavaScript og vafrinn þinn býður þér almennt upp á mikla virkni.

Þessi regla er fyrsta flokks JavaScript API okkar sem notar dataeiginleika. Þú þarft ekki að skrifa næstum hvaða JavaScript sem er til að nota JavaScript viðbæturnar okkar; í staðinn skaltu skrifa HTML. Lestu meira um þetta á JavaScript yfirlitssíðu okkar .

Að lokum byggja stíll okkar á grundvallarhegðun algengra vefþátta. Þegar mögulegt er viljum við frekar nota það sem vafrinn býður upp á. Til dæmis geturðu sett .btnflokk á næstum hvaða frumefni sem er, en flestir þættir veita ekki merkingargildi eða vafravirkni. Svo í staðinn notum við <button>s og <a>s.

Sama gildir um flóknari hluti. Þó að við gætum skrifað okkar eigin formstaðfestingarviðbót til að bæta flokkum við foreldraeiningu byggt á ástandi inntaks, sem gerir okkur kleift að stíla textann sem segir rautt, þá viljum við frekar nota :valid/ :invalidgerviþættina sem allir vafrar útvega okkur.

Veitur

Gagnaflokkar - áður aðstoðarmenn í Bootstrap 3 - eru öflugur bandamaður í baráttunni gegn CSS uppþembu og lélegum síðuafköstum. Notaflokkur er venjulega ein, óbreytanleg pörun eigna og virðis sem gefin er upp sem flokkur (td .d-blocktáknar display: block;). Aðaláfrýjun þeirra er hraði notkunar meðan þú skrifar HTML og takmarka magn sérsniðinna CSS sem þú þarft að skrifa.

Sérstaklega varðandi sérsniðna CSS, tól geta hjálpað til við að berjast gegn aukinni skráarstærð með því að fækka algengustu endurteknu eignagildispörunum þínum í staka flokka. Þetta getur haft stórkostleg áhrif á mælikvarða í verkefnum þínum.

Sveigjanlegt HTML

Þó að það sé ekki alltaf hægt, reynum við að forðast að vera of dogmatísk í HTML-kröfum okkar fyrir íhluti. Þannig einbeitum við okkur að einstökum flokkum í CSS vali okkar og reynum að forðast strax barnaval ( >). Þetta gefur þér meiri sveigjanleika í útfærslu þinni og hjálpar til við að halda CSS okkar einfaldara og minna sértækt.

Code samningar

Code Guide (frá Bootstrap co-creator, @mdo) skráir hvernig við skrifum HTML og CSS yfir Bootstrap. Það tilgreinir leiðbeiningar um almennt snið, vanskil á skynsemi, eigna- og eigindapöntun og fleira.

Við notum Stylelint til að framfylgja þessum stöðlum og fleira í Sass/CSS okkar. Sérsniðin Stylelint stilling okkar er opinn uppspretta og tiltækur fyrir aðra til að nota og framlengja.

Við notum vnu-jar til að framfylgja stöðluðu og merkingarfræðilegu HTML, auk þess að greina algengar villur.