Kopusana

Atako nkasa ya kobanda epesaka botali ya bobandi ya mosala mpe nini epesaka, mokanda oyo etali mingi mpo na nini tosalaka makambo tosalaka na Bootstrap. Ezali kolimbola filozofi na biso mpo na kotonga na web mpo ete basusu bakoka koyekola epai na biso, kopesa maboko elongo na biso, mpe kosalisa biso kobongisa.

Omoni likambo oyo eyokani malamu te, to mbala mosusu ekokaki kosalema malamu koleka? Fungola nimero moko —tokosepela kolobela yango elongo na yo.

Na mokuse

Tokozinda na moko na moko ya oyo mingi na mobimba, kasi na nivo ya likolo, awa ezali oyo etambwisaka lolenge na biso ya kosala.

• Ba composants esengeli ezala responsive mpe mobile-ya liboso
• Esengeli kotonga ba composants na classe ya base pe ko extend via ba classes modificateurs
• Ba états composants esengeli kotosa échelle ya indice z commune
• Soki likoki ezali, bolingi kosalela HTML mpe CSS na esika ya JavaScript
• Soki likoki ezali, salelá ba utilitaires na esika ya ba styles personnalisés
• Soki likoki ezali, koboya kosala ete bátosa masɛngami makasi ya HTML (baponi ya bana) .

Koyanola

Ba styles ya ko répondre ya Bootstrap etongami mpo na kozala ya ko répondre, approche oyo mbala mingi babengaka yango mobile-first . Tosalelaka liloba oyo na ba docs na biso mpe tondimi yango mingi, kasi na bantango mosusu ekoki kozala ya monene mingi. Atako te eteni nyonso esengeli kozala mobimba eyano na Bootstrap, lolenge oyo ya eyano ezali mpo na kokitisa bozangisi ya CSS na kopusaka yo kobakisa ba styles lokola port ya botali ekomi monene.

Na kati ya Bootstrap, okomona yango polele mingi na mituna na biso ya media. Mbala mingi, tosalelaka min-widthmituna oyo ebandaka kosalela na esika moko ya kobukana ya sikisiki mpe ememaka likolo na nzela ya bisika ya bopanzani ya likolo. Na ndakisa, a .d-noneetali kobanda min-width: 0tii na kozanga nsuka. Epayi mosusu, a .d-md-noneesalemaka kobanda na esika ya kokabwana ya katikati mpe tii na likoló.

Na bantango mosusu tokosalela max-widthntango complexité inhérent ya composant moko esengaka yango. Na bantango mosusu, ba overrides oyo ezali fonctionnellement mpe mentalement polele mpo na kosalela mpe kosunga koleka kokoma lisusu fonctionnalité ya moboko uta na ba composants na biso. Tosalaka makasi mpo na kopekisa lolenge oyo ya kosala, kasi tokosalela yango ntango na ntango.

Bakelasi

A part Reboot na biso, feuille de style ya normalisation croisée ya navigateur, ba styles na biso nionso ezali na tina ya kosalela ba classes lokola ba sélecteurs. Yango elingi koloba koboya ba selecteurs ya type (ndakisa, input[type="text"]) mpe ba classes ya ba parents extraneous (par exemple, .parent .child) oyo esalaka ba styles trop spécifiques mpo na ko overrider facilement.

Lokola yango, esengeli kotonga ba composants na classe ya base oyo ezali na ba paires communes, oyo esengeli kozala surpassé te ya propriété-valeur. Na ndakisa, .btnmpe .btn-primary. Tosalelaka .btnmpo na ba styles nionso oyo eyebani mingi lokola display, padding, mpe border-width. Na sima tosalelaka ba modificateurs lokola .btn-primarykobakisa couleur, fond-color, border-color, etc.

Ba classes ya modificateur esengeli kosalelama kaka tango ezali na ba propriétés to ba valeurs ebele oyo esengeli ko changer na kati ya ba variantes ebele. Ba modificateurs ezali ntango nyonso na ntina te, yango wana salá makasi ete ozali mpenza kobomba milɔngɔ́ ya code mpe kopekisa kolongolama oyo ezali na ntina te ntango ozali kosala yango. Ba exemples ya bien ya ba modificateurs ezali ba classes na biso ya couleur ya thème na ba variantes ya taille.

ba échelles ya index z

Ezali na ba z-indexéchelles mibale na Bootstrap —ba éléments na kati ya composant moko mpe ba composants ya superposition.

Ba éléments composants

• Ba composants misusu na Bootstrap etongami na ba éléments superposants mpo na kopekisa ba frontières doubles sans ko modifier borderpropriété. Na ndakisa, bituluku ya ba boutons, bituluku ya kokɔtisa makambo, mpe kokɔtisa nkasa.
• Ba composants oyo bakabolaka z-indexéchelle standard ya à 0travers 3.
• 0ezali default (ya ebandeli), 1ezali :hover, 2ezali :active/ .active, mpe 3ezali :focus.
• Ndenge oyo ekokani na bilikya na biso ya priorité ya likolo ya basaleli. Soki élément moko ezali focusé, ezali na vue mpe na attention ya usager. Ba éléments actifs ezali deuxième haut po elakisaka état. Hover ezali ya misato na likolo mpo elakisaka mokano ya mosaleli, kasi pene na eloko nyonso ekoki kozala hovered.

Ba composants ya ko superposer

Bootstrap ezali na ba composants ebele oyo esalaka lokola superposition ya ndenge moko boye. Yango esangisi, na molongo ya likolo z-index, ba dropdowns, ba navbars fixe mpe ya kokangama, ba modals, ba totips ya bisaleli, mpe ba popovers. Ba composants oyo ezali na z-indexéchelle na yango oyo ebandi na 1000. Motango oyo ya ebandeli eponami na ndenge ya arbitraire mpe esalaka lokola mwa buffer kati na ba styles na biso mpe ba styles personnalisés ya projet na yo.

Composante moko na moko ya superposition ematisaka z-indexvaleur na yango mua moke na ndenge oyo ba principes ya UI communs epesaka nzela na ba éléments focusés to hovered na usager etikala na vue na tango nionso. Ndakisa, modal ezali blocage ya mikanda (ndakisa, okoki kosala action mosusu te sauf action ya modal), yango wana totie yango likolo ya ba navbars na biso.

Yekola makambo mingi na ntina na yango na z-indexlokasa na biso ya mabongisi .

HTML mpe CSS na likoló ya JS

Soki likoki ezali, tolingaka kokoma HTML mpe CSS na esika ya JavaScript. En général, HTML na CSS ezali plus prolifique mpe accessible na batu mingi ya ba niveaux nionso ya expérience différentes. HTML mpe CSS ezali mpe mbangu na navigateur na yo koleka JavaScript, mpe navigateur na yo mingimingi epesaka yo misala mingi.

Principe oyo ezali API na biso ya JavaScript ya classe ya liboso oyo esalelaka ba dataattributs. Ozali na ntina te ya kokoma pene na JavaScript moko mpo na kosalela ba plugins na biso ya JavaScript; na esika na yango, koma HTML. Tanga makambo mingi na ntina na yango na lokasa na biso ya botali ya JavaScript .

Enfin, ba styles na biso etongami na ba comportements fondamentaux ya ba éléments web communs. Soki likoki ezali, tolingaka kosalela makambo oyo navigateur epesaka. Ndakisa, okoki kotia .btnkelasi na pene na élément nionso, kasi ba éléments mingi epesaka ata valeur sémantique moko te to fonctionnalité ya navigateur te. Na yango, na esika na yango, tosalelaka <button>s mpe <a>s.

Ezali mpe bongo mpo na biloko oyo ezali na mindɔndɔ mingi. Alors que tokokaki kokoma plugin na biso moko ya validation ya formulaire mpo na kobakisa ba classes na élément parent sur la base ya état ya entrée moko, na ndenge wana ko permettre biso to styler texte diloba rouge, to préférer kosalela ba :valid/ :invalidpseudo-éléments oyo navigateur nionso epesaka biso.

Ba utilités

Ba classes ya utilité —oyo kala basungi na Bootstrap 3 —ezali allié ya makasi na kobundisa bloat ya CSS mpe performance ya page ya mabe. Kelasi ya utilité ezali mingi mingi bosangisi ya motuya ya biloko moko, oyo ekoki kobongwana te oyo emonisami lokola kelasi (ndakisa, .d-blockezali komonisa display: block;). Appeal na bango ya liboso ezali vitesse ya usage tango ozali kokoma HTML mpe ko limiter quantité ya CSS personnalisé oyo esengeli okoma.

Concrètement na oyo etali CSS personnalisé, ba utilitaires ekoki kosalisa na kobundisa bomati ya taille ya fichier na ko réduire ba paire na yo ya propriété-valeur oyo ezongelamaka mingi na ba classes moko. Yango ekoki kozala na effet dramatique na échelle na ba projets na yo.

HTML oyo ekoki kobongwana

Atako ntango nyonso ekoki kosalema te, tosalaka makasi mpo na koboya kozala na makanisi ya makasi mingi na masɛngami na biso ya HTML mpo na biloko oyo ezali na kati. Na yango, tozali kotya likebi mingi na bakelasi moko na baponi na biso ya CSS mpe tolukaka koboya baponi ya bana ya mbala moko ( >). Yango epesaka yo flexibilité mingi na mise en œuvre na yo mpe esalisaka kobatela CSS na biso pete mpe moins spécifique.

Mibeko ya mibeko

Code Guide (euti na Bootstrap co-creator, @mdo) ekomi ndenge nini tokomaka HTML na biso mpe CSS na kati ya Bootstrap. Ezali kolakisa malako mpo na formatage générale, ba défauts ya sens commun, ba ordres ya propriété mpe ya attribut, mpe mingi mosusu.

Tosalelaka Stylelint mpo na kosala ete mibeko oyo mpe makambo mosusu ekokisama na Sass/CSS na biso. Configuration na biso ya Stylelint personnalisé ezali source ouverte mpe ezali mpo basusu basalela mpe ba extend.

Tosalelaka vnu-jar mpo na kosala ete HTML ya momesano mpe ya sémantique ezala makasi, mpe lisusu koyeba mabunga oyo emonanaka mingi.