in English

Kosala migrate na v4

Bootstrap 4 ezali réécriture monene ya projet mobimba. Mbongwana oyo emonanaka mingi elobami na bokuse awa na se, elandi mbongwana ya sikisiki mingi na biteni oyo etali yango.

Mbongwana ya stable

Ko longwa na Beta 3 na version na biso ya v4.x stable, ezali na ba changements ya kobuka te, mais ezali na ba changements ya notable.

Konyata mikanda

  • Babongisi ba utilitaires ya impression oyo ebukani. Liboso, kosalela .d-print-*kelasi moko ekolongola kelasi mosusu nyonso na mbalakaka .d-*. Sikawa, ekokani na ba utilitaires na biso mosusu ya kolakisa mpe etali kaka media wana ( @media print).

  • Epanzani ba utilitaires ya kolakisa impression oyo ezali mpo na kokokana na ba utilitaires mosusu. Beta 3 mpe koleka bazalaki kaka na block, inline-block, inline, mpe none. Stable v4 ebakisami flex, inline-flex, table, table-row, mpe table-cell.

  • Bobongisi bozongisi ya botali ya liboso ya imprimerie na kati ya ba navigateurs na ba styles ya sika ya impression oyo elakisaka @page size.

Beta 3 ebongwanaka

Alors que Beta 2 amonaki eteni monene ya mbongwana na biso ya kobukana na boumeli ya phase beta, kasi tozali naino na mwa oyo esengelaki kotalelama na kobimisama ya Beta 3. Mbongwana oyo ekosalema soki ozali kosala mikolo oyo na Beta 3 uta na Beta 2 to version nyonso ya kala ya Bootstrap.

Mosusu

  • Alongolaki $thumbnail-transitionvariable oyo basaleli te. Tozalaki kosala transition eloko te, yango wana ezalaki kaka code ya likolo.
  • Paquet npm ezali lisusu na ba fichiers mosusu te longola kaka ba fichiers source na dist na biso; soki otielaki bango motema mpe ozalaki kosala ba scripts na biso na nzela ya node_modulesdossier, esengeli obongisa ndenge ya mosala na yo.

Baformilɛrɛ

  • Kokoma lisusu ba cases ya kotiya elembo mpe ba radios oyo esalemi na kolanda bamposa na yango mpe oyo esalemi na ndenge ya liboso. Sikoyo, bango mibale bazali na structure HTML oyo ekokani (ya libanda <div>na ndeko <input>mpe <label>) mpe ba styles ya layout ndenge moko (empilé par défaut, inline na classe ya modificateur). Yango epesaka biso nzela ya kosala style ya étiquette na kotalela état ya entrée, ko simplifier soutien ya disabledattribut (avant esengelaki classe parent) mpe ko soutenir malamu validation ya formulaire na biso.

    Lokola eteni ya oyo, tobongoli CSS mpo na kotambwisa background-images ebele na ba cases ya kotiya elembo ya formulaire personnalisé mpe ba radios. Liboso, eleman oyo elongolami sikoyo .custom-control-indicatorezalaki na langi ya nsima, gradient, mpe elembo ya SVG. Kobongisa gradient ya fond elingaki koloba kozongisa nyonso wana mbala nyonso oyo osengelaki kobongola kaka moko. Sikoyo, tozali na yango .custom-control-label::beforempo na kotondisa mpe gradient mpe .custom-control-label::afteresimbaka elembo.

    Mpo na kosala vérification personnalisée na kati ya molongo, bakisa .custom-control-inline.

  • Selecteur mise à jour mpo na ba groupes ya ba boutons oyo esalemi na entrée. Au lieu ya [data-toggle="buttons"] { }pona style na comportement, tosalelaka dataattribut kaka pona ba comportements ya JS pe to se fier na .btn-group-toggleclasse ya sika pona styling.

  • Elongolami .col-form-legendna faveur ya un peu amélioré .col-form-label. Na ndenge oyo .col-form-label-smmpe .col-form-label-lgekoki kosalelama na <legend>ba éléments na pete.

  • Ba entrées ya fichier personnalisé ezuaki changement na $custom-file-textvariable na bango ya Sass. Ezali lisusu te karte ya Sass oyo ekangami mpe sikawa ezali kaka kopesa nguya na molongo moko Browse—bouton lokola yango ezali sikawa bobele moko ya pseudo-élément oyo esalemi uta na Sass na biso. Mokanda Choose fileyango euti sikoyo na .custom-file-label.

Bituluku ya bokɔtisi

  • Ba addons ya groupe ya entrée ezali sikoyo spécifique na placement na bango par rapport na entrée moko. Totiki .input-group-addonmpe .input-group-btnmpo na bakelasi mibale ya sika, .input-group-prependmpe .input-group-append. Esengeli osalela polele append to prepend sikoyo, ko simplifier mingi ya CSS na biso. Na kati ya append to prepend, tyá ba boutons na yo ndenge ekozala esika mosusu nyonso, kasi zingá makomi na .input-group-text.

  • Ba styles ya validation esungami sikoyo, ndenge moko na ba entrées ebele (atako okoki kaka ko valider entrée moko na groupe moko).

  • Ba classes ya dimensionnement esengeli ezala na parent .input-groupet non na ba éléments ya forme individuel.

Beta 2 ebongwanaka

Ntango tozali na beta, tozali na mokano ya kozala na mbongwana ya kobukana te. Kasi, makambo etambolaka ntango nyonso te ndenge ekanamaki. Awa na nse ezali na mbongwana ya kobuka oyo osengeli kobosana te ntango ozali kolongwa na Beta 1 mpo na kokende na Beta 2.

Kobukana

  • Elongolami $badge-colorvariable mpe bosaleli na yango na .badge. Tosalelaka fonction ya contraste ya couleur pona kopona a colorbasé na background-color, yango wana variable ezali na tina te.
  • Renommé grayscale()fonction to gray()mpo na koboya kobuka matata na grayscalefiltre natif ya CSS.
  • Bapesaki nkombo mosusu .table-inverse, .thead-inverse, mpe .thead-defaultna .*-darkmpe .*-light, oyo ekokani na balangi na biso oyo tosalelaka bisika mosusu.
  • Ba tableaux oyo ezo répondre ezo generer sikoyo ba classes pona point de rupture ya grille moko na moko. Oyo epanzani na Beta 1 na ndenge oyo .table-responsiveozalaki kosalela ezali mingi lokola .table-responsive-md. Okoki sikoyo kosalela .table-responsiveto .table-responsive-{sm,md,lg,xl}soki esengeli.
  • Abwakaki lisungi ya Bower lokola mokambi ya paquet esili kozala deprecated mpo na ba alternatives (ndakisa, Yarn to npm). Tala bower/bower#2298 mpo na koyeba makambo mosusu.
  • Bootstrap esengaka kaka jQuery 1.9.1 to koleka, kasi opesameli toli ya kosalela version 3.x puisque ba navigateurs oyo v3.x esungami ezali oyo Bootstrap esungaka plus v3.x ezali na mwa ba fixes ya sécurité.
  • Alongolaki .form-control-labelkelasi oyo basalelaka te. Soki osali kosala usage ya classe oyo, ezalaki duplicate ya .col-form-labelclasse oyo verticalement centré a <label>na yango entrée associée na ba layouts ya formulaire horizontale.
  • Ebongoli the color-yiquta na mixin oyo ezalaki na colorpropriété na fonction oyo ezongisaka valeur, kopesa yo nzela ya kosalela yango mpo na propriété CSS nionso. Na ndakisa, na esika ya color-yiq(#000), olingaki kokoma color: color-yiq(#000);.

Makambo ya ntina

  • Akotisi pointer-eventsbosaleli ya sika na ba modals. Ya libanda .modal-dialogelekaka na makambo na pointer-events: nonempo na manipulation ya ba clics personnalisés (kosala ete ezala possible ya koyoka kaka na .modal-backdropmpo na ba clics nionso), mpe na nsima ezo contrer yango mpo na oyo ya solo .modal-contentna pointer-events: auto.

Na mokuse

Tala biloko ya minene ya billet oyo okolinga ozala conscient tango oko longwa na v3 na v4.

Lisungi ya navigateur

  • Abwakaki lisungi ya IE8, IE9, mpe iOS 6. v4 ezali sikoyo kaka IE10+ na iOS 7+. Mpo na basite oyo ezali na mposa ya moko na yango, salelá v3.
  • Abakisaki lisungi ya ofele mpo na Navigateur mpe WebView ya Android v5.0 Lollipop. Ba versions ya kala ya Navigateur Android na WebView etikalaka kaka soutenu na ndenge ya officiel te.

Mbongwana ya mokili mobimba

  • Flexbox ezali activé par défaut. En général oyo elingi koloba kokende mosika na ba flotteurs mpe mingi na kati ya ba composants na biso.
  • Ebongwani uta na Moins na Sass mpo na ba fichiers CSS na biso ya source.
  • Ebongwani uta pxna remlokola unité na biso ya liboso ya CSS, atako ba pixels ezali naino kosalelama mpo na mituna ya media mpe bizaleli ya grille lokola ba portes de vue ya dispositif ezali na bopusi te na bonene ya lolenge.
  • Bonene ya bafonte ya mokili mobimba ebakisami kobanda na 14pxkino 16px.
  • Ebongisaki lisusu ba niveaux ya grille mpo na kobakisa option ya mitano (ko adresser ba appareils ya mike na 576pxmpe na se) mpe elongolaki -xsinfix na ba classes wana. Ndakisa: .col-6.col-sm-4.col-md-3.
  • A remplacer thème optionnel separate na ba options configurables via ba variables SCSS (par exemple, $enable-gradients: true).
  • Système ya kotonga ebongisami mpo na kosalela série ya ba scripts ya npm na esika ya Grunt. Tala package.jsonpona ba scripts nionso, to projet na biso readme pona ba besoins ya développement local.
  • Kosalela Bootstrap oyo ezali koyanola te ezali lisusu kosungama te.
  • Abwakaki Customizer en ligne en faveur ya documentation ya configuration ya plus extensive na ba builds personnalisés.
  • Abakisaki ba douzaines ya ba classes ya sika ya utilitaires mpo na ba paires communes ya valeur-propriété CSS mpe ba raccourcis ya espacement ya marge/padding.

Système ya grille

  • Bakendeki na flexbox.
    • Abakisaki lisungi mpo na flexbox na ba mixins ya grille mpe bakelasi oyo esili kolimbolama.
    • Lokola eteni ya flexbox, esangisi lisungi mpo na kelasi ya alignment vertical mpe horizontal.
  • Ba kombo ya kelasi ya grille oyo ebongwani mpe nivo ya sika ya grille.
    • Abakisaki niveau ya sika ya smgrille na se 768pxmpo na contrôle granulaire mingi. Tozali sikoyo na xs, sm, md, lg, mpe xl. Yango elingi pe koloba que niveau nionso esili kozala bumped up niveau moko (donc .col-md-6na v3 ezali sikoyo .col-lg-6na v4).
    • xsba classes ya grille ebongwani mpo na kosenga te infix elakisaka na bosikisiki mingi ete ebandi kosalela ba styles na min-width: 0mpe te motuya ya pixel oyo etiamaki. Na esika ya .col-xs-6, ezali sikoyo .col-6. Ba niveaux misusu nionso ya grille esengaka infix (ndakisa, sm).
  • Mikolo oyo ba taille ya grille, ba mixins, na ba variables.
    • Ba gouttières ya grille ezali sikoyo na carte ya Sass mpo okoka ko préciser ba largeurs spécifiques ya gouttières na point de rupture moko na moko.
    • Mixins ya grille mise à jour mpo na kosalela make-col-readymixin ya prép mpe a make-colmpo na kotya flexmpe max-widthmpo na dimensionnement ya colonne moko moko.
    • Ba changer ba points de rupture ya requête ya média ya système ya grille na ba largeurs ya conteneur pona ko comptabiliser niveau ya grille ya sika pe ko assurer ba colonnes ezala également divisible par 12na largeur max na bango.
    • Ba points de rupture ya grille na ba largeurs ya conteneur esimbami sikoyo na nzela ya ba cartes Sass ( $grid-breakpointsmpe $container-max-widths) na esika ya mwa ndambo ya ba variables ekeseni. Yango ezo remplacer ba @screen-*variables mobimba pe ezo permettre yo o personnaliser entièrement ba niveaux ya grille.
    • Mituna ya bapanzi sango mpe ebongwanaki. Na esika ya kozongela maloba na biso ya motuna ya media na motuya moko mbala nyonso, tozali sikawa na @include media-breakpoint-up/down/only. Sikawa, na esika ya kokoma @media (min-width: @screen-sm-min) { ... }, okoki kokoma @include media-breakpoint-up(sm) { ... }.

Ba composants

  • Ba panneaux oyo babwaki, ba bililingi ya mike, mpe mabulu mpo na eteni ya sika oyo esangisi makambo nyonso, bakarte .
  • Abwakaki fonte ya elembo ya Glyphicons. Soki ozali na mposa ya bilembo, mwa makambo oyo okoki kosala ezali:
  • Abwakaki plugin ya Affix jQuery.
    • Tozali kopesa toli ya kosalela position: stickyna esika na yango. Tala HTML5 Svp bokoti mpo na makambo ya sikisiki mpe makanisi ya sikisiki ya polyfill. Likanisi moko ezali ya kosalela @supportsmobeko moko mpo na kosalela yango (ndakisa, @supports (position: sticky) { ... }) .
    • Soki ozalaki kosalela Affix mpo na kosalela ba positionstyles ya kobakisa, oyo ezali te, ba polyfills ekoki kosunga te cas na yo ya kosalela. Moko ya banzela mpo na bosaleli ya ndenge wana ezali bibliotɛkɛ ya ScrollPos-Styler ya moto mosusu .
  • Abwakaki composante ya pager lokola ezalaki essentiellement un peu personnalisés boutons.
  • Refactored pene na ba composants nionso mpo na kosalela ba selecteurs ya classe mingi non-nested na esika ya ba selecteurs ya bana oyo eleki spécifique.

Na nzela ya eteni

Liste oyo ezali kolakisa mbongwana ya ntina na kotalela eteni kati na v3.xx mpe v4.0.0.

Bobandi lisusu

Ya sika na Bootstrap 4 ezali Reboot , feuille de style ya sika oyo etongami na Normalize na ba styles na biso moko ya réinitialisation oyo ezali na mwa makanisi. Baponi oyo ezali komonana na fisyé oyo esalela kaka ba éléments —ba kelasi ezali te awa. Yango e isoler ba styles na biso ya réinitialisation na ba styles ya composant na biso pona approche moko plus modulaire. Mwa ndambo ya ba réinitialisations ya ntina mingi oyo esangisi ezali box-sizing: border-boxmbongwana, kokende uta emna remba unité na ba éléments ebele, ba styles ya lien, mpe ba réinitialisations ebele ya ba éléments ya formulaire.

Typographie

  • Ba déplacé ba .text-utilitaires nionso na _utilities.scssfichier.
  • Ekiti .page-headerlokola ba styles na yango ekoki ko appliqué via ba utilitaires.
  • .dl-horizontalesili kobwakama. Na esika na yango, salelá .rowna <dl>mpe salelá bakelasi ya makonzí ya grille (to ba mixins) na yango <dt>mpe <dd>bana.
  • Ba blockquotes oyo esalemi lisusu, ko déplacer ba styles na yango depuis <blockquote>élément na classe moko, .blockquote. Abwakaki .blockquote-reversemodificateur mpo na ba utilitaires ya texte.
  • .list-inlinesikawa esɛngi ete bana na yango bátánga biloko oyo .list-inline-itembatye kelasi ya sika esalela bango.

Bililingi

  • Bapesaki nkombo mosusu .img-responsivena .img-fluid.
  • Ebongolamaki nkombo .img-roundedna yango.rounded
  • Ebongolamaki nkombo .img-circlena yango.rounded-circle

Bamesa

  • Pene na ba instances nionso ya >selecteur elongolami, elingi koloba ba tableaux encastrés eko hériter sikoyo automatiquement ba styles epayi ya ba parents na bango. Yango e simplifiaka mingi ba selecteurs na biso mpe ba personnalisations potentielles.
  • Babongoli nkombo .table-condensedna yango .table-smmpo na kozala na boyokani.
  • Babakisaki .table-inverseoption ya sika.
  • Babakisaki ba modificateurs ya motó ya tableau: .thead-defaultmpe .thead-inverse.
  • Ebongoli nkombo ya bakelasi ya contexte mpo na kozala na .table--prefixe. Yango wana .active, .success, .warning, .dangermpe .infona .table-active, .table-success, .table-warning, .table-dangermpe .table-info.

Baformilɛrɛ

  • Elemento oyo ezo déplacer ezo réinitialiser na _reboot.scssfichier.
  • Bapesaki nkombo mosusu .control-labelna .col-form-label.
  • Babongoli nkombo .input-lgmpe .input-smna .form-control-lgmpe .form-control-sm, na kolanda.
  • Abwakaki .form-group-*ba classes pona simplicité. Salelá .form-control-*bakelasi na esika na yango sikoyo.
  • Abwakaki .help-blockmpe atyaki yango na esika na yango na .form-textmpo na makomi ya lisalisi ya nivo ya bloc. Mpo na makomi ya lisalisi ya kati ya molongo mpe ba options mosusu ya kobongola, salela ba classes ya utilité lokola .text-muted.
  • Ekweyi .radio-inlinempe .checkbox-inline.
  • Consolidé .checkboxmpe .radiona kati .form-checkmpe ba .form-check-*classes ndenge na ndenge.
  • Ba formes horizontales ebongwani lisusu:
    • Abwakaki .form-horizontalesengelami ya kelasi.
    • .form-groupesalela lisusu te ba styles oyo euti na .rowvia mixin, yango wana .rowesengeli sikoyo mpo na ba layouts ya grille horizontale (ndakisa, <div class="form-group row">).
    • Abakisaki .col-form-labelkelasi ya sika na ba étiquettes ya centre verticalement na .form-controls.
    • Abakisaki ya sika .form-rowmpo na ba layouts ya formulaire compact na ba classes ya grille (swap ya yo .rowmpo na a .form-rowmpe kende).
  • Abakisaki lisungi ya ba formulaires personnalisés (mpo na ba cases ya kotiya elembo, ba radios, ba selects, mpe ba entrées ya fichier).
  • Ebongwani .has-error, .has-warning, mpe .has-successbakelasi na bondimi ya formulaire HTML5 na nzela ya CSS’s :invalidmpe :validba pseudo-classes.
  • Bapesaki nkombo mosusu .form-control-staticna .form-control-plaintext.

Ba boutons

  • Bapesaki nkombo mosusu .btn-defaultna .btn-secondary.
  • Abwakaki .btn-xskelasi mobimba lokola .btn-smezali proportionnellement mingi moke koleka v3 ya.
  • Ezaleli ya bouton ya état ya button.jsplugin ya jQuery elongolami. Yango esangisi $().button(string)mpe $().button('reset')mayele ya kosala. Tozali kopesa toli ya kosalela mwa moke ya JavaScript oyo esalemi na kolanda bamposa ya moto na esika na yango, oyo ekozala na litomba ya komitambwisa mpenza ndenge olingi.
    • Yeba ete makambo mosusu ya plugin (ba cases ya kotiya elembo ya ba boutons, ba radios ya bouton, ba boutons ya kobalusa moko) ebatelami na v4.
  • Bobongola ba boutons' [disabled]na :disabledndenge IE9+ esimbaka :disabled. Nzokande fieldset[disabled]ezali naino na ntina mpo ete ba fieldsets native désactivé ezali kaka na buggy na IE11 .

Groupe ya ba boutons

  • Ekoma lisusu composant na flexbox.
  • Elongolami .btn-group-justified. Lokola remplacement okoki kosalela <div class="btn-group d-flex" role="group"></div>lokola enveloppe zingazinga ya ba éléments na .w-100.
  • Abwakaki .btn-group-xskelasi mobimba bapesaki ye kolongolama ya .btn-xs.
  • Elongolami esika ya polele kati na bituluku ya ba boutons na ba barres ya bisaleli ya ba boutons; salelá ba utilitaires ya marge sikoyo.
  • Mikanda oyo ebongisami mpo na kosalela yango na biloko mosusu.
  • Ebongwani na ba sélecteurs parents na ba classes singulières mpo na ba composants nionso, ba modificateurs, etc.
  • Ba styles ya déroulant simplifié mpo na kotinda lisusu te na ba flèches oyo etali likolo to na se oyo ekangami na menu ya kokita.
  • Ba dropdowns ekoki kotongama na <div>s to <ul>s sikoyo.
  • Ba styles ya dropdown oyo etongami lisusu mpe marquage mpo na kopesa lisungi ya pete, oyo etongami na kati mpo na <a>mpe <button>biloko ya kokita oyo esalemi.
  • Bapesaki nkombo mosusu .dividerna .dropdown-divider.
  • Biloko oyo ezali kokita sikoyo esɛngaka .dropdown-item.
  • Ba toggles ya dropdown esengaka lisusu te explicit <span class="caret"></span>; oyo ezali sikoyo kopesama automatiquement na nzela ya CSS's ::afterna .dropdown-toggle.

Système ya grille

  • Babakisaki esika ya sika 576pxya kobuka grille lokola sm, elingi koloba ezali sikoyo na ba niveaux mitano ya total ( xs, sm, md, lg, mpe xl).
  • Bobongoli kombo ya ba classes ya modificateur ya grille oyo ezo répondre depuis .col-{breakpoint}-{modifier}-{size}na .{modifier}-{breakpoint}-{size}pona ba classes ya grille ya pete.
  • Ekitisaki ba classes ya modificateur ya push mpe pull mpo na ba classes ya sika oyo esalemi na flexbox order. Na ndakisa, na esika ya .col-8.push-4mpe .col-4.pull-8, olingaki kosalela .col-8.order-2mpe .col-4.order-1.
  • Abakisaki ba classes ya utilité flexbox pona système ya grille na ba composants.

Liste ya ba groupes

  • Ekoma lisusu composant na flexbox.
  • Ebongwani a.list-group-itemna kelasi ya polele, .list-group-item-action, mpo na lolenge ya kosala lien mpe ba versions ya bouton ya biloko ya etuluku ya liste.
  • Babakisaki .list-group-flushkelasi mpo na kosalela yango na bakarte.
  • Ekoma lisusu composant na flexbox.
  • Soki totali kokende na flexbox, alignment ya ba icônes ya démission na tête ezali probablement kobukana lokola tozali lisusu kosalela ba flotteurs te. Contenu flotté eyaka liboso, kasi na flexbox ezali lisusu bongo te. Mikolo oyo ba icônes na yo ya démission po eya sima ya ba titres modaux pona ko bongisa.
  • Option remote(oyo ekokaki kosalelama mpo na ko charger automatiquement mpe ko injecter contenus ya libanda na modal) mpe loaded.bs.modalévénement correspondant elongolamaki. Tosengi na esika na yango kosalela modèle ya côté client to cadre ya bokangami ya ba données, to kobenga jQuery.load yo moko.
  • Ekoma lisusu composant na flexbox.
  • Abwakaki pene na ba >sélecteurs nionso mpo na styling ya pete via ba classes non-nested.
  • Na esika ya ba sélecteurs spécifiques ya HTML lokola .nav > li > a, tosalelaka ba classes ekeseni mpo na .navs, .nav-items, mpe .nav-links. Yango ekomisaka HTML na yo flexible mingi tout en ememaka extensibilité oyo ebakisami.

Navbar ekomami lisusu mobimba na flexbox na lisungi ya kobongisama mpo na alignment, réponse, mpe personnalisation.

  • Ba comportements ya navbar ya réponse esalemi sikoyo na .navbarclasse na nzela ya oyo esengeli .navbar-expand-{breakpoint} esika oponi esika ya ko collapser navbar. Liboso oyo ezalaki modification Moins variable mpe esengelaki recompilage.
  • .navbar-defaultezali sikoyo .navbar-light, atako .navbar-darketikali ndenge moko. Moko ya yango esengeli na navbar mokomoko. Kasi, bakelasi yango ezali lisusu kotya background-colors te; au lieu ba affectaka essentiellement kaka color.
  • Navbars esengaka sikoyo déclaration ya fond ya ndenge moko boye. Pona na kati ya ba utilitaires na biso ya fond ( .bg-*) to tia oyo ya yo moko na ba classes ya lumière/inverse oyo ezali likolo pona personnalisation ya fou .
  • Soki bapesi ba styles ya flexbox, ba navbars ekoki sikoyo kosalela ba utilitaires ya flexbox pona ba options ya alignment ya pete.
  • .navbar-toggleezali sikoyo .navbar-togglermpe ezali na ba styles différents mpe na marquage ya kati (pas plus trois <span>s).
  • Abwakaki .navbar-formkelasi mobimba. Ezali lisusu na ntina te; na esika na yango, salelá kaka .form-inlinempe salelá ba utilitaires ya marge soki esengeli.
  • Navbars ezali lisusu na kati te margin-bottomto border-radiusna ndenge ya libela. Salelá ba utilités soki esengeli.
  • Bandakisa nyonso oyo ezali na ba navbars ebongwani mpo na kotya bilembo ya sika.

Kosala ba paginations

  • Ekoma lisusu composant na flexbox.
  • Ba kelasi ya polele ( .page-item, .page-link) esengeli sikawa na bakitani ya .paginations
  • Abwakaki .pagercomposant mobimba lokola ezalaki mwa mingi koleka ba boutons ya plan personnalisé.
  • Kelasi ya polele, .breadcrumb-item, esengeli sikawa na bakitani ya .breadcrumbs

Ba étiquettes na ba badges

  • Consolidé .labelmpe .badgeko désambiguer na <label>élément mpe ko simplifier ba composants liés.
  • Ebakisami .badge-pilllokola modificateur mpo na arrondi “pilili” kotala.
  • Ba badges ezo flotter lisusu automatiquement te na ba groupes ya liste na ba composants misusu. Ba classes ya utilité esengeli sikoyo pona yango.
  • .badge-defaultelongolami mpe .badge-secondaryebakisami mpo na kokokana na bakelasi ya modificateur ya composant oyo esalelami esika mosusu.

Ba panneaux, ba miniatures, na ba puits

Ekitisami mobimba mpo na eteni ya sika ya karte.

Ba panneaux

  • .panelto .card, oyo etongami sikoyo na flexbox.
  • .panel-defaultelongolami mpe eloko mosusu ekozongisama na esika na yango te.
  • .panel-groupelongolami mpe eloko mosusu ekozongisama na esika na yango te. .card-groupezali remplaçant te, ezali ndenge mosusu.
  • .panel-headingna.card-header
  • .panel-titlempo na .card-title. Na kotalela lolenge oyo olingi kotala, okoki mpe kosalela biloko ya motó ya likambo to bakelasi (ndakisa <h3>, .h3) to biloko to bakelasi ya moindo makasi (ndakisa <strong>, <b>, .font-weight-bold). Simbá ete .card-title, atako epesameli nkombo yango ndenge moko, ebimisaka lolenge ekeseni na oyo ya .panel-title.
  • .panel-bodyna.card-body
  • .panel-footerna.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, mpe .panel-dangeresili kobwakama mpo na .bg-, .text-, mpe .borderba utilitaires oyo esalemi uta na $theme-colorskarte na biso ya Sass.

Kokende liboso

  • .progress-bar-*Ba remplacé ba classes contextuelles na ba .bg-*utilitaires. Na ndakisa, class="progress-bar progress-bar-danger"ekómaka class="progress-bar bg-danger".
  • Ebongwani .activempo na ba barres ya progrès animation na .progress-bar-animated.
  • Abongisaki lisusu eteni mobimba mpo na kosala ete básala yango malamu mpe bátya yango na lolenge ya pɛtɛɛ. Tozali na ba styles moke mpo na yo koboya, bilembo ya sika, mpe bilembo ya sika.
  • CSS nionso esili kozala un-nested mpe ebongwani kombo, kosala ete kelasi moko na moko ezala na liboso ya .carousel-.
    • Mpo na biloko ya carousel, .next, .prev, .left, mpe .rightezali sikawa .carousel-item-next, .carousel-item-prev, .carousel-item-left, mpe .carousel-item-right.
    • .itemezali mpe sikawa .carousel-item.
    • Mpo na ba contrôles prév/next, .carousel-control.rightmpe .carousel-control.leftezali sikoyo .carousel-control-nextmpe .carousel-control-prev, elingi koloba ete esɛngaka lisusu te kelasi ya base ya sikisiki.
  • Elongolaki ba styles nionso ya réponse, ko différer na ba utilitaires (ndakisa, kolakisa ba captions na ba viewports mosusu) mpe ba styles personnalisés soki esengeli.
  • Elongolami ba overrides ya bilili mpo na bilili na biloko ya carrousel, kozongisa sima na ba utilitaires.
  • Tweaked ndakisa ya Carousel mpo na kokɔtisa marquage ya sika mpe ba styles.

Bamesa

  • Elongolami lisungi mpo na ba tableaux encastrés na style. Ba styles nionso ya tableau ezali sikoyo hérité na v4 pona ba sélecteurs ya pete.
  • Abakisaki variante ya tableau inverse.

Ba utilités

  • Elakiseli, ebombami, mpe makambo mosusu:
    • Esalaki ete ba utilitaires ya kolakisa ezala na eyano (ndakisa, .d-nonempe d-{sm,md,lg,xl}-none).
    • Abwakaki mingi ya .hidden-*ba utilitaires mpo na ba utilitaires ya sika ya kolakisa . Na ndakisa, na esika ya .hidden-sm-up, salelá .d-sm-none. Bobongoli nkombo ya ba .hidden-printutilitaires mpo na kosalela scheme ya kopesa nkombo ya ba utilitaires ya kolakisa. Infos mosusu na se ya eteni ya ba utilitaires réponses ya page oyo.
    • Abakisaki .float-{sm,md,lg,xl}-{left,right,none}ba classes mpo na ba flotteurs responsifs mpe alongolami .pull-leftmpe .pull-rightlokola bazali redundant na .float-leftmpe .float-right.
  • Lolenge:
    • Abakisaki ba variations responsives na ba classes na biso ya alignment ya texte .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment mpe esika oyo ezali na kati:
  • Clearfix ebongwani mpo na kotika lisungi mpo na ba versions ya kala ya navigateur.

Mixins ya liboso ya motɛkisi

Ba mixins ya prefixe ya vendeur ya Bootstrap 3 , oyo ezalaki déprecated na v3.2.0, elongolami na Bootstrap 4. Lokola tosalelaka Autoprefixer , ezali lisusu na ntina te.

Elongolami ba mixins oyo elandi: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, , backface-visibility, box-sizing, , content-columns, hyphens, opacity, , perspective, perspective-origin, rotate, , rotateX, rotateY, , scale, scaleX, scaleY, , skew, transform-origin, , transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Mikanda ya mikanda

Mikanda na biso ezwaki bomatisi na kati ya etanda lokola. Tala na nse na nse:

  • Tozali kaka kosalela Jekyll, kasi tozali na ba plugins na kati ya mix:
    • bugify.rbesalelamaka mpo na kotánga malamu makambo oyo bakomi na lokasa na biso ya babugs ya navigateur .
    • example.rbezali fourchette personnalisée ya highlight.rbplugin ya défaut, oyo epesaka nzela na traitement ya exemple-code ya pete.
    • callout.rbezali fourchette personnalisée ya ndenge moko ya yango, kasi ebongisami mpo na ba callouts na biso ya docs spéciaux.
    • jekyll-toc esalelamaka mpo na kobimisa tableau na biso ya makambo.
  • Makambo nyonso ya docs ekomami lisusu na Markdown (na esika ya HTML) mpo na kobongisa yango na pɛtɛɛ nyonso.
  • Ba pages ebongisami lisusu mpo na makambo ya pete mpe hiérarchie oyo ekoki kopusana penepene.
  • Tolongwaki na CSS ya ordinaire mpe tokendeki na SCSS mpo na kozwa matomba nyonso na ba variables ya Bootstrap, ba mixins, mpe mingi mosusu.

Ba utilités oyo ezo répondre

Ba @screen-variables nionso elongolami na v4.0.0. Salelá ba mixins media-breakpoint-up(), media-breakpoint-down(), to Sass to karte ya Sass na esika na yango.media-breakpoint-only()$grid-breakpoints

Ba classes na biso ya utilité responsive elongolami mingi mingi en faveur ya ba displayutilités explicites.

  • Ba classes .hiddenna .showelongolami mpo ezalaki na conflit na jQuery's $(...).hide()na ba $(...).show()méthodes. Na esika ya kosala bongo, meká kobongola [hidden]attribut to salelá ba styles ya kati lokola style="display: none;"mpe style="display: block;".
  • Ba .hidden-classes nionso elongolami, longola kaka ba utilitaires ya impression oyo ebongwani kombo.
    • Elongolami na v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • Elongolami na v4 alphas:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Ba utilitaires ya impression ebandaka lisusu na .hidden-to te .visible-, kasi na .d-print-.
    • Ba kombo ya kala: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Ba kelasi ya sika: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Na esika ya kosalela .visible-*bakelasi ya polele, ozali kosala ete eloko moko emonanaka na kobombaka yango kaka te na bonene ya écran wana. Okoki kosangisa .d-*-nonekelasi moko na .d-*-blockkelasi moko mpo na kolakisa eleman kaka na intervalle oyo epesami ya bonene ya écran (ndakisa .d-none.d-md-block.d-xl-noneelakisaka eleman kaka na ba dispositifs ya moyenne mpe ya minene).

Yeba ete mbongwana na ba points de rupture ya grille na v4 elakisi ete ekosenga okende point de rupture moko ya monene mpo na kozua ba résultats ya ndenge moko. Ba classes ya sika ya utilitaire responsive emekaka te ko accueillir ba cas oyo emonanaka mingi te esika visibilité ya élément moko ekoki ko exprimer te lokola gamme moko contigue ya ba taille ya port de vue; okozala na esika na yango mposa ya kosalela CSS oyo esalemi na kolanda bamposa ya moto na makambo ya ndenge wana.