Migrado al v5

Spuri kaj revizii ŝanĝojn al la fontdosieroj, dokumentaro kaj komponantoj de Bootstrap por helpi vin migri de v4 al v5.

Sur ĉi tiu paĝo

Dependecoj

Forigita jQuery.
Ĝisdatigita de Popper v1.x al Popper v2.x.
Anstataŭigis Libsass per Dart Sass ĉar nia Sass-kompililo donita Libsass estis malrekomendita.
Migris de Jekyll al Hugo por konstrui nian dokumentaron

Subteno de retumilo

Forigis Internet Explorer 10 kaj 11
Faligita Microsoft Edge < 16 (Legacy Edge)
Forigita Firefox < 60
Faligita Safaro < 12
Forigita iOS Safaro < 12
Forigita Chrome < 60

Dokumentaj ŝanĝoj

Restrukturitaj hejmpaĝo, enpaĝigo de dokumentoj kaj piedlinio.
Aldonita nova Pak-gvidilo .
Aldonis novan Agordu sekcion , anstataŭigante la Temon-paĝon de v4 , kun novaj detaloj pri Sass, tutmondaj agordaj opcioj, kolorskemoj, CSS-variabloj kaj pli.
Reorganizis la tutan formulardokumentaron en novan sekcion de Formoj , disigante la enhavon en pli fokusitajn paĝojn.
Simile, ĝisdatigis la sekcion Aranĝo , por pli klare pligrandigi kradenhavon.
Renomite "Navs" komponentpaĝo al "Navs & Tabs".
Renomis paĝon "Ĉekoj" al "Ĉekoj kaj radioj".
Redisegnis la navigadbreton kaj aldonis novan subnav por faciligi trairi niajn retejojn kaj dokumentojn.
Aldonita nova klavarkomo por la serĉkampo: Ctrl + /.

Sass

Ni forĵetis la defaŭltajn Sass-mapkuniĝojn por faciligi forigi redundajn valorojn. Memoru, ke vi nun devas difini ĉiujn valorojn en la Sass-mapoj kiel $theme-colors. Rigardu kiel trakti Sass-mapojn .
RompanteRenomita color-yiq()funkcio kaj rilataj variabloj al color-contrast()ĉar ĝi ne plu rilatas al YIQ-kolorspaco. Vidu #30168.
- $yiq-contrasted-thresholdestas renomita al $min-contrast-ratio.
- $yiq-text-darkkaj $yiq-text-lightestas respektive renomitaj al $color-contrast-darkkaj $color-contrast-light.
RompanteAmaskomunikilaraj demandaj miksinparametroj ŝanĝiĝis por pli logika aliro.
- media-breakpoint-down()uzas la rompopunkton mem anstataŭ la sekva rompopunkto (ekz., media-breakpoint-down(lg)anstataŭ media-breakpoint-down(md)celaj vidfenestroj pli malgrandaj ol lg).
- Simile, la dua parametro en media-breakpoint-between()ankaŭ uzas la rompopunkton mem anstataŭ la sekva rompopunkto (ekz., media-between(sm, lg)anstataŭ media-breakpoint-between(sm, md)celaj vidpunktoj inter smkaj lg).
RompanteForigitaj presaj stiloj kaj $enable-print-stylesvariablo. Presaj ekranklasoj ankoraŭ estas ĉirkaŭe. Vidu #28339 .
RompanteFaligita color(), theme-color(), kaj gray()funkcioj en favoro de variabloj. Vidu #29083 .
RompanteRenomita theme-color-level()funkcio al color-level()kaj nun akceptas ajnan koloron, kiun vi volas anstataŭ nur $theme-colorkoloroj. Vidu #29083 Atentu: color-level() estis poste faligita en v5.0.0-alpha3.
RompanteAlinomite $enable-prefers-reduced-motion-media-querykaj $enable-pointer-cursor-for-buttonsal $enable-reduced-motionkaj $enable-button-pointerspor koncizeco.
RompanteForigis la bg-gradient-variant()miksaĵon. Uzu la .bg-gradientklason por aldoni gradientojn al elementoj anstataŭ la generitaj .bg-gradient-*klasoj.
Rompante Forigis antaŭe malrekomenditajn miksaĵojn:
- hover, hover-focus, plain-hover-focus, kajhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(ankaŭ forigis la rilatan utilklason, .text-hide)
- visibility()
- form-control-focus()
RompanteRenomita scale-color()funkcio al shift-color()por eviti kolizion kun la propra kolorskala funkcio de Sass.
box-shadowmixins nun permesas nullvalorojn kaj faligi noneel pluraj argumentoj. Vidu #30394 .
La border-radius()miksaĵo nun havas defaŭltan valoron.

Kolora sistemo

La kolorsistemo kiu funkciis kun color-level()kaj $theme-color-intervalestis forigita en favoro de nova kolorsistemo. Ĉiuj lighten()kaj darken()funkcioj en nia kodbazo estas anstataŭigitaj per tint-color()kaj shade-color(). Ĉi tiuj funkcioj miksos la koloron kun blanka aŭ nigra anstataŭ ŝanĝi ĝian malpezecon je fiksa kvanto. La shift-color()aŭ nuancos aŭ ombros koloron depende de ĉu ĝia pezparametro estas pozitiva aŭ negativa. Vidu #30622 por pliaj detaloj.
Aldonitaj novaj nuancoj kaj nuancoj por ĉiu koloro, provizante naŭ apartajn kolorojn por ĉiu baza koloro, kiel novaj Sass-variabloj.
Plibonigita kolorkontrasto. Pliigita kolorkontrastoproporcio de 3:1 ĝis 4.5:1 kaj ĝisdatigitaj bluaj, verdaj, cejanaj kaj rozkoloraj koloroj por certigi WCAG 2.1 AA-kontraston. Ankaŭ ŝanĝis nian kolorkontrastan koloron de $gray-900al $black.
Por subteni nian kolorsistemon, ni aldonis novajn kutimojn tint-color()kaj shade-color()funkciojn por miksi niajn kolorojn taŭge.

Kradaj ĝisdatigoj

Nova rompopunkto! Aldonita nova xxlrompopunkto por 1400pxkaj supren. Neniuj ŝanĝoj al ĉiuj aliaj rompopunktoj.
Plibonigitaj defluiloj. Defluiloj nun estas metitaj en remoj, kaj estas pli mallarĝaj ol v4 ( 1.5rem, aŭ proksimume 24px, malsupren de 30px). Ĉi tio vicigas la kanalojn de nia kradsistemo kun niaj interspacaj utilecoj.
- Aldonita nova klaso de defluiloj ( .g-*, .gx-*, kaj .gy-*) por kontroli horizontalajn/vertikalajn defluojn, horizontalajn defluojn kaj vertikalajn defluojn.
- RompanteAlinomite .no-guttersal .g-0por kongrui kun novaj defluiloj.
Kolumnoj ne plu position: relativeaplikiĝis, do vi eble devos aldoni .position-relativeal iuj elementoj por restarigi tiun konduton.
RompanteForigis plurajn .order-*klasojn, kiuj ofte restis neuzataj. Ni nun provizas nur .order-1el .order-5la skatolo.
RompanteFaligis la .mediakomponenton ĉar ĝi povas esti facile reproduktita per utilecoj. Vidu #28265 kaj la paĝon de flex utilecoj por ekzemplo .
Rompante bootstrap-grid.cssnun validas nur box-sizing: border-boxpor la kolumno anstataŭ restarigi la tutmondan skatolon-grandecon. Tiel, niaj kradaj stiloj povas esti uzataj en pli da lokoj sen interfero.
$enable-grid-classesne plu malŝaltas la generacion de ujklasoj. Vidu #29146.
Ĝisdatigis la make-colmiksaĵon defaŭlte al egalaj kolumnoj sen specifita grandeco.

Enhavo, Reboot, ktp

RFS nun estas ebligita defaŭlte. Titoloj uzantaj lafont-size()miksaĵon aŭtomate ĝustigos sianfont-sizeal skalo kun la vidfenestro. Ĉi tiu funkcio antaŭe estis enskribita kun v4.
RompanteReviziis nian ekrantipografion por anstataŭigi niajn $display-*variablojn kaj per $display-font-sizesSass-mapo. Ankaŭ forigis la individuajn $display-*-weightvariablojn por ununura $display-font-weightkaj ĝustigita font-sizes.
Aldonitaj du novaj .display-*titoloj grandecoj, .display-5kaj .display-6.
Ligiloj estas substrekitaj defaŭlte (ne nur ŝvebate), krom se ili estas parto de specifaj komponantoj.
Redisegnitaj tabeloj por refreŝigi iliajn stilojn kaj rekonstrui ilin per CSS-variabloj por pli da kontrolo pri stilado.
RompanteNestitaj tabeloj ne plu heredas stilojn.
Rompante .thead-lightkaj .thead-darkestas forigitaj en favoro de la .table-*variantaj klasoj kiuj povas esti uzataj por ĉiuj tabelelementoj ( thead, tbody, tfoot, tr, thkaj td).
RompanteLa table-row-variant()miksaĵo estas renomita al table-variant()kaj akceptas nur 2 parametrojn: $color(kolornomo) kaj $value(kolorkodo). La randkoloro kaj akcentkoloroj estas aŭtomate kalkulitaj surbaze de la tabelfaktorvariabloj.
Dividu tabelajn ĉelplenigeblajn variablojn en -ykaj -x.
RompanteFaligita .pre-scrollableklaso. Vidu #29135
Rompante .text-*iloj ne plu aldonas statojn de ŝvebado kaj fokuso al ligiloj. .link-*helpklasoj povas esti uzataj anstataŭe. Vidu #29267
RompanteFaligita .text-justifyklaso. Vidu #29793
Rompante <hr>elementoj nun uzas heightanstataŭ borderpor pli bone subteni la sizeatributon. Ĉi tio ankaŭ ebligas uzon de kompletigaj utilecoj por krei pli dikaj disigiloj (ekz, <hr class="py-1">).
Restarigu defaŭltan horizontalon kaj elementojn padding-leftde retumilo defaŭlte al .<ul><ol>40px2rem
Aldonita $enable-smooth-scroll, kiu validas scroll-behavior: smoothtutmonde—krom uzantoj kiuj petas reduktitan moviĝon per prefers-reduced-motionamaskomunikila demando. Vidu #31877

RTL

Horizontala direkto specifaj variabloj, utilecoj, kaj miksinoj ĉiuj estis renomitaj por uzi logikajn trajtojn kiel tiuj trovitaj en flekskesto-aranĝoj—ekz, startkaj endanstataŭe de leftkaj right.

Formoj

Aldonitaj novaj ŝvebaj formoj! Ni reklamis la ekzemplon de Ŝvebaj etikedoj al plene subtenataj formkomponentoj. Vidu la novan paĝon de Ŝvebaj etikedoj.
Rompante Plifirmigitaj denaskaj kaj kutimaj formalementoj. Markobutonoj, radioj, elektoj kaj aliaj enigaĵoj, kiuj havis indiĝenajn kaj kutimajn klasojn en v4, estis firmigitaj. Nun preskaŭ ĉiuj niaj formelementoj estas tute kutimaj, plej multe sen bezono de kutima HTML.
- .custom-checkestas nun .form-check.
- .custom-check.custom-switchestas nun .form-check.form-switch.
- .custom-selectestas nun .form-select.
- .custom-filekaj .form-fileestis anstataŭigitaj per kutimaj stiloj aldone al .form-control.
- .custom-rangeestas nun .form-range.
- Faligita denaska .form-control-filekaj .form-control-range.
RompanteFaligis .input-group-appendkaj .input-group-prepend. Vi nun povas nur aldoni butonojn kaj .input-group-textkiel rektajn filojn de la enigogrupoj.
La longdaŭra Mankanta limradiuso sur eniggrupo kun validuma responda cimo estas finfine riparita aldonante plian .has-validationklason al eniggrupoj kun validumado.
Rompante Faligis formospecifajn aranĝajn klasojn por nia kradsistemo. Uzu nian kradon kaj ilojn anstataŭ .form-group, .form-row, aŭ .form-inline.
RompanteFormetikedoj nun postulas .form-label.
Rompante .form-textne plu aroj display, permesante al vi krei enlinian aŭ bloki helptekston kiel vi deziras nur ŝanĝante la HTML-elementon.
Konfirmikonoj ne plu estas aplikataj al <select>s kun multiple.
Rearanĝitaj fontaj Sass-dosieroj sub scss/forms/, inkluzive de eniggrupo-stiloj.

Komponentoj

Unuigitaj paddingvaloroj por atentigoj, panetoj, kartoj, falmenuoj, listgrupoj, modaloj, popovers kaj konsiletoj baziĝos sur nia $spacervariablo. Vidu #30564 .

Akordiono

Aldonita nova akordiona komponanto .

Atentigoj

Atentigoj nun havas ekzemplojn kun ikonoj .
Forigitaj kutimaj stiloj por <hr>s en ĉiu atentigo ĉar ili jam uzas currentColor.

Insignoj

RompanteForigis ĉiujn .badge-*kolorajn klasojn por fonaj utilecoj (ekz., uzu .bg-primaryanstataŭ .badge-primary).
RompanteForigita .badge-pill— uzu la .rounded-pillilon anstataŭe.
RompanteForigis ŝvebajn kaj fokusajn stilojn por <a>kaj <button>elementoj.
Pliigita defaŭlta kompletigo por insignoj de .25em/ .5emal .35em/ .65em.

Panpecetoj

Simpligis la defaŭltan aspekton de panpecetoj per forigo de padding, background-colorkaj border-radius.
Aldonita nova CSS kutima posedaĵo --bs-breadcrumb-dividerpor facila personigo sen neceso rekompili CSS.

Butonoj

Rompante Ŝaltigi butonojn , kun markobutonoj aŭ radioj, ne plu postulas JavaScript kaj havas novan markadon. Ni ne plu postulas envolvan elementon, aldonu.btn-checkal la<input>, kaj parigu ĝin kun iuj.btnklasoj sur la<label>. Vidu #30650 . La dokumentoj por ĉi tio translokiĝis de nia paĝo Butonoj al la nova sekcio Formoj.
Rompante Forigita .btn-blockpro utilecoj. Anstataŭ uzi .btn-blocksur la .btn, envolvu viajn butonojn per .d-gridkaj .gap-*ilo por interspacigi ilin laŭbezone. Ŝanĝu al respondemaj klasoj por eĉ pli da kontrolo super ili. Legu la dokumentojn por kelkaj ekzemploj.
Ĝisdatigis niajn button-variant()kaj button-outline-variant()miksaĵojn por subteni pliajn parametrojn.
Ĝisdatigitaj butonoj por certigi pliigitan kontraston sur ŝvebado kaj aktivaj statoj.
Malebligitaj butonoj nun havas pointer-events: none;.

Karto

RompanteFaligita .card-decken favoro de nia krado. Envolvu viajn kartojn en kolumnklasojn kaj aldonu gepatran .row-cols-*ujon por rekrei kartferdekojn (sed kun pli da kontrolo pri respondema vicigo).
RompanteFaligita .card-columnsen favoro de Masonería. Vidu #28922 .
RompanteAnstataŭigis la .cardbazitan akordionon per nova Akordiono-komponento .

Karuselo

Aldonita nova .carousel-darkvarianto por malhelaj tekstoj, kontroloj kaj indikiloj (bonegaj por pli helaj fonoj).
Anstataŭigis ĉevronajn ikonojn por karuselaj kontroloj per novaj SVG-oj de Bootstrap-Ikonoj .

Fermi butonon

RompanteAlinomite .closeal .btn-closepor malpli ĝenerala nomo.
Fermaj butonoj nun uzas background-image(enigitan SVG) anstataŭ a ×en la HTML, ebligante pli facilan personigon sen neceso tuŝi vian markadon.
Aldonita nova .btn-close-whitevarianto kiu uzas filter: invert(1)por ebligi pli altan kontraston forĵeti ikonojn kontraŭ pli malhelaj fonoj.

Kolapso

Forigita rulankro por akordionoj.

Dropdowns

Aldonita nova .dropdown-menu-darkvarianto kaj rilataj variabloj por laŭpetaj malhelaj menuroj.
Aldonita nova variablo por $dropdown-padding-x.
Mallumigis la menudividilon por plibonigita kontrasto.
RompanteĈiuj eventoj por la falmenuo nun estas deĉenigitaj sur la menubutono baskulo kaj tiam bobelis supren al la gepatra elemento.
Falmenuoj nun havas data-bs-popper="static"atributon agordita kiam la poziciigado de la falmenuo estas senmova kaj data-bs-popper="none"kiam falmenuo estas en la navbaro. Ĉi tio estas aldonita de nia JavaScript kaj helpas nin uzi kutimajn poziciostilojn sen malhelpi la poziciigon de Popper.
RompanteFaligita flipopcio por falmenuo kromaĵo favore al indiĝena Popper-agordo. Vi nun povas malŝalti la renversigan konduton pasigante malplenan tabelon por fallbackPlacementsopcio en flip modifilo.
Falmenuoj nun povas esti klakeblaj kun nova autoCloseopcio por trakti la aŭtomatan ferman konduton . Vi povas uzi ĉi tiun opcion por akcepti la klakon ene aŭ ekster la falmenuo por fari ĝin interaga.
Dropdowns nun subtenas .dropdown-items envolvitaj en <li>s.

Jumbotron

RompanteFaligis la jumbotron-komponenton ĉar ĝi povas esti reproduktita kun servaĵoj. Vidu nian novan ekzemplon de Jumbotron por pruvo.

Listo grupo

Aldonita nova .list-group-numberedmodifilo al listgrupoj.

Navs kaj langetoj

Aldonitaj novaj nullvariabloj por font-size, font-weight, color, kaj :hover coloral la .nav-linkklaso.

Navbaroj

RompanteNavbaroj nun postulas ujon ene (por draste simpligi interspacipostulojn kaj CSS necesas).

Eksterkanvaso

Aldonis la novan offcanvas-komponenton .

Paĝigo

Paĝigaj ligiloj nun havas agordeblajn margin-left, kiuj estas dinamike rondigitaj en ĉiuj anguloj kiam ili estas apartigitaj unu de la alia.
Aldonita transitions al paĝigo ligiloj.

Popovers

RompanteAlinomite .arrowal .popover-arrowen nia defaŭlta popover ŝablono.
Renomita whiteListopcio al allowList.

Ŝpiniloj

Ŝpinistoj nun honoras prefers-reduced-motion: reducemalrapidigante kuraĝigojn. Vidu #31882 .
Plibonigita spinner vertikala vicigo.

Tostoj

Tostoj nun povas esti poziciigitaj en a .toast-containerhelpe de poziciiga utilecoj .
Ŝanĝita defaŭlta rostpandaŭro al 5 sekundoj.
Forigita overflow: hiddende tostoj kaj anstataŭigita per propraj border-radiuss kun calc()funkcioj.

Konsiletoj

RompanteAlinomite .arrowal .tooltip-arrowen nia defaŭlta konsileto ŝablono.
RompanteLa defaŭlta valoro por la fallbackPlacementsestas ŝanĝita al ['top', 'right', 'bottom', 'left']por pli bona lokigo de popper-elementoj.
RompanteRenomita whiteListopcio al allowList.

Utilaĵoj

RompanteRenomis plurajn ilojn por uzi logikajn posednomojn anstataŭ direktajn nomojn kun la aldono de RTL-subteno:
- Renomita .left-*kaj .right-*al .start-*kaj .end-*.
- Renomita .float-leftkaj .float-rightal .float-startkaj .float-end.
- Renomita .border-leftkaj .border-rightal .border-startkaj .border-end.
- Renomita .rounded-leftkaj .rounded-rightal .rounded-startkaj .rounded-end.
- Renomita .ml-*kaj .mr-*al .ms-*kaj .me-*.
- Renomita .pl-*kaj .pr-*al .ps-*kaj .pe-*.
- Renomita .text-leftkaj .text-rightal .text-startkaj .text-end.
RompanteMalebligitaj negativaj marĝenoj defaŭlte.
Aldonita nova .bg-bodyklaso por rapide agordi la <body>fonon al pliaj elementoj.
Aldonitaj novaj poziciaj utilecoj por top, right, bottom, kaj left. Valoroj inkluzivas 0, 50%, kaj 100%por ĉiu posedaĵo.
Aldonitaj novaj .translate-middle-x& .translate-middle-yutilecoj por horizontale aŭ vertikale centri absolutajn/fiksajn poziciigitajn elementojn.
Aldonitaj novaj border-widthutilecoj .
RompanteRenomite .text-monospaceal .font-monospace.
RompanteForigita .text-hideĉar ĝi estas malnoviĝinta metodo por kaŝi tekston, kiu ne plu uzu.
Aldonitaj .fs-*iloj por font-sizeutilecoj (kun RFS ebligita). Tiuj uzas la saman skalon kiel la defaŭltaj titoloj de HTML (1-6, grandaj ĝis malgrandaj), kaj povas esti modifitaj per Sass-mapo.
RompanteRenomitaj .font-weight-*utilecoj kiel .fw-*por koncizeco kaj konsistenco.
RompanteRenomitaj .font-style-*utilecoj kiel .fst-*por koncizeco kaj konsistenco.
Aldonita .d-gridpor montri ilojn kaj novajn gapilojn ( .gap) por CSS-Krado kaj flekskesto-aranĝoj.
RompanteForigis .rounded-smkaj rounded-lg, kaj enkondukis novan skalon de klasoj, .rounded-0al .rounded-3. Vidu #31687 .
Aldonitaj novaj line-heightiloj: .lh-1, .lh-sm, .lh-basekaj .lh-lg. Vidu ĉi tie .
Movis la .d-noneilon en nia CSS por doni al ĝi pli da pezo super aliaj montraj iloj.
Etendis la .visually-hidden-focusablehelpanton por labori ankaŭ sur ujoj, uzante :focus-within.

Helpantoj

Rompante Respondema enkonstruaj helpantoj estis renomitaj al proporciaj helpantoj kun novaj klasnomoj kaj plibonigitaj kondutoj, same kiel helpema CSS-variablo.
- Klasoj estis renomitaj por ŝanĝi byal xen la bildformato. Ekzemple, .ratio-16by9estas nun .ratio-16x9.
- Ni forigis la .embed-responsive-itemelektilon kaj elemento-grupon favore al pli simpla .ratio > *elektilo. Ne plu necesas klaso, kaj la proporcia helpilo nun funkcias kun iu ajn HTML-elemento.
- La $embed-responsive-aspect-ratiosSass-mapo estis renomita al $aspect-ratioskaj ĝiaj valoroj estis simpligitaj por inkludi la klasnomon kaj la procenton kiel la key: valueparo.
- CSS-variabloj nun estas generitaj kaj inkluditaj por ĉiu valoro en la Sass-mapo. Modifi la --bs-aspect-ratiovariablon sur la .ratiopor krei ajnan propran bildformaton .
Rompante "Ekranlegilo" klasoj nun estas "vide kaŝitaj" klasoj .
- Ŝanĝis la Sass-dosieron de scss/helpers/_screenreaders.scssalscss/helpers/_visually-hidden.scss
- Renomita .sr-onlykaj .sr-only-focusableal .visually-hiddenkaj.visually-hidden-focusable
- Alinomite sr-only()kaj sr-only-focusable()miksas al visually-hidden()kaj visually-hidden-focusable().
bootstrap-utilities.cssnun ankaŭ inkluzivas niajn helpantojn. Helpantoj ne plu bezonas esti importitaj en kutimaj konstruoj.

JavaScript

Forigis jQuery-dependecon kaj reverkis kromaĵojn por esti en regula JavaScript.
RompanteDatumaj atributoj por ĉiuj JavaScript-kromaĵoj nun estas nomspacigitaj por helpi distingi Bootstrap-funkciecon de triaj kaj via propra kodo. Ekzemple, ni uzas data-bs-toggleanstataŭ data-toggle.
Ĉiuj kromprogramoj nun povas akcepti CSS-elektilon kiel la unuan argumenton. Vi povas aŭ preterpasi DOM-elementon aŭ ajnan validan CSS-elektilon por krei novan ekzemplon de la kromaĵo:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpovas esti pasita kiel funkcio kiu akceptas la defaŭltan Popper-agordon de Bootstrap kiel argumenton, por ke vi povu kunfandi ĉi tiun defaŭltan agordon laŭ via maniero. Validas por falmenuoj, popovers kaj konsiletoj.
La defaŭlta valoro por la fallbackPlacementsestas ŝanĝita al ['top', 'right', 'bottom', 'left']por pli bona lokigo de Popper-elementoj. Validas por falmenuoj, popovers kaj konsiletoj.
Forigita substreko de publikaj senmovaj metodoj kiel _getInstance()→ getInstance().