Migrado al v4
Bootstrap 4 estas grava reverko de la tuta projekto. La plej rimarkindaj ŝanĝoj estas resumitaj malsupre, sekvataj de pli specifaj ŝanĝoj al koncernaj komponantoj.
Stabilaj ŝanĝoj
Moviĝante de Beta 3 al nia stabila v4.x eldono, estas neniuj rompiĝaj ŝanĝoj, sed estas kelkaj rimarkindaj ŝanĝoj.
Presado
-
Riparis rompitajn presajn ilojn. Antaŭe, uzi
.d-print-*
klason neatendite superregus ajnan alian.d-*
klason. Nun ili kongruas kun niaj aliaj montraj iloj kaj validas nur por tiu amaskomunikilaro (@media print
). -
Pligrandigitaj disponeblaj presitaj ekranaj utilecoj por kongrui kun aliaj utilecoj. Beta 3 kaj pli malnova nur havis
block
,inline-block
,inline
, kajnone
. Stabila v4 aldonisflex
,inline-flex
,table
,table-row
, kajtable-cell
. -
Riparita presaĵantaŭprezento tra retumiloj kun novaj presaj stiloj kiuj specifas
@page
size
.
Beta 3 ŝanĝoj
Dum Beta 2 vidis la plej grandan parton de niaj rompiĝaj ŝanĝoj dum la beta-fazo, sed ni ankoraŭ havas kelkajn, kiuj devis esti traktitaj en la Beta 3-eldono. Ĉi tiuj ŝanĝoj validas se vi ĝisdatigas al Beta 3 de Beta 2 aŭ ajna pli malnova versio de Bootstrap.
Diversaj
- Forigis la neuzatan
$thumbnail-transition
variablon. Ni ne estis transirantaj ion, do ĝi estis nur ekstra kodo. - La pako npm ne plu inkluzivas iujn ajn dosierojn krom niaj fontaj kaj dist dosieroj; se vi fidis ilin kaj rulis niajn skriptojn per la
node_modules
dosierujo, vi devus adapti vian laborfluon.
Formoj
-
Reskribis kaj kutimajn kaj defaŭltajn markobutonojn kaj radiojn. Nun ambaŭ havas kongruan HTML-strukturon (eksteran
<div>
kun gefrato<input>
kaj<label>
) kaj la samajn aranĝajn stilojn (staplitajn defaŭlte, enlinie kun modifiklaso). Ĉi tio permesas al ni stiligi la etikedon surbaze de la stato de la enigo, simpligante subtenon por ladisabled
atributo (antaŭe postulante gepatran klason) kaj pli bone subtenante nian formularvalidigon.Kiel parto de ĉi tio, ni ŝanĝis la CSS por administri plurajn
background-image
s sur kutimaj markobutonoj kaj radioj. Antaŭe, la nun forigita.custom-control-indicator
elemento havis la fonkoloron, gradienton kaj SVG-ikonon. Agordi la fonan gradienton signifis anstataŭigi ĉiujn tiujn ĉiufoje kiam vi bezonis ŝanĝi nur unu. Nun, ni havas.custom-control-label::before
por la plenigo kaj gradiento kaj.custom-control-label::after
pritraktas la ikonon.Por fari kutiman kontrolon enlinia, aldonu
.custom-control-inline
. -
Ĝisdatigita elektilo por enig-bazitaj butongrupoj. Anstataŭ
[data-toggle="buttons"] { }
por stilo kaj konduto, ni uzas ladata
atributon nur por JS-kondutoj kaj dependas de nova.btn-group-toggle
klaso por stilado. -
Forigita
.col-form-legend
al favoro de iomete plibonigita.col-form-label
. Tiel.col-form-label-sm
kaj.col-form-label-lg
povas esti uzata sur<legend>
elementoj kun facileco. -
Propraj dosieraj enigaĵoj ricevis ŝanĝon al sia
$custom-file-text
Sass-variablo. Ĝi ne plu estas nestita Sass-mapo kaj nun nur funkciigas unu ŝnuron—laBrowse
butono ĉar tio nun estas la nura pseŭdo-elemento generita de nia Sass. LaChoose file
teksto nun devenas el la.custom-file-label
.
Eniggrupoj
-
Eniga grupaldonaĵoj nun estas specifaj por sia lokigo rilate al enigo. Ni falis
.input-group-addon
kaj.input-group-btn
por du novaj klasoj,.input-group-prepend
kaj.input-group-append
. Vi devas eksplicite uzi aldonaĵon aŭ aldonaĵon nun, simpligante grandan parton de nia CSS. Ene de aldono aŭ antaŭmeto, metu viajn butonojn kiel ili ekzistus aliloke, sed envolvu tekston en.input-group-text
. -
Validaj stiloj nun estas subtenataj, same kiel pluraj enigaĵoj (kvankam vi povas validigi nur unu enigaĵon por grupo).
-
Dimensigaj klasoj devas esti sur la gepatro
.input-group
kaj ne la individuaj formaelementoj.
Beta 2 ŝanĝoj
Dum en beta, ni celas havi neniujn rompiĝajn ŝanĝojn. Tamen, aferoj ne ĉiam iras kiel planite. Malsupre estas la rompiĝaj ŝanĝoj, kiujn oni devas konsideri kiam oni transiras de Beta 1 al Beta 2.
Rompante
- Forigita
$badge-color
variablo kaj ĝia uzado sur.badge
. Ni uzas kolorkontrastan funkcion por elekticolor
surbaze de labackground-color
, do la variablo estas nenecesa. - Renomita
grayscale()
funkcio porgray()
eviti rompi konflikton kun la CSS-denaskagrayscale
filtrilo. - Alinomite
.table-inverse
,.thead-inverse
, kaj.thead-default
al.*-dark
kaj.*-light
, kongruante kun niaj kolorskemoj uzataj aliloke. - Respondema tabeloj nun generas klasojn por ĉiu krada rompopunkto. Ĉi tio rompas de Beta 1 ĉar la
.table-responsive
vi uzis pli similas al.table-responsive-md
. Vi nun povas uzi.table-responsive
aŭ.table-responsive-{sm,md,lg,xl}
laŭbezone. - Forigita Bower-subteno ĉar la pakadministranto estis malrekomendita por alternativoj (ekz., Yarn aŭ npm). Vidu bower/bower#2298 por detaloj.
- Bootstrap ankoraŭ postulas jQuery 1.9.1 aŭ pli altan, sed vi konsilas uzi version 3.x ĉar la subtenataj retumiloj de v3.x estas tiuj, kiujn Bootstrap subtenas plus v3.x havas iujn sekurecajn korektojn.
- Forigis la neuzatan
.form-control-label
klason. Se vi ja uzis ĉi tiun klason, ĝi estis duplikato de la.col-form-label
klaso, kiu vertikale centris a<label>
kun ĝia rilata enigo en horizontalaj formaj aranĝoj. - Ŝanĝis la
color-yiq
de miksaĵo kiu inkludis lacolor
posedaĵon al funkcio kiu resendas valoron, permesante al vi uzi ĝin por iu ajn CSS-posedaĵo. Ekzemple, anstataŭcolor-yiq(#000)
, vi skribuscolor: color-yiq(#000);
.
Elstaraĵoj
- Enkondukis novan
pointer-events
uzadon pri modaloj. La ekstera.modal-dialog
trapasas eventojn kunpointer-events: none
por kutima klakotraktado (ebligante nur aŭskulti sur la.modal-backdrop
por iuj klakoj), kaj tiam kontraŭbatalas ĝin por la reala.modal-content
perpointer-events: auto
.
Resumo
Jen la grandaj biletaĵoj, pri kiuj vi volos konscii kiam vi moviĝos de v3 al v4.
Subteno de retumilo
- Forigita subteno de IE8, IE9 kaj iOS 6. v4 nun estas nur IE10+ kaj iOS 7+. Por retejoj kiuj bezonas iun el tiuj, uzu v3.
- Aldonita oficiala subteno por la Retumilo kaj WebView de Android v5.0 Lollipop. Pli fruaj versioj de la Android-Retumilo kaj WebView restas nur neoficiale subtenataj.
Tutmondaj ŝanĝoj
- Flexbox estas ebligita defaŭlte. Ĝenerale ĉi tio signifas malproksimiĝon de flosiloj kaj pli trans niaj komponantoj.
- Ŝanĝite de Less al Sass por niaj fontaj CSS-dosieroj.
- Ŝanĝite de
px
alrem
kiel nia ĉefa CSS-unuo, kvankam pikseloj daŭre estas uzataj por amaskomunikilaraj demandoj kaj kradkonduto ĉar aparataj vidfenestroj ne estas tuŝitaj de tipgrandeco. - Tutmonda tiparo-grandeco pliiĝis de
14px
al16px
. - Reorganizis kradnivelojn por aldoni kvinan opcion (traktante pli malgrandajn aparatojn ĉe
576px
kaj malsupre) kaj forigis la-xs
infikson de tiuj klasoj. Ekzemplo:.col-6.col-sm-4.col-md-3
. - Anstataŭigis la apartan laŭvolan temon per agordeblaj opcioj per SCSS-variabloj (ekz,
$enable-gradients: true
). - Konstrua sistemo reviziita por uzi serion de npm-skriptoj anstataŭ Grunt. Vidu
package.json
por ĉiuj skriptoj, aŭ nian projekton readme por lokaj evoluaj bezonoj. - Ne-respondema uzado de Bootstrap ne plu estas subtenata.
- Forigis la interretan personigilon en favoro de pli ampleksa agorda dokumentaro kaj personecigitaj konstruoj.
- Aldonitaj dekduoj da novaj utilaj klasoj por komunaj CSS-posedaĵ-valoraj paroj kaj marĝenaj/plenigantaj interspacaj ŝparvojoj.
Kradsistemo
- Movita al flekskesto.
- Aldonita subteno por flexbox en la kradaj miksaĵoj kaj antaŭdifinitaj klasoj.
- Kiel parto de flexbox, inkludis subtenon por vertikalaj kaj horizontalaj vicigklasoj.
- Ĝisdatigitaj kradaj klasnomoj kaj nova kradnivelo.
- Aldonis novan
sm
kradan nivelon sube768px
por pli granulara kontrolo. Ni nun havasxs
,sm
,md
,lg
, kajxl
. Ĉi tio ankaŭ signifas, ke ĉiu nivelo estis plialtigita je unu nivelo (do.col-md-6
en v3 nun estas.col-lg-6
en v4). xs
kradklasoj estis modifitaj por ne postuli la infikson pli precize reprezenti ke ili komencas apliki stilojn jemin-width: 0
kaj ne fiksita piksela valoro. Anstataŭ.col-xs-6
, ĝi estas nun.col-6
. Ĉiuj aliaj kradniveloj postulas la infikson (ekz,sm
).
- Aldonis novan
- Ĝisdatigitaj kradaj grandecoj, miksaĵoj kaj variabloj.
- Kradkanaletoj nun havas Sass-mapon por ke vi povas specifi specifajn defluillarĝojn ĉe ĉiu rompopunkto.
- Ĝisdatigita kradmiksins por utiligi
make-col-ready
preparan miksaĵon kajmake-col
agordi laflex
kajmax-width
por individua kolumna grandeco. - Ŝanĝis kradsistemojn amaskomunikilajn pridemandpunktojn kaj ujlarĝojn por kalkuli novan kradnivelon kaj certigi ke kolumnoj estas egale divideblaj
12
je sia maksimuma larĝo. - Kradromppunktoj kaj ujlarĝoj nun estas pritraktitaj per Sass-mapoj (
$grid-breakpoints
kaj$container-max-widths
) anstataŭe de manpleno da apartaj variabloj. Ĉi tiuj tute anstataŭigas la@screen-*
variablojn kaj permesas al vi plene agordi la kradnivelojn. - Amaskomunikilaraj demandoj ankaŭ ŝanĝiĝis. Anstataŭ ripeti niajn amaskomunikilajn demandajn deklarojn kun la sama valoro ĉiufoje, ni nun havas
@include media-breakpoint-up/down/only
. Nun, anstataŭ skribi@media (min-width: @screen-sm-min) { ... }
, vi povas skribi@include media-breakpoint-up(sm) { ... }
.
Komponentoj
- Faligitaj paneloj, bildetoj kaj putoj por nova tute ampleksa komponanto, kartoj .
- Forigis la Glyphicons ikonotiparo. Se vi bezonas ikonojn, kelkaj opcioj estas:
- la kontraŭflua versio de Glyphicons
- Oktikonoj
- Tiparo Awesome
- Vidu la Etendu paĝon por listo de alternativoj. Ĉu vi havas pliajn sugestojn? Bonvolu malfermi temon aŭ PR.
- Forigis la kromprogramon Affix jQuery.
- Ni rekomendas uzi
position: sticky
anstataŭe. Vidu la HTML5 Bonvolu eniron por detaloj kaj specifaj polyfill-rekomendoj. Unu sugesto estas uzi@supports
regulon por efektivigi ĝin (ekz.,@supports (position: sticky) { ... }
) - Se vi uzus Afikson por apliki pliajn, ne-
position
stilojn, la plurplenigaĵoj eble ne subtenas vian uzkazon. Unu opcio por tiaj uzoj estas la triaparta ScrollPos-Styler- biblioteko.
- Ni rekomendas uzi
- Faligis la paŝigan komponanton ĉar ĝi estis esence iomete personigitaj butonoj.
- Refaktoris preskaŭ ĉiujn komponentojn por uzi pli nenestitajn klaselegilojn anstataŭe de trospecifaj infanelektiloj.
Laŭ komponanto
Ĉi tiu listo elstarigas ŝlosilajn ŝanĝojn laŭ komponantoj inter v3.xx kaj v4.0.0.
Rekomencu
Nova al Bootstrap 4 estas la Reboot , nova stilfolio kiu konstruas sur Normaligi kun niaj propraj iom opinie restarigi stiloj. Elektiloj aperantaj en ĉi tiu dosiero nur uzas elementojn—ĉi tie ne estas klasoj. Ĉi tio izolas niajn restarigitajn stilojn de niaj komponaj stiloj por pli modula aliro. Kelkaj el la plej gravaj rekomenciĝoj, kiujn ĉi tio inkluzivas estas la box-sizing: border-box
ŝanĝo, moviĝado de em
al rem
unuoj pri multaj elementoj, ligaj stiloj kaj multaj formaelementaj rekomencigoj.
Tipografio
- Movis ĉiujn
.text-
ilojn al la_utilities.scss
dosiero. - Forigita
.page-header
ĉar ĝiaj stiloj povas esti aplikataj per utilecoj. .dl-horizontal
estis faligita. Anstataŭe, uzu.row
on<dl>
kaj uzu kradkolumnklasojn (aŭ miksinojn) sur ĝiaj<dt>
kaj<dd>
infanoj.- Restrukturitaj blokcitaĵoj, movante siajn stilojn de la
<blockquote>
elemento al ununura klaso,.blockquote
. Forigis la.blockquote-reverse
modifilon por tekstaj utilecoj. .list-inline
nun postulas ke ĝiaj filaj listeroj havu la novan.list-inline-item
klason aplikitan al ili.
Bildoj
- Renomite
.img-responsive
al.img-fluid
. - Renomite
.img-rounded
al.rounded
- Renomite
.img-circle
al.rounded-circle
Tabeloj
- Preskaŭ ĉiuj okazoj de la
>
elektilo estis forigitaj, tio signifas, ke nestitaj tabeloj nun aŭtomate heredos stilojn de siaj gepatroj. Ĉi tio multe simpligas niajn elektilojn kaj eblajn personigojn. - Alinomite
.table-condensed
al.table-sm
por konsistenco. - Aldonis novan
.table-inverse
opcion. - Aldonitaj tabelkapaj modifiloj:
.thead-default
kaj.thead-inverse
. - Renomitaj kuntekstaj klasoj por havi
.table-
-prefikson. Tial.active
,.success
,.warning
,.danger
kaj.info
al.table-active
,.table-success
,.table-warning
,.table-danger
kaj.table-info
.
Formoj
- Movita elemento rekomenciĝas al la
_reboot.scss
dosiero. - Renomite
.control-label
al.col-form-label
. - Renomite
.input-lg
kaj.input-sm
al.form-control-lg
kaj.form-control-sm
, respektive. - Forigita
.form-group-*
klasoj pro simpleco. Uzu.form-control-*
klasojn anstataŭe nun. - Faligis
.help-block
kaj anstataŭigis ĝin per.form-text
por bloknivela helpteksto. Por enlinia helpteksto kaj aliaj flekseblaj opcioj, uzu utilajn klasojn kiel.text-muted
. - Faligis
.radio-inline
kaj.checkbox-inline
. - Firmigitaj
.checkbox
kaj.radio
en.form-check
kaj la diversajn.form-check-*
klasojn. - Horizontalaj formoj reviziitaj:
- Forigis la
.form-horizontal
klaspostulon. .form-group
ne plu aplikas stilojn de la.row
via miksaĵo, do.row
nun necesas por horizontalaj kradaj aranĝoj (ekz.,<div class="form-group row">
).- Aldonita nova
.col-form-label
klaso al vertikale centri etikedojn kun.form-control
s. - Aldonita nova
.form-row
por kompaktaj formaj aranĝoj kun la kradaj klasoj (interŝanĝu vian.row
por a.form-row
kaj iru).
- Forigis la
- Aldonita kutimaj formoj-subteno (por markobutonoj, radioj, elektoj kaj dosieraj enigoj).
- Anstataŭigitaj
.has-error
,.has-warning
, kaj.has-success
klasoj kun HTML5-formvalidigo per CSS:invalid
kaj:valid
pseŭdo-klasoj. - Renomite
.form-control-static
al.form-control-plaintext
.
Butonoj
- Renomite
.btn-default
al.btn-secondary
. - Faligis la
.btn-xs
klason tute kiel.btn-sm
estas proporcie multe pli malgranda ol v3. - La ŝtata butono trajto de la
button.js
jQuery kromaĵo estas forigita. Ĉi tio inkluzivas la$().button(string)
kaj$().button('reset')
metodojn. Ni konsilas uzi iom da kutima JavaScript anstataŭe, kiu havos la avantaĝon konduti ĝuste kiel vi volas.- Notu, ke la aliaj funkcioj de la kromaĵo (butonaj markobutonoj, butonaj radioj, unu-ŝanĝaj butonoj) estis konservitaj en v4.
- Ŝanĝu butonojn
[disabled]
al:disabled
kiel IE9+ subtenas:disabled
. Tamenfieldset[disabled]
estas ankoraŭ necesa ĉar denaskaj malfunkciigitaj kamparo ankoraŭ estas fuŝa en IE11 .
Butongrupo
- Reskribita komponanto per flexbox.
- Forigita
.btn-group-justified
. Kiel anstataŭaĵon vi povas uzi<div class="btn-group d-flex" role="group"></div>
kiel envolvaĵon ĉirkaŭ elementoj kun.w-100
. - Forigis la
.btn-group-xs
klason tute donitan forigon de.btn-xs
. - Forigita eksplicita interspaco inter butongrupoj en butonaj ilbretoj; uzu marĝenajn utilecojn nun.
- Plibonigita dokumentaro por uzo kun aliaj komponantoj.
Dropdowns
- Ŝanĝite de gepatraj elektiloj al unuopaj klasoj por ĉiuj komponantoj, modifiloj ktp.
- Simpligitaj falmenuoj por ne plu sendi kun supren aŭ malsupren altenantaj sagoj alkroĉitaj al la falmenuo.
- Dropdowns povas esti konstruitaj kun
<div>
s aŭ<ul>
s nun. - Rekonstruitaj falmenumaj stiloj kaj markado por provizi facilan, enkonstruitan subtenon por
<a>
kaj<button>
bazitaj falmenuoj. - Renomite
.divider
al.dropdown-divider
. - Dropdown-eroj nun postulas
.dropdown-item
. - Dropdown baskuloj ne plu postulas eksplicitan
<span class="caret"></span>
; ĉi tio nun estas provizita aŭtomate per CSS-oj::after
sur.dropdown-toggle
.
Kradsistemo
- Aldonis novan
576px
kradan rompopunkton kielsm
, signifante ke nun estas kvin totalaj niveloj (xs
,sm
,md
,lg
, kajxl
). - Renomis la respondemajn kradmodifajn klasojn de
.col-{breakpoint}-{modifier}-{size}
al.{modifier}-{breakpoint}-{size}
por pli simplaj kradaj klasoj. - Forigitaj puŝaj kaj tiri modifklasoj por la novaj flekskesto-funkciigitaj
order
klasoj. Ekzemple, anstataŭ.col-8.push-4
kaj.col-4.pull-8
, vi uzus.col-8.order-2
kaj.col-4.order-1
. - Aldonitaj flexbox-utilaj klasoj por kradsistemo kaj komponantoj.
Listo grupoj
- Reskribita komponanto per flexbox.
- Anstataŭigita
a.list-group-item
per eksplicita klaso,.list-group-item-action
, por stilaj ligiloj kaj butonversioj de listgrupoj. - Aldonita
.list-group-flush
klaso por uzo kun kartoj.
Modala
- Reskribita komponanto per flexbox.
- Konsiderante la movon al flekskesto, vicigo de malakceptaj ikonoj en la kaplinio verŝajne estas rompita ĉar ni ne plu uzas flosilon. Flosita enhavo venas unue, sed kun flexbox tio ne plu estas la kazo. Ĝisdatigu viajn maldungajn ikonojn por veni post modalaj titoloj por ripari.
- La
remote
opcio (kiu povus esti uzata por aŭtomate ŝargi kaj injekti eksteran enhavon en modalon) kaj la respondaloaded.bs.modal
evento estis forigitaj. Ni rekomendas anstataŭe uzi klientflankan ŝablonon aŭ datuman ligan kadron, aŭ voki jQuery.load mem.
Navs
- Reskribita komponanto per flexbox.
- Forigis preskaŭ ĉiujn
>
elektilojn por pli simpla stilado per nenestitaj klasoj. - Anstataŭ HTML-specifaj elektiloj kiel
.nav > li > a
, ni uzas apartajn klasojn por.nav
s,.nav-item
s kaj.nav-link
s. Ĉi tio igas vian HTML-on pli fleksebla dum alportas pliigitan etendeblecon.
Navbaro
La navigadbreto estis tute reverkita en flekskesto kun plibonigita subteno por vicigo, respondeco kaj personigo.
- Respondema navbarkondutoj nun estas aplikataj al la
.navbar
klaso per la bezonata.navbar-expand-{breakpoint}
kie vi elektas kie kolaps la navbaro. Antaŭe ĉi tio estis Malpli varia modifo kaj postulis rekompilon. .navbar-default
estas nun.navbar-light
, kvankam.navbar-dark
restas la sama. Unu el ĉi tiuj estas bezonata sur ĉiu navigadbreto. Tamen, ĉi tiuj klasoj ne plu starigasbackground-color
s; anstataŭe ili esence nur influascolor
.- Navbaroj nun postulas fonan deklaron de ia speco. Elektu el niaj fonaj utilecoj (
.bg-*
) aŭ agordu vian propran per la malpezaj/inversaj klasoj supre por freneza personigo . - Konsiderante flexbox-stilojn, navbaroj nun povas uzi flexbox-servaĵojn por facilaj aligeblecoj.
.navbar-toggle
estas nun.navbar-toggler
kaj havas malsamajn stilojn kaj internan markadon (ne pli tri<span>
s).- Tute forlasis la
.navbar-form
klason. Ne plu necesas; anstataŭe, simple uzu.form-inline
kaj apliku marĝenajn utilecojn kiel necese. - Navbaroj ne plu inkluzivas
margin-bottom
aŭborder-radius
defaŭlte. Uzu utilecojn kiel necese. - Ĉiuj ekzemploj kun navbaroj estis ĝisdatigitaj por inkluzivi novan markadon.
Paĝigo
- Reskribita komponanto per flexbox.
- Eksplicitaj klasoj (
.page-item
,.page-link
) nun estas postulataj ĉe la posteuloj de.pagination
s - Faligis la
.pager
komponanton tute ĉar ĝi estis malmulte pli ol personecigitaj skizaj butonoj.
Panpecetoj
- Eksplicita klaso,
.breadcrumb-item
, nun estas postulata sur la posteuloj de.breadcrumb
s
Etikedoj kaj insignoj
- Plifirmigita
.label
kaj.badge
malambiguigi de la<label>
elemento kaj simpligi rilatajn komponantojn. - Aldonita
.badge-pill
kiel modifilo por rondeta "pilolo" aspekto. - Insignoj ne plu flosiĝas aŭtomate en listgrupoj kaj aliaj komponantoj. Utilaj klasoj nun estas postulataj por tio.
.badge-default
estis forigita kaj.badge-secondary
aldonita por kongrui kun komponentaj modifklasoj uzataj aliloke.
Paneloj, bildetoj kaj putoj
Faligita tute por la nova kartkomponento.
Paneloj
.panel
al.card
, nun konstruita kun flexbox..panel-default
forigita kaj neniu anstataŭaĵo..panel-group
forigita kaj neniu anstataŭaĵo..card-group
ne estas anstataŭaĵo, ĝi estas malsama..panel-heading
al.card-header
.panel-title
al.card-title
. Depende de la dezirata aspekto, vi eble ankaŭ volas uzi titolojn aŭ klasojn (ekz<h3>
. ,.h3
) aŭ grasajn elementojn aŭ klasojn (ekz<strong>
. ,<b>
,.font-weight-bold
). Notu ke.card-title
, dum simile nomita, produktas malsaman aspekton ol.panel-title
..panel-body
al.card-body
.panel-footer
al.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, kaj.panel-danger
estis forigitaj por.bg-
,.text-
, kaj.border
iloj generitaj de nia$theme-colors
Sass-mapo.
Progreso
- Anstataŭigis kuntekstajn
.progress-bar-*
klasojn per.bg-*
utilecoj. Ekzemple,class="progress-bar progress-bar-danger"
iĝasclass="progress-bar bg-danger"
. - Anstataŭita
.active
por viglaj progresbretoj per.progress-bar-animated
.
Karuselo
- Reviziis la tutan komponenton por simpligi dezajnon kaj stilon. Ni havas malpli da stiloj por vi anstataŭi, novajn indikilojn kaj novajn ikonojn.
- Ĉiuj CSS estis nenestitaj kaj renomitaj, certigante ke ĉiu klaso estas prefiksita per
.carousel-
.- Por karuselaj eroj,
.next
,.prev
,.left
, kaj.right
estas nun.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, kaj.carousel-item-right
. .item
estas ankaŭ nun.carousel-item
.- Por antaŭaj/sekvaj kontroloj,
.carousel-control.right
kaj.carousel-control.left
estas nun.carousel-control-next
kaj.carousel-control-prev
, tio signifas, ke ili ne plu postulas specifan bazan klason.
- Por karuselaj eroj,
- Forigis ĉiujn respondemajn stilojn, prokrastante al utilecoj (ekz., montrante subtitolojn en certaj vidfenestroj) kaj kutimaj stiloj laŭbezone.
- Forigitaj bildŝanĝoj por bildoj en karuselaj eroj, prokrastante al utilecoj.
- Ŝanĉis la Carousel-ekzemplon por inkludi la novajn markadojn kaj stilojn.
Tabeloj
- Forigita subteno por stilitaj nestitaj tabeloj. Ĉiuj tabelstiloj nun estas hereditaj en v4 por pli simplaj elektiloj.
- Aldonita inversa tabelvariaĵo.
Utilaĵoj
- Montriĝo, kaŝita kaj pli:
- Faris montrajn utilecojn respondemaj (ekz.
.d-none
kajd-{sm,md,lg,xl}-none
). - Forigis la plejparton de
.hidden-*
utilecoj por novaj ekranaj utilecoj . Ekzemple, anstataŭ.hidden-sm-up
, uzu.d-sm-none
. Renomis la.hidden-print
ilojn por uzi la montran ilan nomskemon. Pliaj informoj sub la sekcio de Respondema utilecoj de ĉi tiu paĝo. - Aldonitaj
.float-{sm,md,lg,xl}-{left,right,none}
klasoj por respondemaj flosiloj kaj forigitaj.pull-left
kaj.pull-right
ĉar ili estas redundaj al.float-left
kaj.float-right
.
- Faris montrajn utilecojn respondemaj (ekz.
- Tipo:
- Aldonitaj respondemaj variaĵoj al niaj tekstaj vicigoklasoj
.text-{sm,md,lg,xl}-{left,center,right}
.
- Aldonitaj respondemaj variaĵoj al niaj tekstaj vicigoklasoj
- Paraleligo kaj interspaco:
- Aldonitaj novaj respondemaj marĝenoj kaj kompletigaj utilecoj por ĉiuj flankoj, krom vertikalaj kaj horizontalaj stenografioj.
- Aldonita boatŝarĝo de flexbox-servaĵoj .
- Forigita
.center-block
por la nova.mx-auto
klaso.
- Clearfix ĝisdatigita por forigi subtenon por pli malnovaj retumiloj.
Vendisto-prefikso miksaĵoj
La miksaĵoj de vendoprefikso de Bootstrap 3 , kiuj estis malrekomenditaj en v3.2.0, estis forigitaj en Bootstrap 4. Ĉar ni uzas Aŭtomatprefiksilon , ili ne plu necesas.
Forigis la sekvajn miksaĵojn : 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
Dokumentado
Nia dokumentaro ankaŭ ricevis ĝisdatigon ĝenerale. Jen la malsupro:
- Ni ankoraŭ uzas Jekyll, sed ni havas kromaĵojn en la miksaĵo:
bugify.rb
estas uzata por efike listigi la enskribojn en nia paĝo pri cimoj de retumilo .example.rb
estas kutima forko de la defaŭltahighlight.rb
kromaĵo, ebligante pli facilan ekzempla-kodan uzadon.callout.rb
estas simila kutima forko de tio, sed desegnita por niaj specialaj dokumentoj.- jekyll-toc estas uzata por generi nian enhavtabelon.
- La tuta enhavo de dokumentoj estis reverkita en Markdown (anstataŭ HTML) por pli facila redaktado.
- Paĝoj estis reorganizitaj por pli simpla enhavo kaj pli alirebla hierarkio.
- Ni moviĝis de regula CSS al SCSS por plene profiti la variablojn, miksaĵojn de Bootstrap kaj pli.
Respondema utilecoj
Ĉiuj @screen-
variabloj estis forigitaj en v4.0.0. Uzu la media-breakpoint-up()
, media-breakpoint-down()
, aŭ media-breakpoint-only()
Sass-miksaĵojn aŭ la $grid-breakpoints
Sass-mapon anstataŭe.
Niaj respondemaj utilaj klasoj plejparte estis forigitaj favore al eksplicitaj display
utilecoj.
- La
.hidden
kaj.show
klasoj estis forigitaj ĉar ili konfliktis kun jQuery$(...).hide()
kaj$(...).show()
metodoj. Anstataŭe, provu ŝanĝi la[hidden]
atributon aŭ uzu enliniajn stilojn kielstyle="display: none;"
kajstyle="display: block;"
. - Ĉiuj
.hidden-
klasoj estis forigitaj, krom la presaj iloj kiuj estis renomitaj.- Forigita de 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
- Forigite de v4 alfaj:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Forigita de v3:
- Presaj iloj ne plu komenciĝas per
.hidden-
aŭ.visible-
, sed per.d-print-
.- Malnovaj nomoj:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Novaj klasoj:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Malnovaj nomoj:
Prefere ol uzi eksplicitajn .visible-*
klasojn, vi igas elementon videbla simple ne kaŝante ĝin ĉe tiu ekrangrandeco. Vi povas kombini unu .d-*-none
klason kun unu .d-*-block
klaso por montri elementon nur sur difinita intervalo de ekrangrandoj (ekz .d-none.d-md-block.d-xl-none
. montras la elementon nur ĉe mezaj kaj grandaj aparatoj).
Notu, ke la ŝanĝoj al la kradaj rompopunktoj en v4 signifas, ke vi devos iri unu rompopunkton pli granda por atingi la samajn rezultojn. La novaj respondemaj utilklasoj ne provas alĝustigi malpli oftajn kazojn kie la videbleco de elemento ne povas esti esprimita kiel ununura apuda gamo de vidportgrandoj; vi anstataŭe devos uzi kutiman CSS en tiaj kazoj.