Kopusana
Yekola na ntina ya mibeko ya kotambwisa, mayele, mpe mayele oyo esalelami mpo na kotonga mpe kobatela Bootstrap mpo ete okoka kosala yango moko mpe koyeisa yango monene na pɛtɛɛ nyonso.
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, bolinga 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 koyanola ya Bootstrap etongami mpo na kozala ya koyanola, lolenge 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-width
mituna 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-none
etali kobanda min-width: 0
tii na kozanga nsuka. Epayi mosusu, a .d-md-none
esalemaka kobanda na esika ya kokabwana ya katikati mpe tii na likoló.
Na bantango mosusu tokosalela max-width
ntango 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, .btn
mpe .btn-primary
. Tosalelaka .btn
mpo na ba styles nionso oyo emonanaka lokola display
, padding
, mpe border-width
. Na sima tosalelaka ba modificateurs lokola .btn-primary
kobakisa 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 oyo ezo superposer pona kopekisa ba frontières doubles sans ko modifier
border
proprié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 à0
travers3
. 0
ezali default (ya ebandeli),1
ezali:hover
,2
ezali:active
/.active
, mpe3
ezali: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-index
valeur 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-index
lokasa 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 data
attributs. 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 etongaka na ba comportements fondamentaux ya ba éléments web communs. Soki likoki ezali, tolingaka kosalela makambo oyo navigateur epesaka. Ndakisa, okoki kotia .btn
kelasi 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
/ :invalid
pseudo-é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-block
ezali 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 (ewutaki na Bootstrap co-creator, @mdo) ekomi ndenge 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 disponible 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.