Source

Mit

Lan bɔt di gayd prinsipul dɛn, strateji dɛn, ɛn tɛknik dɛn we dɛn yuz fɔ bil ɛn mentenɛt Bootstrap so dat yu go ebul fɔ kɔstɔmayz ɛn ɛkstɛnd am izi wan yusɛf.

Pan ɔl we di pej dɛn we de sho aw fɔ bigin di prɔjek de gi wan introdukshɔn tour fɔ di prɔjek ɛn wetin i de gi, dis dɔkyumɛnt de tɔk mɔ bɔt wetin mek wi de du di tin dɛn we wi de du na Bootstrap. I de ɛksplen wi filɔsofi fɔ bil na di wɛb so dat ɔda pipul dɛn go lan frɔm wi, kɔntribyut wit wi, ɛn ɛp wi fɔ impɔtant.

Si sɔntin we nɔ de sawnd rayt, ɔ sɔntɛm dɛn go ebul fɔ du am bɛtɛ? Opin wan isyu —wi go lɛk fɔ tɔk bɔt am wit yu.

Ɛksplen

Wi go dayv insay ɛni wan pan dɛn wan ya mɔ ɔlsay, bɔt na ay levul, na dis de gayd wi we fɔ du tin.

  • Komponent dɛn fɔ bi responsiv ɛn mobayl-fɔs
  • Komponent dɛn fɔ bil wit wan bays klas ɛn ɛkstɛnd via modifya klas dɛn
  • Komponent stet dɛn fɔ obe wan kɔmɔn z-indeks skel
  • Ɛnitɛm we i pɔsibul, lɛk fɔ yuz HTML ɛn CSS implimɛnt pas JavaSkript
  • Ɛnitɛm we i pɔsibul, yuz yutiliti dɛn pas kɔstɔm stayl dɛn
  • Ɛnitɛm we i pɔsibul, nɔ mek dɛn fala di strikt HTML rikwaymɛnt dɛn (pikin dɛn we de pik pikin dɛn) .

Fɔ ansa

Bootstrap in rispɔnsiv stayl dɛn bil fɔ bi rispɔnsiv, wan we we dɛn kin kɔl bɔku tɛm mobayl-fɔs . Wi de yuz dis wɔd na wi doks ɛn wi kin gri wit am bɔku wan, bɔt sɔntɛnde i kin tu brayt. Pan ɔl we nɔto ɔl kɔmpɔnɛnt fɔ rispɔns ɔlsay na Bootstrap, dis rispɔnsiv we fɔ du tin na fɔ ridyus CSS ɔvarayd dɛn bay we i de push yu fɔ ad stayl dɛn as di viupɔt de big.

Across Bootstrap, yu go si dis klia wan na wi midia kweshon dem. Bɔku tɛm, wi kin yuz min-widthkwɛstyɔn dɛn we kin bigin fɔ aplay na wan patikyula brek pɔynt ɛn kɛr go ɔp tru di ay brek pɔynt dɛn. Fɔ ɛgzampul, a .d-nonede aplay frɔm min-width: 0to infiniti. Na di ɔda say, a .d-md-nonede aplay frɔm di midul brekpɔynt ɛn ɔp.

Sɔntɛnde wi go yuz max-widthwe wan kɔmpɔnɛnt in inhɛrɛnt kɔmplisiti nid am. Sɔntɛnde, dɛn ɔvarayd ya kin wok ɛn mental klia fɔ impruv ɛn sɔpɔt pas fɔ rayt bak di kɔr funkshɔnaliti frɔm wi kɔmpɔnɛnt dɛn. Wi de tray fɔ stɔp dis we fɔ du tin, bɔt wi go yuz am wan wan tɛm.

Klas dɛn

Apat frɔm wi Ribɔt, we na wan krɔs-brawza nɔmalizeshɔn staylshit, ɔl wi stayl dɛn aim fɔ yuz klas dɛn as sɛlɛktɔ. Dis min se yu fɔ stiar klia pan di tayp sɛlɛktɔ dɛn (ɛgz., input[type="text"]) ɛn ɛkstra mama ɛn papa klas dɛn (ɛgz., .parent .child) we de mek stayl dɛn tu spɛshal fɔ mek dɛn ebul fɔ ɔvalayz izi wan.

As a so, kɔmpɔnɛnt dɛn fɔ bil wit wan bays klas we gɛt kɔmɔn, nɔ fɔ ɔvarayd prɔpati-valyu pe dɛn. Fɔ ɛgzampul, .btnɛn .btn-primary. Wi de yuz .btnfɔ ɔl di kɔmɔn stayl dɛn lɛk display, padding, ɛn border-width. Dɔn wi kin yuz modifya dɛn lɛk .btn-primaryfɔ ad di kɔlɔ, bakgrɔn-kɔlɔ, bɔda-kɔlɔ, ɛn ɔda tin dɛn.

Modifaya klas dɛn fɔ jɔs yuz we bɔku prɔpati ɔ valyu dɛn de fɔ chenj akɔdin to bɔku vayriɔnt dɛn. Modifaya dɛn nɔ kin nid ɔltɛm, so mek shɔ se yu rili de sev layn dɛn fɔ kɔd ɛn mek dɛn nɔ ɔvalayz dɛn we nɔ nid we yu de mek dɛn. Gud ɛgzampul dɛn fɔ modifya dɛn na wi tim kɔlɔ klas dɛn ɛn saiz difrɛns dɛn.

z-indeks skel dɛn

Tu z-indexskel dɛn de na Bootstrap—ɛlimɛnt dɛn insay wan kɔmpɔnɛnt ɛn ɔvlay kɔmpɔnɛnt dɛn.

Komponent elemɛnt dɛn

  • 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 is random and serves as a small buffer between our styles and your project’s custom styles.

Each overlay component increases it’s 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 is 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

Pan ɔl we i nɔ pɔsibul ɔltɛm, wi de tray fɔ avɔyd fɔ bi ɔva dogmatik insay wi HTML rikwaymɛnt fɔ kɔmpɔnɛnt dɛn. So, wi de pe atɛnshɔn pan wan klas dɛn na wi CSS sɛlɛktɔ dɛn ɛn tray fɔ avɔyd pikin dɛn sɛlɛktɔ dɛn wantɛm wantɛm ( >). Dis de gi yu mɔ fleksibiliti fɔ yu implimɛnt ɛn ɛp fɔ mek wi CSS simpul ɛn nɔ spɛshal.