Source

Nêzîkbûhatinî

Li ser prensîbên rêber, stratejî û teknîkên ku ji bo çêkirin û domandina Bootstrap têne bikar anîn fêr bibin da ku hûn bi hêsanî wê bi xwe xweş bikin û dirêj bikin.

Dema ku rûpelên destpêkê serdanek danasînê ya projeyê û tiştê ku ew pêşkêşî dike peyda dike, ev belge balê dikişîne ser ka çima em tiştên ku em li Bootstrap dikin dikin. Ew felsefeya me rave dike ku em li ser tevneyê ava bikin da ku yên din ji me fêr bibin, bi me re bibin alîkar, û ji me re bibin alîkar ku em pêşve bibin.

Tiştek ku ne rast xuya dike, an jî dibe ku çêtir were kirin? Pirsgirêkek vekin - em dixwazin bi we re nîqaş bikin.

Berhevkirinî

Em ê li her yek ji van bêtir bişopînin, lê di astek bilind de, li vir tiştê ku nêzîkatiya me rêber dike.

  • Pêdivî ye ku pêkhate bersivdar û yekem-mobîl bin
  • Pêdivî ye ku pêkhate bi çînek bingehîn were çêkirin û bi navgîniya çînên guhêrbar were dirêj kirin
  • Dewletên pêkhatî divê li gorî pîvanek z-indexek hevpar tevbigerin
  • Dema ku gengaz be, pêkanîna HTML û CSS-ê li ser JavaScript-ê tercîh bikin
  • Kengê ku gengaz be, li ser şêwazên xwerû karûbaran bikar bînin
  • Kengê ku gengaz be, ji pêkanîna daxwazên hişk ên HTML-ê dûr bixin (hilbijêrên zarokan)

Pêrakirin

Şêweyên bersivdar ên Bootstrap ji bo bersivdar têne çêkirin, nêzîkatiyek ku bi gelemperî wekî yekem-mobîl tê binav kirin . Em vê têgînê di belgeyên xwe de bikar tînin û bi piranî pê razî ne, lê carinan ew dikare pir berfireh be. Digel ku ne pêdivî ye ku her pêkhateyek di Bootstrap-ê de bi tevahî bersivdar be, ev nêzîkatiya bersivdar li ser kêmkirina serpêhatiyên CSS-ê ye ku bi zorê dide we ku hûn şêwazan lê zêde bikin ji ber ku dîmen mezin dibe.

Li seranserê Bootstrap, hûn ê di pirsên me yên medyayê de herî zelal vê yekê bibînin. Di pir rewşan de, em min-widthpirsnameyên ku di xalek veqetandinê ya taybetî de dest bi sepandinê dikin û di nav xalên veqetandinê yên bilind de derbas dibin bikar tînin. Mînakî, a .d-noneji bêdawîtiyê derbas dibe min-width: 0. Ji hêla din ve, a .d-md-noneji xala veqetandina navîn û jor derbas dibe.

Carinan em ê bikar bînin max-widthdema ku tevliheviya xwerû ya pêkhateyek wê hewce bike. Carinan, ev serpêhatî ji nûvenivîsandina fonksiyonên bingehîn ên ji pêkhateyên me ve ji hêla fonksiyonel û derûnî ve zelaltir in ku werin bicîh kirin û piştgirî bikin. Em hewl didin ku vê nêzîkatiyê sînordar bikin, lê dê dem bi dem wê bikar bînin.

Classes

Ji xeynî Reboot-a me, şêwazek normalkirina gerokê ya cross-gerokê, hemî şêwazên me armanc dikin ku dersan wekî hilbijêr bikar bînin. Ev tê vê wateyê ku ji hilbijêrên tîpan (mînak, input[type="text"]) û çînên dêûbav ên derveyî (mînak, .parent .child) dûr bisekinin ku şêwazên pir taybetî dikin ku bi hêsanî werin paşguh kirin.

Bi vî rengî, pêdivî ye ku pêkhate bi çînek bingehîn ku cotên milk-nirxê yên hevpar, yên ku neyên paşve xistin, werin çêkirin. Ji bo nimûne, .btnû .btn-primary. Em ji .btnbo hemî şêwazên hevpar ên wekî display, padding, û bikar tînin border-width. Dûv re em guhêrbaran bikar tînin wekî .btn-primaryreng, paş-reng, sînor-reng, hwd zêde bikin.

Divê çînên guhêrbar tenê dema ku gelek taybetmendî an nirx hene ku di nav gelek guhertoyan de werin guheztin werin bikar anîn. Guherker her gav ne hewce ne, ji ber vê yekê pê ewle bin ku hûn bi rastî xetên kodê tomar dikin û dema ku wan diafirînin pêşî li serweriyên nehewce digirin. Nimûneyên baş ên guhêrbar dersên me yên rengê mijarê û guhertoyên mezinahiyê ne.

pîvanên z-index

Di Bootstrap-ê de du z-indexpîvan hene - hêmanên di nav pêkhatek û pêkhateyên sergirtî de.

Hêmanên pêkhatî

  • Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the border property. For example, button groups, input groups, and pagination.
  • These components share a standard z-index scale of 0 through 3.
  • 0 is default (initial), 1 is :hover, 2 is :active/.active, and 3 is :focus.
  • This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly anything can be hovered.

Overlay components

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

Her çend ne her gav ne gengaz be jî, em hewl didin ku di hewcedariyên xwe yên HTML-ê yên ji bo pêkhateyan de zêde dogmatîk nebin. Bi vî rengî, em di hilbijêrên xwe yên CSS de balê dikişînin ser dersên yekane û hewl didin ku xwe ji hilbijêrên zarokan ên yekser dûr bixin ( >). Ev di pêkanîna we de bêtir nermbûnek dide we û dibe alîkar ku CSS-ya me sadetir û kêmtir taybetî bimîne.