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
, mpenone
. Stable v4 ebakisamiflex
,inline-flex
,table
,table-row
, mpetable-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-transition
variable 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_modules
dossier, 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 yadisabled
attribut (avant esengelaki classe parent) mpe ko soutenir malamu validation ya formulaire na biso.Lokola eteni ya oyo, tobongoli CSS mpo na kotambwisa
background-image
s ebele na ba cases ya kotiya elembo ya formulaire personnalisé mpe ba radios. Liboso, eleman oyo elongolami sikoyo.custom-control-indicator
ezalaki 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::before
mpo na kotondisa mpe gradient mpe.custom-control-label::after
esimbaka 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, tosalelakadata
attribut kaka pona ba comportements ya JS pe to se fier na.btn-group-toggle
classe ya sika pona styling. -
Elongolami
.col-form-legend
na faveur ya un peu amélioré.col-form-label
. Na ndenge oyo.col-form-label-sm
mpe.col-form-label-lg
ekoki kosalelama na<legend>
ba éléments na pete. -
Ba entrées ya fichier personnalisé ezuaki changement na
$custom-file-text
variable na bango ya Sass. Ezali lisusu te karte ya Sass oyo ekangami mpe sikawa ezali kaka kopesa nguya na molongo mokoBrowse
—bouton lokola yango ezali sikawa bobele moko ya pseudo-élément oyo esalemi uta na Sass na biso. MokandaChoose file
yango 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-addon
mpe.input-group-btn
mpo na bakelasi mibale ya sika,.input-group-prepend
mpe.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-group
et 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-color
variable mpe bosaleli na yango na.badge
. Tosalelaka fonction ya contraste ya couleur pona kopona acolor
basé nabackground-color
, yango wana variable ezali na tina te. - Renommé
grayscale()
fonction togray()
mpo na koboya kobuka matata nagrayscale
filtre natif ya CSS. - Bapesaki nkombo mosusu
.table-inverse
,.thead-inverse
, mpe.thead-default
na.*-dark
mpe.*-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-responsive
ozalaki kosalela ezali mingi lokola.table-responsive-md
. Okoki sikoyo kosalela.table-responsive
to.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-label
kelasi oyo basalelaka te. Soki osali kosala usage ya classe oyo, ezalaki duplicate ya.col-form-label
classe oyo verticalement centré a<label>
na yango entrée associée na ba layouts ya formulaire horizontale. - Ebongoli the
color-yiq
uta na mixin oyo ezalaki nacolor
propriété na fonction oyo ezongisaka valeur, kopesa yo nzela ya kosalela yango mpo na propriété CSS nionso. Na ndakisa, na esika yacolor-yiq(#000)
, olingaki kokomacolor: color-yiq(#000);
.
Makambo ya ntina
- Akotisi
pointer-events
bosaleli ya sika na ba modals. Ya libanda.modal-dialog
elekaka na makambo napointer-events: none
mpo na manipulation ya ba clics personnalisés (kosala ete ezala possible ya koyoka kaka na.modal-backdrop
mpo na ba clics nionso), mpe na nsima ezo contrer yango mpo na oyo ya solo.modal-content
napointer-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
px
narem
lokola 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
14px
kino16px
. - Ebongisaki lisusu ba niveaux ya grille mpo na kobakisa option ya mitano (ko adresser ba appareils ya mike na
576px
mpe na se) mpe elongolaki-xs
infix 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.json
pona 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
sm
grille na se768px
mpo na contrôle granulaire mingi. Tozali sikoyo naxs
,sm
,md
,lg
, mpexl
. Yango elingi pe koloba que niveau nionso esili kozala bumped up niveau moko (donc.col-md-6
na v3 ezali sikoyo.col-lg-6
na v4). xs
ba classes ya grille ebongwani mpo na kosenga te infix elakisaka na bosikisiki mingi ete ebandi kosalela ba styles namin-width: 0
mpe 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
).
- Abakisaki niveau ya sika ya
- 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-ready
mixin ya prép mpe amake-col
mpo na kotyaflex
mpemax-width
mpo 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
12
na largeur max na bango. - Ba points de rupture ya grille na ba largeurs ya conteneur esimbami sikoyo na nzela ya ba cartes Sass (
$grid-breakpoints
mpe$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:
- version ya likolo ya Glyphicons
- Ba octicons
- Font Ezali Somo
- Tala lokasa Bobakisi mpo na liste ya banzela mosusu. Ozali na makanisi mosusu? Svp bofungola numéro moko to PR.
- Abwakaki plugin ya Affix jQuery.
- Tozali kopesa toli ya kosalela
position: sticky
na esika na yango. Tala HTML5 Svp bokoti mpo na makambo ya sikisiki mpe makanisi ya sikisiki ya polyfill. Likanisi moko ezali ya kosalela@supports
mobeko moko mpo na kosalela yango (ndakisa,@supports (position: sticky) { ... }
) . - Soki ozalaki kosalela Affix mpo na kosalela ba
position
styles 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 .
- Tozali kopesa toli ya kosalela
- 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-box
mbongwana, kokende uta em
na rem
ba 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.scss
fichier. - Ekiti
.page-header
lokola ba styles na yango ekoki ko appliqué via ba utilitaires. .dl-horizontal
esili kobwakama. Na esika na yango, salelá.row
na<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-reverse
modificateur mpo na ba utilitaires ya texte. .list-inline
sikawa esɛngi ete bana na yango bátánga biloko oyo.list-inline-item
batye kelasi ya sika esalela bango.
Bililingi
- Bapesaki nkombo mosusu
.img-responsive
na.img-fluid
. - Ebongolamaki nkombo
.img-rounded
na yango.rounded
- Ebongolamaki nkombo
.img-circle
na 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-condensed
na yango.table-sm
mpo na kozala na boyokani. - Babakisaki
.table-inverse
option ya sika. - Babakisaki ba modificateurs ya motó ya tableau:
.thead-default
mpe.thead-inverse
. - Ebongoli nkombo ya bakelasi ya contexte mpo na kozala na
.table-
-prefixe. Yango wana.active
,.success
,.warning
,.danger
mpe.info
na.table-active
,.table-success
,.table-warning
,.table-danger
mpe.table-info
.
Baformilɛrɛ
- Elemento oyo ezo déplacer ezo réinitialiser na
_reboot.scss
fichier. - Bapesaki nkombo mosusu
.control-label
na.col-form-label
. - Babongoli nkombo
.input-lg
mpe.input-sm
na.form-control-lg
mpe.form-control-sm
, na kolanda. - Abwakaki
.form-group-*
ba classes pona simplicité. Salelá.form-control-*
bakelasi na esika na yango sikoyo. - Abwakaki
.help-block
mpe atyaki yango na esika na yango na.form-text
mpo 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-inline
mpe.checkbox-inline
. - Consolidé
.checkbox
mpe.radio
na kati.form-check
mpe ba.form-check-*
classes ndenge na ndenge. - Ba formes horizontales ebongwani lisusu:
- Abwakaki
.form-horizontal
esengelami ya kelasi. .form-group
esalela lisusu te ba styles oyo euti na.row
via mixin, yango wana.row
esengeli sikoyo mpo na ba layouts ya grille horizontale (ndakisa,<div class="form-group row">
).- Abakisaki
.col-form-label
kelasi ya sika na ba étiquettes ya centre verticalement na.form-control
s. - Abakisaki ya sika
.form-row
mpo na ba layouts ya formulaire compact na ba classes ya grille (swap ya yo.row
mpo na a.form-row
mpe kende).
- Abwakaki
- 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-success
bakelasi na bondimi ya formulaire HTML5 na nzela ya CSS’s:invalid
mpe:valid
ba pseudo-classes. - Bapesaki nkombo mosusu
.form-control-static
na.form-control-plaintext
.
Ba boutons
- Bapesaki nkombo mosusu
.btn-default
na.btn-secondary
. - Abwakaki
.btn-xs
kelasi mobimba lokola.btn-sm
ezali proportionnellement mingi moke koleka v3 ya. - Ezaleli ya bouton ya état ya
button.js
plugin 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:disabled
ndenge IE9+ esimbaka:disabled
. Nzokandefieldset[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-xs
kelasi 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.
Ba dropdowns ya kokita
- 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
.divider
na.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::after
na.dropdown-toggle
.
Système ya grille
- Babakisaki esika ya sika
576px
ya kobuka grille lokolasm
, elingi koloba ezali sikoyo na ba niveaux mitano ya total (xs
,sm
,md
,lg
, mpexl
). - 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-4
mpe.col-4.pull-8
, olingaki kosalela.col-8.order-2
mpe.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-item
na 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-flush
kelasi mpo na kosalela yango na bakarte.
Modal
- 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) mpeloaded.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.
Navs
- 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.nav
s,.nav-item
s, mpe.nav-link
s. Yango ekomisaka HTML na yo flexible mingi tout en ememaka extensibilité oyo ebakisami.
Navbar
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
.navbar
classe 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-default
ezali sikoyo.navbar-light
, atako.navbar-dark
etikali ndenge moko. Moko ya yango esengeli na navbar mokomoko. Kasi, bakelasi yango ezali lisusu kotyabackground-color
s te; au lieu ba affectaka essentiellement kakacolor
.- 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-toggle
ezali sikoyo.navbar-toggler
mpe ezali na ba styles différents mpe na marquage ya kati (pas plus trois<span>
s).- Abwakaki
.navbar-form
kelasi mobimba. Ezali lisusu na ntina te; na esika na yango, salelá kaka.form-inline
mpe salelá ba utilitaires ya marge soki esengeli. - Navbars ezali lisusu na kati te
margin-bottom
toborder-radius
na 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.pagination
s - Abwakaki
.pager
composant mobimba lokola ezalaki mwa mingi koleka ba boutons ya plan personnalisé.
Biloko ya kosala mampa
- Kelasi ya polele,
.breadcrumb-item
, esengeli sikawa na bakitani ya.breadcrumb
s
Ba étiquettes na ba badges
- Consolidé
.label
mpe.badge
ko désambiguer na<label>
élément mpe ko simplifier ba composants liés. - Ebakisami
.badge-pill
lokola 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-default
elongolami mpe.badge-secondary
ebakisami 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
.panel
to.card
, oyo etongami sikoyo na flexbox..panel-default
elongolami mpe eloko mosusu ekozongisama na esika na yango te..panel-group
elongolami mpe eloko mosusu ekozongisama na esika na yango te..card-group
ezali remplaçant te, ezali ndenge mosusu..panel-heading
na.card-header
.panel-title
mpo 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-body
na.card-body
.panel-footer
na.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, mpe.panel-danger
esili kobwakama mpo na.bg-
,.text-
, mpe.border
ba utilitaires oyo esalemi uta na$theme-colors
karte 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ómakaclass="progress-bar bg-danger"
.- Ebongwani
.active
mpo na ba barres ya progrès animation na.progress-bar-animated
.
Carrousel oyo ezali
- 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.right
ezali sikawa.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, mpe.carousel-item-right
. .item
ezali mpe sikawa.carousel-item
.- Mpo na ba contrôles prév/next,
.carousel-control.right
mpe.carousel-control.left
ezali sikoyo.carousel-control-next
mpe.carousel-control-prev
, elingi koloba ete esɛngaka lisusu te kelasi ya base ya sikisiki.
- Mpo na biloko ya carousel,
- 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-none
mped-{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-print
utilitaires 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-left
mpe.pull-right
lokola bazali redundant na.float-left
mpe.float-right
.
- Esalaki ete ba utilitaires ya kolakisa ezala na eyano (ndakisa,
- Lolenge:
- Abakisaki ba variations responsives na ba classes na biso ya alignment ya texte
.text-{sm,md,lg,xl}-{left,center,right}
.
- Abakisaki ba variations responsives na ba classes na biso ya alignment ya texte
- Alignment mpe esika oyo ezali na kati:
- Abakisaki ba utilitaires ya sika ya marge réponse mpe ya remplissage mpo na ba côtés nionso, bakisa ba stenographies verticales mpe horizontales.
- Babakisaki boatload ya ba utilités flexbox .
- Babwakaki mpo na kelasi
.center-block
ya sika ..mx-auto
- 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.rb
esalelamaka mpo na kotánga malamu makambo oyo bakomi na lokasa na biso ya babugs ya navigateur .example.rb
ezali fourchette personnalisée yahighlight.rb
plugin ya défaut, oyo epesaka nzela na traitement ya exemple-code ya pete.callout.rb
ezali 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 display
utilités explicites.
- Ba classes
.hidden
na.show
elongolami 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 lokolastyle="display: none;"
mpestyle="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
- Elongolami na v3:
- 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
- Ba kombo ya kala:
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-*-none
kelasi moko na .d-*-block
kelasi moko mpo na kolakisa eleman kaka na intervalle oyo epesami ya bonene ya écran (ndakisa .d-none.d-md-block.d-xl-none
elakisaka 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.