Lähenemine

Siit saate teada Bootstrapi koostamiseks ja hooldamiseks kasutatavate juhtpõhimõtete, strateegiate ja tehnikate kohta, et saaksite seda ise hõlpsamini kohandada ja laiendada.

Kuigi alustamise leheküljed pakuvad projekti ja selle pakutava tutvustust, keskendub käesolev dokument sellele, miks me Bootstrapis asju teeme. See selgitab meie filosoofiat veebis ülesehitamisel, et teised saaksid meilt õppida, meiega kaasa aidata ja aidata meil end täiustada.

Kas näete midagi, mis ei kõla õigesti või mida saaks paremini teha? Avage probleem – me tahaksime seda teiega arutada.

Kokkuvõte

Sukeldume neisse kõigisse läbivalt, kuid kõrgel tasemel juhindume meie lähenemisviisist järgmiselt.

• Komponendid peaksid olema tundlikud ja esmalt mobiilsed
• Komponendid tuleks ehitada põhiklassiga ja laiendada modifikaatoriklasside kaudu
• Komponentide olekud peaksid järgima ühist z-indeksi skaala
• Kui vähegi võimalik, eelista JavaScripti asemel HTML-i ja CSS-i rakendamist
• Kui võimalik, kasutage kohandatud stiilide asemel utiliite
• Võimaluse korral vältige rangete HTML-i nõuete jõustamist (lastevalijad)

Vastutulelik

Bootstrapi tundlikud stiilid on loodud tundlikuks – lähenemist, mida sageli nimetatakse mobiilipõhiseks . Kasutame seda terminit oma dokumentides ja oleme sellega suures osas nõus, kuid mõnikord võib see olla liiga lai. Kuigi kõik komponendid ei pea Bootstrapis täielikult reageerima, on see reageeriv lähenemisviis CSS-i alistamiste vähendamiseks, sundides teid lisama stiile, kui vaateava suureneb.

Kogu Bootstrapis näete seda kõige selgemalt meie meediapäringutes. Enamikul juhtudel kasutame min-widthpäringuid, mis hakkavad rakenduma kindlast katkestuspunktist ja viivad edasi läbi kõrgemate murdepunktide. Näiteks a .d-nonekehtib alates min-width: 0lõpmatuseni. Teisest küljest .d-md-nonekehtib a alates keskmisest katkestuspunktist ja ülespoole.

Mõnikord kasutame max-widthseda, kui komponendile omane keerukus seda nõuab. Mõnikord on need alistamised funktsionaalselt ja vaimselt selgemini rakendatavad ja toetatavad kui meie komponentidest põhifunktsioonide ümberkirjutamine. Püüame seda lähenemisviisi piirata, kuid kasutame seda aeg-ajalt.

klassid

Peale brauseriülese normaliseerimise laaditabeli Reboot on kõigi meie stiilide eesmärk kasutada klasse valijatena. See tähendab, et tuleb loobuda tüübivalijatest (nt input[type="text"]) ja kõrvalistest vanemklassidest (nt .parent .child), mis muudavad stiilid liiga spetsiifiliseks, et neid kergesti alistada.

Sellisena tuleks komponendid ehitada baasklassiga, mis sisaldab ühiseid, mitte alistatavaid vara-väärtuse paare. Näiteks .btnja .btn-primary. Kasutame .btnkõigi levinud stiilide jaoks, nagu display, paddingja border-width. Seejärel kasutame modifikaatoreid , näiteks .btn-primaryvärvi, taustavärvi, äärise värvi jne lisamiseks.

Muutusklasse tuleks kasutada ainult siis, kui mitme variandi vahel on mitu atribuuti või väärtust, mida muuta. Modifikaatorid ei ole alati vajalikud, seega veenduge, et salvestate koodiridu ja väldiksite nende loomisel tarbetuid ülekirjutusi. Headeks modifikaatorite näideteks on meie teemavärviklassid ja suurusvariandid.

z-indeksi skaalad

Bootstrapis on kaks z-indexskaalat – komponendis olevad elemendid ja ülekattekomponendid.

Komponentelemendid

• Mõned Bootstrapi komponendid on üles ehitatud kattuvate elementidega, et vältida topeltääriseid ilma borderatribuuti muutmata. Näiteks nupurühmad, sisestusrühmad ja lehekülgede arv.
• Nendel komponentidel on z-indexstandardskaala 0kuni 3.
• 0on vaikimisi (esialgne), 1on :hover, 2on :active/ .activeja 3on :focus.
• See lähenemine vastab meie ootustele kasutajate kõrgeima prioriteedi kohta. Kui element on fokusseeritud, on see nähtaval ja kasutaja tähelepanu all. Aktiivsed elemendid on suuruselt teisel kohal, kuna need näitavad olekut. Kursor on suuruselt kolmas, kuna see näitab kasutaja kavatsust, kuid kursorit saab hõljutada peaaegu kõike .

Ülekatte komponendid

Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.

Each overlay component increases its z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.

Learn more about this in our z-index layout page.

HTML and CSS over JS

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

Kuigi see pole alati võimalik, püüame vältida komponentide HTML-i nõuetes liigset dogmaatilisust. Seega keskendume oma CSS-i valijates üksikutele klassidele ja püüame vältida vahetuid lastevalijaid ( >). See annab teile juurutamisel suurema paindlikkuse ning aitab meie CSS-i lihtsamaks ja vähem spetsiifiliseks muuta.