Source

Fa'asolo ile v4

Bootstrap 4 o se toe tusi tele o le galuega atoa. O suiga sili ona iloga o loʻo aoteleina i lalo, sosoo ai ma suiga faʻapitoa i vaega talafeagai.

Suiga mautu

O le siitia mai le Beta 3 i le matou faʻamalolo v4.0 mautu, e leai ni suiga faʻalavelave, ae o loʻo i ai ni suiga iloga.

Lomitusi

  • Fa'amauina mea faigaluega lolomi malepe. I le taimi muamua, o le faʻaaogaina o se .d-print-*vasega o le a faʻafuaseʻi ona faʻaumatia soʻo se isi .d-*vasega. I le taimi nei, latou te fa'atusaina a matou isi fa'aaliga fa'aoga ma na'o le fa'aoga i lena fa'asalalauga ( @media print).

  • Fa'alautele mea faigaluega fa'aaliga lomitusi e fa'afetaui i isi fa'aoga. Beta 3 ma matutua atu na o le block, inline-block, inline, ma le none. Stable v4 faaopoopo flex, inline-flex, table, table-row, ma table-cell.

  • Fa'atonu lomitusi fa'aaliga fa'aaliga i luga o su'esu'ega ma sitaili lolomi fou e fa'amaoti @page size.

Beta 3 suiga

A o Beta 2 na vaʻaia le tele o a matou suiga i le taimi o le beta, ae o loʻo i ai pea ni nai mea e manaʻomia ona faʻatalanoaina i le Beta 3 faʻamalolo. E fa'aoga nei suiga pe afai o lo'o e fa'afou i le Beta 3 mai le Beta 2 po'o so'o se kopi tuai o Bootstrap.

Eseese

  • Ave'ese le $thumbnail-transitionfesuiaiga e le'i fa'aaogaina. Matou te le'i suia se mea, o lea ua na o se code faaopoopo.
  • O le npm package e le o toe aofia ai soʻo se faila e ese mai i la matou punaoa ma faila faila; afai e te faʻalagolago ia i latou ma o loʻo faʻatautaia a matou tusitusiga e ala i le node_modulesfaila, e tatau ona e faʻafetaui lau faʻasologa o galuega.

Fomu

  • Toe tusi uma pusa siaki masani ma fa'aletonu ma leitio. O le taimi nei, e tutusa uma le fausaga HTML (i fafo <div>ma le uso <input>ma <label>le) ma tutusa sitaili faʻatulagaina (faʻapipiʻi faaletonu, laina faʻatasi ma le vasega suiga). Ole mea lea e mafai ai ona tatou fa'aigoaina le fa'ailoga e fa'atatau i le tulaga o le fa'aoga, fa'afaigofieina le lagolago mo le disableduiga (mua'i mana'omia se vasega matua) ma sili atu le lagolagoina o le fa'amaoniaina o la tatou pepa.

    O se vaega o lenei mea, ua matou suia le CSS mo le puleaina o le tele o background-images i luga o pusa siaki masani ma leitio. I le taimi muamua, o le elemene ua aveese .custom-control-indicatorua i ai le lanu o tua, gradient, ma le SVG icon. O le fa'avasegaina o le fa'amasani i tua o lona uiga e sui uma na mea i taimi uma e te mana'omia ai e sui na'o le tasi. O lenei, ua tatou maua .custom-control-label::beforemo le faʻatumu ma le faʻasolosolo ma .custom-control-label::afterfaʻaogaina le faʻailoga.

    Ina ia faia se siaki masani ile laina, fa'aopoopo .custom-control-inline.

  • Fa'afou filifiliga mo vaega fa'amau fa'aulu. Nai lo [data-toggle="buttons"] { }mo sitaili ma amioga, matou te faʻaogaina le datauiga mo naʻo JS amioga ma faʻalagolago i se .btn-group-togglevasega fou mo le siiina.

  • Ave'esea .col-form-legendmo se fa'alelei teisi .col-form-label. O lenei auala .col-form-label-smma .col-form-label-lge mafai ona faʻaaogaina i <legend>elemene ma faigofie.

  • O fa'aulufalega faila fa'apitoa na maua se suiga i la latou $custom-file-textfesuiaiga Sass. Ua le toe avea ma faafanua Sass faamoega ma ua na o le tasi le manoa e malosi ai—o le Browsefaamau ona ua na o le pau lea o le pseudo-element ua gaosia mai la tatou Sass. O le Choose filetusitusiga ua sau nei mai le .custom-file-label.

Vaega fa'aofi

  • O fa'aopoopo vaega fa'aulu ua fa'apitoa nei i lo latou tu'uina e fa'atatau i se fa'aoga. Ua matou pa'u .input-group-addonma .input-group-btnmo ni vasega fou se lua, .input-group-prependma .input-group-append. E tatau ona e fa'aoga manino se fa'aopoopoga po'o se fa'aulufale i le taimi nei, fa'afaigofie le tele o la matou CSS. I totonu o se faʻaopoopoga poʻo se faʻapipiʻi, tuʻu au faʻamau e pei ona i ai i se isi lava mea, ae afifi tusitusiga i totonu .input-group-text.

  • O lo'o lagolagoina nei sitaili fa'amaonia, fa'apea fo'i le tele o fa'aoga (e ui e na'o le tasi le fa'aoga e mafai ona e fa'amaonia i le vaega).

  • O le fuaina o vasega e tatau ona i luga ole matua .input-groupae le o elemene ta'itasi.

Suiga Beta 2

A'o i totonu o le beta, matou te fa'amoemoe e leai ni suiga fa'aletonu. Ae ui i lea, e le o taimi uma e alu ai mea e pei ona fuafuaina. O lo'o i lalo suiga malepelepe e manatua pe a siitia mai le Beta 1 i le Beta 2.

gau

  • Ave'esea $badge-colorle fesuiaiga ma lona fa'aoga ile .badge. Matou te fa'aogaina se galuega fa'atusatusa lanu e filifili ai colore fa'atatau i le background-color, o lea e le mana'omia ai le fesuiaiga.
  • Toe fa'aigoa grayscale()galuega ina gray()ia 'alofia ai le malepelepe o fete'ena'iga ma le grayscalefa'amama fa'aletino CSS.
  • Toe fa'aigoa .table-inverse, .thead-inverse, ma .thead-defaulti .*-darkma .*-light, fa'afetauia a matou lanu lanu fa'aaoga i isi mea.
  • O laulau tali mai ua fa'atupuina vasega mo ta'iala ta'itasi. O le mea lea e motusia mai le Beta 1 ona o le .table-responsivemea na e fa'aaogaina e pei o le .table-responsive-md. E mafai nei ona e faʻaaogaina .table-responsivepe .table-responsive-{sm,md,lg,xl}a manaʻomia.
  • Pa'u le lagolago a Bower ona o le pule o pusa ua le toe fa'aaogaina mo isi mea (fa'ata'ita'iga, Yarn po'o le npm). Va'ai bower/bower#2298 mo fa'amatalaga.
  • O lo'o mana'omia pea e Bootstrap le jQuery 1.9.1 po'o le maualuga, ae ua fautuaina oe e fa'aoga le version 3.x talu ai o su'esu'ega lagolago a le v3.x o mea ia e lagolagoina e Bootstrap fa'atasi ai ma le v3.x o lo'o i ai ni fa'aoga saogalemu.
  • Aveese le .form-control-labelvasega e le'i fa'aaogaina. Afai na e fa'aogaina lenei vasega, o le fa'alua lea o le .col-form-labelvasega na fa'atotonugalemu a <label>fa'atasi ai ma fa'aoga feso'ota'i i fa'asologa fa'alava.
  • Suia le color-yiqmai se mixin e aofia ai le colormeatotino i se galuega e toe faʻafoʻi ai se tau, faʻatagaina oe e faʻaaogaina mo soʻo se meatotino CSS. Mo se faʻataʻitaʻiga, nai lo le color-yiq(#000), e te tusia color: color-yiq(#000);.

Fa'ailoga

  • Fa'ailoaina le fa'aoga fou pointer-eventsi modals. O le pito i fafo .modal-dialoge pasi atu i mea e tutupu ma pointer-events: nonemo le faʻaogaina o kiliki masani (faʻataga naʻo le faʻalogo i luga .modal-backdropmo soʻo se kiliki), ona faʻafetaui lea mo le mea moni .modal-contentma pointer-events: auto.

Aotelega

O mea nei o pepa tiketi tetele e te mana'o e te nofouta i ai pe a alu mai le v3 i le v4.

Lagolago su'esu'e

  • Pa'u IE8, IE9, ma iOS 6 lagolago. v4 ua na'o le IE10+ ma le iOS 7+. Mo nofoaga e manaʻomia se tasi o na mea, faʻaoga v3.
  • Fa'aopoopoina le lagolago aloa'ia mo le Android v5.0 Lollipop's Browser ma WebView. O lomiga muamua o le Android Browser ma WebView o lo'o tumau pea na'o le lagolagoina le aloaia.

Suiga o le lalolagi

  • Flexbox e mafai ona fa'aletonu. I se tulaga lautele, o lona uiga o le alu ese mai mea faʻafefe ma sili atu i luga oa tatou vaega.
  • Suia mai le Itiiti i le Sass mo a matou faila CSS puna.
  • Su'i mai pxi remle matou iunite CSS muamua, e ui o pika o lo'o fa'aogaina pea mo fa'amatalaga fa'asalalau ma amioga fa'asologa ona e le'o a'afia mata'itusi i le tele o ituaiga.
  • Ua faateleina le tele o le vai papatisoga mai 14pxle 16px.
  • Toe fa'afou fa'asologa fa'asologa e fa'aopoopo ai le filifiliga lona lima (fa'afeso'ota'i masini laiti i 576pxlalo ma lalo) ma aveese le -xsinfix mai na vasega. Faataitaiga: .col-6.col-sm-4.col-md-3.
  • Suia le autu eseese e filifili ai i filifiliga e mafai ona fetuutuunai e ala i suiga SCSS (faataitaiga, $enable-gradients: true).
  • Fausia faiga toe faʻaleleia e faʻaaoga ai se faasologa o tusitusiga npm nai lo Grunt. Va'ai package.jsonmo fa'amaumauga uma, po'o le matou poloketi faitau mo mana'oga fa'apitonu'u.
  • O le fa'aogaina ole Bootstrap e le'o toe lagolagoina.
  • Fa'amuta le Customizer i luga ole laiga e fa'atatau ile tele o fa'amaumauga fa'atulagaina ma fau fa'apitoa.
  • Fa'aopoopoina le tele o vasega fa'aoga fou mo pa'aga masani-taua o mea totino a le CSS ma ala pupuu o le va'a/padding.

Faiga fa'apipi'i

  • Sii atu ile flexbox.
    • Fa'aopoopoina le lagolago mo le flexbox i totonu o fa'afefiloi fa'avasega ma vasega fa'ata'atia.
    • O se vaega o le flexbox, e aofia ai le lagolago mo vasega fa'aoga tu'u sa'o ma faalava.
  • Fa'afou igoa vasega fa'asologa ma se fa'asologa fou.
    • Fa'aopoopoina se fa'asologa fou smi lalo 768pxmo le fa'atonuga sili atu. Ua tatou maua nei xs, sm, md, lgma xl. O lona uiga fo'i ua fa'ae'e uma vaega i luga o le tasi tulaga (o lea .col-md-6i le v3 ua i ai nei .col-lg-6i le v4).
    • xsvasega grid ua suia ina ia le mana'omia le infix ia sili atu ona sa'o e fa'aalia ai ua amata ona latou fa'aogaina sitaili min-width: 0ae le o se tau fa'atulagaina pika. Nai lo le .col-xs-6, o le taimi nei .col-6. O isi fa'asologa uma e mana'omia le infix (fa'ata'ita'iga, sm).
  • Fa'afouina le tele o fa'asologa, fa'afefiloi, ma fesuiaiga.
    • Ua iai nei le fa'afanua Sass o alavai fa'ata'oto ina ia mafai ai ona e fa'ama'oti le lautele o alavai i vaega ta'itasi.
    • Fa'afou fa'afefiloi feso'ota'iga e fa'aoga ai se fa'afefiloi make-col-readymuai ma se make-colfa'atulaga le flexma max-widthmo le fa'avasegaina o koluma ta'itasi.
    • Suia fa'asologa o fa'asalalauga fa'asalalauga fa'asagaga ma le lautele o atigipusa e fa'atatau mo le fa'asologa fou ma fa'amautinoa e vaevae tutusa koluma 12i lo latou lautele lautele.
    • Ua fa'atautaia nei fa'afanua fa'afanua Sass ( $grid-breakpointsma $container-max-widths) nai lo nai vaega to'aitiiti o suiga eseese. O nei mea e sui @screen-*uma ai le fesuiaiga ma faʻatagaina oe e faʻapipiʻi atoatoa faʻasologa faʻasologa.
    • Ua suia foi fesili a le aufaasālalau. Nai lo le toe faia o a matou tautinoga o fesili a le aufaasālalau ma le tau tutusa i taimi uma, ua matou maua nei @include media-breakpoint-up/down/only. Ia, nai lo le tusitusi @media (min-width: @screen-sm-min) { ... }, e mafai ona e tusi @include media-breakpoint-up(sm) { ... }.

Vaega

  • Pa'u pa'u, la'ititi, ma vaieli mo se vaega fou e aofia uma ai, kata .
  • Pa'u le Glyphicons icon font. Afai e te manaʻomia ni ata, o nisi o filifiliga o:
  • Tu'u le fa'apipi'i Affix jQuery.
    • Matou te fautuaina le fa'aoga position: sticky. Va'ai le HTML5 Fa'amolemole ulufale mo fa'amatalaga ma fautuaga fa'apitoa polyfill. O le tasi fautuaga o le faʻaaogaina o se @supportstulafono mo le faʻatinoina (faʻataʻitaʻiga, @supports (position: sticky) { ... })/
    • Afai o lo'o e fa'aogaina le Affix e fa'aoga ai ni sitaili fa'aopoopo, e le o ni positionsitaili, atonu e le lagolagoina e polyfills lau fa'aoga fa'aoga. O le tasi filifiliga mo ia fa'aoga o le vaega lona tolu ScrollPos-Styler faletusi.
  • Pa'u le vaega o le pager ona sa fai si fa'avasegaina fa'amau.
  • Toe fa'afo'i toetoe lava o vaega uma e fa'aoga ai nisi vasega e le'i fa'amomoli nai lo le fa'apitoa o tamaiti filifilia.

E ala i vaega

O lenei lisi o lo'o fa'amanino ai suiga taua ile vaega ile va v3.xx ma v4.0.0.

Toe fai

Fou i le Bootstrap 4 o le Toe Fa'afouina , o se sitaili fou e fausia i luga o le Normalize ma a tatou lava sitaili toe setiina. O tagata filifilia o loʻo faʻaalia i lenei faila naʻo le faʻaaogaina o elemene-e leai ni vasega iinei. Ole mea lea e fa'aesea ai a tatou sitaili toe setiina mai a tatou sitaili vaega mo se auala sili atu ona faʻaogaina. O nisi o toe setiina sili ona taua e aofia ai le box-sizing: border-boxsuiga, agai mai emi remiunite i luga o le tele o elemene, sitaili fesoʻotaʻiga, ma le tele o faʻasologa elemene elemene.

Tusitala

  • Si'i mea .text-aoga uma ile _utilities.scssfaila.
  • Pa'u .page-headerona o ona sitaili e mafai ona fa'aogaina e ala i mea aoga.
  • .dl-horizontalua pa'u. Nai lo lena, fa'aoga .rowi luga <dl>ma fa'aoga vasega koluma laina (po'o fa'afefiloi) i luga o ana <dt>ma <dd>tamaiti.
  • Toe fa'ailoga poloka upusii, fa'asolo a latou sitaili mai le <blockquote>elemene i se vasega e tasi, .blockquote. Tu'u ese le .blockquote-reversesuiga mo mea aoga o tusitusiga.
  • .list-inlineua mana'omia nei le fa'aogaina e ana tamaiti o mea lisi le .list-inline-itemvasega fou e fa'atatau ia i latou.

Ata

  • Toe sui igoa .img-responsiveia .img-fluid.
  • Toe fa'aigoa .img-roundedi.rounded
  • Toe fa'aigoa .img-circlei.rounded-circle

Laupapa

  • Toeitiiti lava o taimi uma o le >tagata filifilia ua aveese, o lona uiga o laulau faʻapipiʻi o le a otometi lava ona maua sitaili mai o latou matua. Ole mea lea e fa'afaigofieina ai a tatou tagata filifilia ma fa'atonuga talafeagai.
  • Toe fa'aigoaina .table-condensedmo .table-smle fa'atumauina.
  • Faaopoopo i ai se .table-inversefilifiliga fou.
  • Fa'aopoopo fa'auluuluga laulau: .thead-defaultma .thead-inverse.
  • Toe fa'aigoa vasega fa'asinomaga ina ia iai se .table--prefix. O lea .active, .success, .warning, .dangerma .infoia .table-active, .table-success, .table-warning, .table-dangerma .table-info.

Fomu

  • Toe fa'atūina le elemene fa'agaoioi ile _reboot.scssfaila.
  • Toe sui igoa .control-labelia .col-form-label.
  • Toe fa'aigoa .input-lgma .input-smi .form-control-lgma .form-control-sm, fa'asologa.
  • Tu'u .form-group-*vasega ona o le faigofie. Fa'aaoga .form-control-*vasega i le taimi nei.
  • Pa'u .help-blockma sui i .form-textmo tusitusiga fesoasoani tulaga poloka. Mo tusitusiga fesoasoani ile laina ma isi filifiliga fetuutuunai, fa'aoga vasega aoga pei ole .text-muted.
  • Pa'u .radio-inlinema .checkbox-inline.
  • Tuufaatasi .checkboxma .radiototonu .form-checkma .form-check-*vasega eseese.
  • Fa'ailoga fa'asaga'i ua toe fa'aleleia:
    • Tu'u le .form-horizontalvasega e mana'omia.
    • .form-groupe le o toe fa'aogaina sitaili mai le .rowvia mixin, o lea .rowua mana'omia nei mo fa'asologa o fa'asologa fa'ata'atia (fa'ata'ita'iga, <div class="form-group row">).
    • Fa'aopoopo le .col-form-labelvasega fou i fa'ailoga fa'atūtū i le ogatotonu fa'atasi ma .form-controlle s.
    • Fa'aopoopo mea fou .form-rowmo fa'atonuga fa'akomepiuta fa'atasi ma vasega fa'avasega (sui lau .rowmo le a .form-rowma alu).
  • Fa'aopoopoina fomu fa'apitoa lagolago (mo pusa siaki, leitio, filifili, ma faila faila).
  • Suia .has-error, .has-warning, ma .has-successvasega i le HTML5 faʻamaonia pepa e ala ile CSS :invalidma :validpseudo-vasega.
  • Toe sui igoa .form-control-staticia .form-control-plaintext.

Fa'amau

  • Toe sui igoa .btn-defaultia .btn-secondary.
  • Pa'u .btn-xsatoa le vasega ona .btn-sme la'ititi tele nai lo le v3's.
  • O le fa'ailoga fa'amaufa'ailoga o le button.jsjQuery plugin ua pa'u. E aofia ai $().button(string)ma $().button('reset')metotia. Matou te fautuaina le faʻaaogaina o sina aganuʻu JavaScript nai lo, lea o le a maua ai le aoga o le amio tonu i le auala e te manaʻo ai.
    • Manatua o isi vaega o le faʻapipiʻi (pusa faʻamau, faʻamau leitio, faʻamau tasi-toggle) o loʻo taofia i le v4.
  • Suia fa'amau ' [disabled]e :disabledpei ona lagolagoina e IE9+ :disabled. Ae peita'i fieldset[disabled]e mana'omia pea ona o lo'o iai pea le ta'avale ile IE11 .

Vaega ki

  • Toe tusi vaega i le flexbox.
  • Aveese .btn-group-justified. I le avea ai ma sui e mafai ona e faʻaogaina <div class="btn-group d-flex" role="group"></div>e fai ma afifi i elemene ma .w-100.
  • Tu'u i lalo le .btn-group-xsvasega ua ave atoa le .btn-xs.
  • Aveese le avanoa manino i le va o kulupu fa'amau i fa'amau meafaigaluega; fa'aoga fa'aaogaga pito i tua i le taimi nei.
  • Faʻaleleia faʻamaumauga mo le faʻaogaina ma isi vaega.
  • Suia mai matua filifilia i vasega tutasi mo vaega uma, sui, ma isi.
  • Fa'afaigofie sitaili pa'u i lalo e le toe lafo fa'atasi ma aū fa'asaga i luga po'o lalo o lo'o fa'apipi'i i le lisi fa'alalo.
  • E mafai ona fausia fa'alalolalo i <div>le s po'o <ul>le s i le taimi nei.
  • Toe fausia sitaili pa'u i lalo ma fa'ailoga e tu'uina atu faigofie, fa'apipi'i-i totonu lagolago mo <a>ma <button>fa'avae mea fa'alalo.
  • Toe sui igoa .divideria .dropdown-divider.
  • E manaʻomia nei mea faʻapipiʻi .dropdown-item.
  • E le toe mana'omia se fa'amatalaga manino <span class="caret"></span>; o lea ua saunia otometi e ala i CSS's ::afteron .dropdown-toggle.

Faiga fa'apipi'i

  • Ua fa'aopoopoina se 576pxlaina va'aiga fou e pei o le sm, o lona uiga e lima le aofa'i o vaega ( xs, sm, md, lg, ma xl).
  • Toe fa'aigoa vasega fetu'una'iga feso'ota'iga tali mai .col-{breakpoint}-{modifier}-{size}i le .{modifier}-{breakpoint}-{size}mo vasega fa'avasega faigofie.
  • Tu'i ma toso vasega suiga mo vasega fou e fa'aola ai le flexbox order. Mo se faʻataʻitaʻiga, nai lo le .col-8.push-4ma .col-4.pull-8, e te faʻaaogaina .col-8.order-2ma .col-4.order-1.
  • Fa'aopoopo vasega fa'aoga flexbox mo le fa'aogaina o fa'asologa ma vaega.

Lisi vaega

  • Toe tusi vaega i le flexbox.
  • Suia a.list-group-itemi se vasega manino, .list-group-item-action, mo le fa'avasegaina o so'otaga ma fa'amau fa'amau o lisi vaega o mea.
  • Fa'aopoopo .list-group-flushle vasega mo le fa'aoga i kata.
  • Toe tusi vaega i le flexbox.
  • A tu'uina atu i le flexbox, o le fa'aogaina o ata fa'ate'aina i le ulutala e ono malepe ona ua tatou le toe fa'aogaina ni va'a. E fa'amuamua mea fa'afefete, ae fa'atasi ai ma le flexbox e le o toe iai. Fa'afou au ata fa'ate'a e o'o mai pe a mae'a fa'ailoga fa'apena e fa'aleleia.
  • O le remotefilifiliga (lea e mafai ona faʻaaogaina e otometi ai le utaina ma tui i fafo atu o mea i totonu o se auala) ma le loaded.bs.modalmea na tupu tutusa na aveesea. Matou te fautua atu nai lo le faʻaaogaina o faʻataʻitaʻiga a le tagata o tausia poʻo se faʻavae faʻamaumauga, pe valaʻau oe i le jQuery.load .
  • Toe tusi vaega i le flexbox.
  • Toeititi lava tu'u uma >tagata filifilia mo sitaili faigofie e ala i vasega e le'i tu'u.
  • Nai lo le filifilia o HTML-fa'apitoa pei o .nav > li > ale , matou te fa'aogaina vasega eseese mo .navs, .nav-items, ma .nav-links. Ole mea lea e fa'afaigofie ai lau HTML a'o fa'aopoopoina le fa'alauteleina.

O le navbar ua uma ona toe tusia i le flexbox faʻatasi ai ma le faʻaleleia atili o le lagolago mo le faʻaogaina, tali, ma le faʻapitoa.

  • Ua fa'aoga nei amioga tali navbar i le .navbarvasega e ala i le mana'omia .navbar-expand-{breakpoint} i le mea e te filifilia ai le mea e pa'u ai le navbar. I le taimi muamua, o se suiga Fa'aitiitia le fesuisuia'i ma mana'omia le toe fa'aopoopo.
  • .navbar-defaultua .navbar-light, e ui ina .navbar-darktumau pea. O se tasi o nei mea e manaʻomia i luga ole navbar taʻitasi. Peitai, o nei vasega ua le toe seti background-colors; nai lo le na'o latou aafia ai color.
  • Navbars ua manaʻomia nei se taʻutinoga faʻamatalaga o se ituaiga. Filifili mai a matou mea aoga i tua ( .bg-*) pe seti oe lava i vasega malamalama / faʻafefe i luga mo faʻalavelave faʻapitoa .
  • Tu'u atu i sitaili flexbox, ua mafai nei e navbars ona fa'aogaina mea fa'aoga flexbox mo filifiliga fa'aoga faigofie.
  • .navbar-toggleo le taimi nei .navbar-togglerma e eseese sitaili ma faʻailoga i totonu (leai se tolu <span>s).
  • Tu'u .navbar-formatoa le vasega. Ua le toe manaomia; nai lo lena, na'o le fa'aoga .form-inlinema fa'aoga mea fa'aoga pito i tua pe a mana'omia.
  • Navbars e le o toe aofia ai margin-bottompe border-radiusfa'aletonu. Faʻaaoga mea faʻaoga pe a manaʻomia.
  • O faʻataʻitaʻiga uma e faʻaalia ai navbars ua faʻafouina e aofia ai faʻailoga fou.

Itulautusi

  • Toe tusi vaega i le flexbox.
  • O vasega manino ( .page-item, .page-link) ua mana'omia nei i suli o .paginations
  • Tu'u .pageratoa le vaega ona e la'ititi la'ititi nai lo fa'amau fa'asinomaga.
  • O se vasega manino, .breadcrumb-item, ua manaomia nei i luga o le fanau a .breadcrumbs

Fa'ailoga ma pine

  • Fa'atasi .labelma .badgefa'a'ese'ese mai le <label>elemene ma fa'afaigofie vaega fa'atatau.
  • Fa'aopoopo .badge-pille fai ma suiga mo foliga lapotopoto "pill".
  • Ua le toe otometi ona opeopea pine i vaega lisi ma isi vaega. E manaʻomia nei vasega faʻaoga mo lena mea.
  • .badge-defaultua pa'u ma .badge-secondaryfa'aopoopo e fa'afetaui vasega fa'avasega vaega fa'aaoga i se isi mea.

Panel, laititi, ma vaieli

Pa'u atoa mo le vaega o kata fou.

Panela

  • .panelia .card, ua fausia nei i le flexbox.
  • .panel-defaultaveese ma leai se sui.
  • .panel-groupaveese ma leai se sui. .card-groupe le o se sui, e ese.
  • .panel-headingia.card-header
  • .panel-titleia .card-title. Fa'alagolago i foliga e mana'omia, atonu e te mana'o fo'i e fa'aoga elemene ulutala po'o vasega (fa'ata'ita'iga <h3>, .h3) po'o elemene mata'utia po'o vasega (fa'ata'ita'iga <strong>, <b>, .font-weight-bold). Manatua o le .card-title, e ui ina tutusa lona igoa, e maua ai se foliga ese nai lo .panel-title.
  • .panel-bodyia.card-body
  • .panel-footeria.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ma .panel-dangerua lafoa'i mo .bg-, .text-, ma .bordermea aoga na gaosia mai le matou $theme-colorsfaafanua Sass.

Alualu i luma

  • Suia .progress-bar-*vasega fa'apotopotoga i .bg-*mea aoga. Mo se faataitaiga, class="progress-bar progress-bar-danger"avea ma class="progress-bar bg-danger".
  • Suia .activemo fa'agasolo fa'agaioiga pa ma .progress-bar-animated.
  • Toe fa'aleleia le vaega atoa e fa'afaigofie ai le mamanu ma le fa'avasegaina. E itiiti a matou sitaili mo oe e faʻamalo, faʻailoga fou, ma ata fou.
  • O CSS uma ua le fa'anofo ma toe fa'aigoaina, fa'amautinoa o vasega ta'itasi o lo'o fa'amuamua ile .carousel-.
    • Mo aitema carousel, .next, .prev, .left, ma .rightle taimi nei .carousel-item-next, .carousel-item-prev, .carousel-item-left, ma .carousel-item-right.
    • .itemo lea foi .carousel-item.
    • Mo fa'atonuga muamua/sosoo, .carousel-control.rightma .carousel-control.lefto lo'o i ai nei .carousel-control-nextma .carousel-control-prev, o lona uiga latou te le toe mana'omia se vasega fa'avae fa'apitoa.
  • Ave'ese uma sitaili tali, fa'atali i mea aoga (fa'ata'ita'iga, fa'aali fa'amatalaga i luga o va'aiga fa'apitoa) ma sitaili masani pe a mana'omia.
  • Ave'ese fa'asili ata mo ata o lo'o i aitema carousel, fa'agasolo ile aoga.
  • Tweak le Carousel faʻataʻitaʻiga e aofia ai le faʻailoga fou ma sitaili.

Laupapa

  • Ave'esea le lagolago mo sitaili laulau fa'amoega. O sitaili laulau uma ua tuufaasolo mai i le v4 mo tagata filifilia faigofie.
  • Fa'aopoopo le laulau fa'afeagai.

Utilities

  • Fa'aali, natia, ma isi mea:
    • Fa'atino mea fa'aoga fa'aaliga e tali atu (fa'ata'ita'iga, .d-nonema le d-{sm,md,lg,xl}-none).
    • Fa'ato'a le tele o .hidden-*mea aoga mo mea fa'aaliga fou . Mo se faʻataʻitaʻiga, nai lo le .hidden-sm-up, faʻaaoga .d-sm-none. Toe fa'aigoa .hidden-printmea aoga e fa'aoga ai le fa'ailoga fa'aigoa fa'ailoga. Fa'amatalaga atili i lalo ole vaega Responsive utilities o lenei itulau.
    • Fa'aopoopoina .float-{sm,md,lg,xl}-{left,right,none}vasega mo fa'a'au'au fa'afofoga ma aveese .pull-leftma .pull-righttalu ai ua fa'atuputeleina i .float-leftma .float-right.
  • Ituaiga:
    • Fa'aopoopoina suiga tali mai i a matou vasega fa'aogaina o tusitusiga .text-{sm,md,lg,xl}-{left,center,right}.
  • Fa'atonuga ma avanoa:
  • Clearfix fa'afouina e fa'amalo ai le lagolago mo su'esu'ega tuai.

Fa'atauga fa'afefiloi muamua

Bootstrap 3's vendor prefix mixins, lea na faʻaumatia i le v3.2.0, ua aveesea i le Bootstrap 4. Talu ai matou te faʻaaogaina Autoprefixer , latou te le toe manaʻomia.

Ave'esea fa'afefiloi nei : 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-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Fa'amaumauga

O a matou faʻamaumauga na maua foi se faʻaleleia i luga o le laupapa. O le pito i lalo:

  • O loʻo matou faʻaogaina pea Jekyll, ae o loʻo i ai a matou plugins i le faʻafefiloi:
    • bugify.rbe fa'aaogaina e lisi lelei ai fa'amaumauga i luga o la matou itulau fa'amau su'esu'e .
    • example.rbo se tui masani o le highlight.rbfaʻapipiʻi faʻaletonu, faʻatagaina mo faʻataʻitaʻiga faigofie-faʻaogaina tulafono.
    • callout.rbose tu'uga tu'ufa'atasi tutusa o lena, ae ua mamanuina mo a tatou fa'amatalaga fa'apitoa fa'amaumauga.
    • jekyll-toc o loʻo faʻaaogaina e gaosia ai la matou laulau o mea.
  • O mea uma o faʻamaumauga ua toe tusia i Markdown (nai lo le HTML) mo le faʻafaigofieina o le faʻatonutonu.
  • Ua toe fa'atulagaina itulau mo mataupu faigofie ma se fa'atonuga fa'alatalata.
  • Na matou siitia mai le CSS masani i le SCSS e faʻaoga lelei ai suiga a Bootstrap, faʻafefiloi, ma isi mea.

Uunaiga tali

O @screen-fesuiaiga uma ua aveese i le v4.0.0. Fa'aaoga le media-breakpoint-up(), media-breakpoint-down(), po'o le media-breakpoint-only()Sass mixins po'o le $grid-breakpointsfa'afanua Sass nai lo.

O a matou vasega fa'aoga fa'aoga ua tele lava ina ave'esea ona o displaymea fa'aoga manino.

  • O vasega .hiddenma .showua aveese ona ua fete'ena'i ma jQuery's $(...).hide()ma $(...).show()metotia. Nai lo lena, taumafai e fesuia'i le [hidden]uiga pe fa'aoga sitaili fa'a-inline pei style="display: none;"ma le style="display: block;".
  • Ua ave'esea uma .hidden-vasega, se'i vagana mea faigaluega lolomi ua toe fa'aigoaina.
    • Aveese mai le 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
    • Aveese mai le 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
  • O mea faigaluega lolomi e le toe amata ile .hidden-po'o le .visible-, ae o le .d-print-.
    • Igoa tuai: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Vasega fou: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Nai lo le fa'aogaina o .visible-*vasega manino, e te fa'aalia se elemene i le na'o le le natia i lena lau tele. E mafai ona e tu'ufa'atasia le .d-*-nonevasega e tasi ma le .d-*-blockvasega e tasi e fa'aalia ai se elemene i luga o se vaeluaga o le tele o lau (fa'ata'ita'iga .d-none.d-md-block.d-xl-none, fa'aalia le elemene na'o masini feololo ma tetele).

Manatua o suiga i le laina vaeluaga i le v4 o lona uiga e tatau ona e alu i le tasi vaeluaga lapoʻa e ausia ai iʻuga tutusa. O vasega fa'aoga fou e tali mai e le o taumafai e fa'aogaina mataupu e le masani ai pe a le mafai ona fa'aalia le va'aia o se elemene e pei o se va'aiga vavalalata tasi o le tele o va'aiga; e te mana'omia le fa'aogaina o le CSS masani i ia tulaga.