Ho fallela ho v4

Bootstrap 4 ke mongolo o moholo oa morero oohle. Liphetoho tse hlokomelehang ka ho fetesisa li akaretsoa ka tlase, 'me li lateloe ke liphetoho tse tobileng ho likarolo tse amehang.

Liphetoho tse tsitsitseng

Ho tloha ho Beta 3 ho ea ho tokollo ea rona ea v4.0 e tsitsitseng, ha ho na liphetoho tse robehileng, empa ho na le liphetoho tse hlokomelehang.

Khatiso

• Lisebelisoa tse tsitsitseng tsa khatiso tse robehileng. Pele, ho sebelisa .d-print-*sehlopha ho ne ho tla senya sehlopha sefe kapa sefe ka tšohanyetso .d-*. Hona joale, li tsamaisana le lisebelisoa tse ling tsa rona tsa pontšo 'me li sebetsa feela ho mecha ea phatlalatso ( @media print).

• E atolositse lisebelisoa tse fumanehang tsa khatiso ho tsamaisana le lisebelisoa tse ling. Beta 3 le ho feta ba ne ba na le block, inline-block, inline, le none. V4 e tsitsitseng e ekelitsoe flex, inline-flex, table, table-row, le table-cell.

• Ponahalo e sa fetoheng ea ho hatisa libatli kaofela ka mefuta e mecha ea khatiso e hlakisang @page size.

Beta 3 e fetoha

Le ha Beta 2 e bone boholo ba liphetoho tsa rona tse robehileng nakong ea beta, empa re ntse re na le tse 'maloa tse hlokang ho rarolloa tokollong ea Beta 3. Liphetoho tsena li sebetsa haeba u ntse u ntlafatsa ho Beta 3 ho tsoa ho Beta 2 kapa mofuta ofe kapa ofe oa khale oa Bootstrap.

Tse fapaneng

• E tlositse mofuta o sa sebelisoeng $thumbnail-transition. Re ne re sa fetole letho, kahoo e ne e le khoutu e eketsehileng feela.
• Sephutheloana sa npm ha se sa kenyelletsa lifaele tse ling ntle le mohloli oa rona le lifaele tsa dist; haeba u ne u itšetlehile ka tsona 'me u ntse u sebelisa mangolo a rona ka node_modulesfoldara, u lokela ho fetola mokhoa oa hau oa ho sebetsa.

Mefuta

• Ngola hape li-checkbox le liea-le-moea tse tloaelehileng. Hona joale, ka bobeli ba na le sebopeho sa HTML se ts'oanang (ka ntle <div>le ngoan'eno <input>le <label>) le mekhoa e tšoanang ea sebopeho (e behiloeng ka mokhoa o sa feleng, e lumellanang le sehlopha sa modifier). Sena se re fa monyetla oa ho etsa setaele ho latela boemo ba tlhahiso, ho nolofatsa ts'ehetso bakeng sa disabledtšobotsi (eo pele e neng e hloka sehlopha sa batsoali) le ho ts'ehetsa hamolemo netefatso ea foromo.

  E le karolo ea sena, re fetotse CSS bakeng sa ho laola li-multiple background-images ho li-boxbox tsa liforomo tse tloaelehileng le liea-le-moea. Pejana, .custom-control-indicatorntho e neng e se e tlositsoe e ne e na le 'mala oa bokamorao, gradient le letšoao la SVG. Ho ikamahanya le maemo a ka morao ho ne ho bolela ho khutlisa tseo kaofela nako le nako ha u ne u hloka ho fetola e le 'ngoe. Hona joale, re na .custom-control-label::beforele ho tlatsa le gradient le ho .custom-control-label::aftersebetsana le aekhone.

  Ho etsa tlhahlobo e ikhethileng ka har'a marang-rang, eketsa .custom-control-inline.

• Sekhetho se ntlafalitsoeng bakeng sa lihlopha tse thehiloeng ho likonopo. Sebakeng [data-toggle="buttons"] { }sa setaele le boits'oaro, re sebelisa datatšobotsi feela bakeng sa boits'oaro ba JS mme re itšetleha ka sehlopha se secha .btn-group-togglebakeng sa setaele.

• E tlositsoe .col-form-legendmolemong oa ntlafatso e nyane .col-form-label. Ka tsela ena .col-form-label-sm'me .col-form-label-lge ka sebelisoa ho <legend>likarolo ka bonolo.

• Litlhahiso tsa faele tse tloahelehileng li fumane phetoho ho mofuta oa bona oa $custom-file-textSass. Ha e sa le 'mapa oa Sass o behiloeng sehlaheng,' me joale o na le khoele e le 'ngoe feela - Browsekonopo kaha ke eona feela ntho ea pseudo e hlahisoang ke Sass ea rona. Mongolo Choose filejoale o tsoa ho .custom-file-label.

Kena lihlopha

• Li-addons tsa lihlopha tsa li-input li se li totobalitse ho beoa ha tsona ho ipapisitse le kenyeletso. Re theohile .input-group-addon'me .input-group-btnbakeng sa lihlopha tse peli tse ncha, .input-group-prependle .input-group-append. O tlameha ho sebelisa sehlomathiso ka ho hlaka kapa ho etsa esale pele hona joale, o nolofatsa boholo ba CSS ea rona. Ka har'a append kapa prepend, beha likonopo tsa hau kamoo li neng li tla ba teng kae kapa kae, empa thatela mongolo ka .input-group-text.

• Mekhoa ea ho netefatsa e se e tšehetsoa, ​​joalo ka lintho tse kenyellelitsoeng tse ngata (leha u ka netefatsa kenyeletso e le 'ngoe feela sehlopheng ka seng).

• Litlelase tsa boholo li tlameha ho ba ho motsoali .input-groupeseng likarolo tsa sebopeho sa motho ka mong.

Beta 2 e fetoha

Ha re ntse re le beta, re ikemiselitse ho se be le liphetoho tse robehileng. Leha ho le joalo, lintho ha li tsamaee kamoo ho neng ho reriloe kateng. Ka tlase ke liphetoho tse bohlokoa tseo u lokelang ho li hopola ha u tloha Beta 1 ho ea ho Beta 2.

Ho qhetsola

• E tlositsoe $badge-colorho feto-fetoha le tšebeliso ea eona ho .badge. Re sebelisa tšebetso ea ho bapisa mebala ho khetha e coloripapisitseng le background-color, kahoo ho feto-fetoha ha ho hlokahale.
• grayscale()Mosebetsi o rehelletsoeng gray()ho qoba ho senya khohlano le sefe ea tlhaho sa CSS grayscale.
• E reheletsoe bocha .table-inverse, .thead-inverse, le .thead-defaultho .*-darkle .*-light, tse tsamaellanang le merero ea rona ea mebala e sebelisoang libakeng tse ling.
• Litafole tse arabelang joale li hlahisa lihlopha bakeng sa sebaka se seng le se seng sa marang-rang. Sena se tloha ho Beta 1 ka hore .table-responsiveeo esale u e sebelisa e tšoana le .table-responsive-md. Joale o ka sebelisa .table-responsivekapa .table-responsive-{sm,md,lg,xl}ha ho hlokahala.
• Ts'ehetso ea Bower e theohileng kaha molaoli oa sephutheloana o tlositsoe bakeng sa mekhoa e meng (mohlala, Yarn kapa npm). Sheba bower/bower#2298 bakeng sa lintlha.
• Bootstrap e ntse e hloka jQuery 1.9.1 kapa ho feta, empa u eletsoa ho sebelisa mofuta oa 3.x kaha li-browser tse tšehetsoeng ke v3.x ke tsona tse tšehetsoang ke Bootstrap hammoho le v3.x e na le litokiso tse ling tsa ts'ireletso.
• E tlositse sehlopha se sa sebelisoeng .form-control-label. Haeba u kile ua sebelisa sehlopha sena, e ne e le sekoaelo sa .col-form-labelsehlopha se tsepamisitseng bohareng ba <label>sona se amanang le lipeakanyo tsa libopeho tse tšekaletseng.
• E fetotse ho color-yiqtloha ho motsoako o kenyelletsang colorthepa ho ts'ebetso e khutlisetsang boleng, e u lumellang ho e sebelisa bakeng sa thepa efe kapa efe ea CSS. Ka mohlala, sebakeng sa color-yiq(#000), u tla ngola color: color-yiq(#000);.

Lintlha-khōlō

• pointer-eventsE hlahisitse tšebeliso e ncha ho li-modal. E ka ntle .modal-dialoge feta har'a liketsahalo ka pointer-events: nonemokhoa oa ho penya (ho etsa hore ho khonehe ho mamela feela .modal-backdropbakeng sa ho tobetsa leha e le efe), ebe e hanyetsana le ea sebele .modal-contentka pointer-events: auto.

Kakaretso

Mona ke lintho tse kholo tsa litekete tseo u tla batla ho li ela hloko ha u tloha v3 ho ea ho v4.

Tšehetso ea sebatli

• E theohile tšehetso ea IE8, IE9, le iOS 6. v4 hona joale ke IE10+ feela le iOS 7+. Bakeng sa libaka tse hlokang e 'ngoe ea tsona, sebelisa v3.
• E kentse tšehetso ea semmuso bakeng sa Android v5.0 Lollipop's Browser le WebView. Liphetolelo tsa pejana tsa Sebatli sa Android le WebView li lula li tšehetsoa ka mokhoa o seng molaong.

Liphetoho tsa lefats'e

• Flexbox e nolofalitsoe ke kamehla. Ka kakaretso sena se bolela ho suthela hole le ho phaphamala le ho feta ho pholletsa le likarolo tsa rona.
• Fetohile ho tloha ho Less ho ea ho Sass bakeng sa mohloli oa lifaele tsa CSS tsa rona.
• E fetotsoe ho tloha pxho ea ho remyuniti ea rona ea mantlha ea CSS, leha lipikselse li ntse li sebelisoa bakeng sa lipotso tsa media le boits'oaro ba marang-rang kaha liemahale tsa lisebelisoa ha li amehe ke boholo ba mofuta.
• Bophahamo ba fonte bo eketsehile ho tloha 14pxho 16px.
• Li-grid tse ntlafalitsoeng ho kenyelletsa khetho ea bohlano (ho sebetsana le lisebelisoa tse nyane ka 576pxtlase le ka tlase) le ho tlosa -xsinfix lihlopheng tseo. Mohlala .col-6.col-sm-4.col-md-3:.
• E fetoletse sehlooho se ikhethileng ka likhetho tse ka lokisoang ka mefuta ea SCSS (mohlala, $enable-gradients: true).
• Haha sistimi e fetotsoeng ho sebelisa letoto la lingoloa tsa npm sebakeng sa Grunt. Sheba package.jsonbakeng sa mangolo ohle, kapa projeke ea rona e balle litlhoko tsa ntlafatso ea lehae.
• Tšebeliso e sa arabeleng ea Bootstrap ha e sa tšehetsoa.
• E lahlile Customizer ea inthaneteng molemong oa litokomane tse pharalletseng tsa ho seta le meaho e ikhethileng.
• E kentse litlelase tse ngata tse ncha tsa lisebelisoa bakeng sa lipara tse tloaelehileng tsa boleng ba thepa ea CSS le likhutšoane tsa sebaka sa marang-rang / padding.

Sistimi ea grid

• E fetiselitsoe ho flexbox.
  • Ts'ehetso e ekelitsoeng bakeng sa flexbox ho li-mixins tsa grid le litlelase tse boletsoeng esale pele.
  • E le karolo ea flexbox, e kenyelelitsoe tšehetso bakeng sa lihlopha tse otlolohileng le tse tšekaletseng.
• Mabitso a sehlopha sa grid a ntlafalitsoeng le tier e ncha ea grid.
  • E kentse karolo e ncha smea grid ka tlase 768pxbakeng sa taolo e eketsehileng ea granular. Hona joale re na le xs, sm, md, lg, le xl. Sena se boetse se bolela hore boemo bo bong le bo bong bo phahamisitsoe boemong bo le bong (ka hona .col-md-6ho v3 e se .col-lg-6e le v4).
  • xslitlelase tsa grid li fetotsoe hore li se ke tsa hloka infix ho bontša ka nepo haholoanyane hore ba qala ho sebelisa mekhoa e min-width: 0seng boleng bo behiloeng ba pixel. Ho e-na le hoo .col-xs-6, ke hona joale .col-6. Li-tier tse ling tsohle tsa grid li hloka infix (mohlala, sm).
• Li-grid tsa boholo bo ntlafalitsoeng, metsoako le mefuta e fapaneng.
  • Li-gutter tsa grid joale li na le 'mapa oa Sass kahoo o ka hlakisa bophara bo khethehileng sebakeng se seng le se seng.
  • Metsoako e ntlafalitsoeng ea grid ho sebelisa motsoako oa make-col-readyprep le a make-colho beha flexle max-widthbakeng sa boholo ba kholomo ka bomong.
  • Liphetoho tse fetotsoeng tsa lipotso tsa media system le bophara ba setshelo ho ikarabella bakeng sa boemo bo bocha ba grid le ho netefatsa hore litšiea li aroloa ka 12ho lekana ka bophara ba tsona bo boholo.
  • Li-breakpoint tsa grid le bophara ba setshelo li se li sebetsoa ka limmapa tsa Sass ( $grid-breakpointsle $container-max-widths) sebakeng sa mefuta e mengata e fapaneng. Tsena li nka sebaka sa @screen-*mefuta-futa ka ho feletseng 'me li u lumella ho etsa li-tier tsa grid ka botlalo.
  • Lipotso tsa mecha ea litaba le tsona li fetohile. Sebakeng sa ho pheta-pheta liphatlalatso tsa lipotso tsa media ka boleng bo tšoanang nako le nako, joale re na le @include media-breakpoint-up/down/only. Hona joale, ho e-na le ho ngola @media (min-width: @screen-sm-min) { ... }, u ka ngola @include media-breakpoint-up(sm) { ... }.

Likaroloana

• Liphanele tse theohileng, li-thumbnails, le liliba bakeng sa karolo e ncha e akaretsang, likarete .
• E lahlile fonte ea letšoao la Glyphicons. Haeba o hloka li-icon, likhetho tse ling ke tsena:
  • mofuta o holimo oa Glyphicons
  • Litlhare
  • Font e Hlollang
  • Sheba leqephe la Eketsa bakeng sa lethathamo la mekhoa e meng. O na le litlhahiso tse ling? Ka kopo, bula taba kapa PR.
• E lahlile plugin ea Affix jQuery.
  • Re khothaletsa ho sebelisa position: sticky. Sheba HTML5 Ka kopo kena bakeng sa lintlha le likhothaletso tse khethehileng tsa polyfill. Tlhahiso e 'ngoe ke ho sebelisa @supportsmolao bakeng sa ho e sebelisa (mohlala, @supports (position: sticky) { ... })/
  • Haeba u ne u sebelisa Affix ho sebelisa mefuta e meng, e seng positionea mefuta, li-polyfill li kanna tsa se ke tsa tšehetsa nyeoe ea hau ea ts'ebeliso. Khetho e le 'ngoe bakeng sa ts'ebeliso e joalo ke laeborari ea mokha oa boraro ea ScrollPos-Styler .
• E lahlile karolo ea pager kaha e ne e le likonopo tse ikhethileng hanyane.
• E ntlafalitse hoo e batlang e le likarolo tsohle ho sebelisa likhetho tse ngata tsa lihlopha tse se nang lihlaha ho e-na le likhetho tsa bana tse khethehileng haholo.

Ka karolo

Lenane lena le totobatsa liphetoho tsa bohlokoa ka karolo lipakeng tsa v3.xx le v4.0.0.

Qala bocha

E ncha ho Bootstrap 4 ke Reboot , leqephe le lecha la setaele le hahang holim'a Normalize ka mekhoa ea rona e nang le maikutlo a itseng. Bakhethi ba hlahang faeleng ena ba sebelisa likaroloana feela - ha ho na lihlopha mona. Sena se arola mekhoa ea rona ea ho seta bocha ho tsoa mefuteng ea likarolo tsa rona bakeng sa mokhoa o tloaelehileng haholoanyane. Tse ling tsa li-reset tsa bohlokoa ka ho fetisisa tse kenyeletsang ke box-sizing: border-boxphetoho, ho tloha emho ea ho remli-unit ho li-element tse ngata, mekhoa ea lihokelo, le li-resets tsa mefuta e mengata.

Tlhaloso ea litlhaku

• E tsamaisitse lisebelisoa tsohle .text-ho _utilities.scssfile.
• E theotsoe .page-headerjoalo ka, ntle le moeli, mefuta eohle ea eona e ka sebelisoa ka lisebelisoa.
• .dl-horizontale theotsoe. Sebakeng seo, sebelisa le .rowho <dl>sebelisa lihlopha tsa kholomo ea grid (kapa li-mixins) ho eona <dt>le <dd>bana.
• Setaele se tloahelehileng <blockquote>se falletse litlelaseng - .blockquotele mofetoleli .blockquote-reverse.
• .list-inlinehona joale e hloka hore bana ba eona ba lethathamo la lintho ba be le sehlopha se secha .list-inline-itemse sebelisitsoeng ho bona.

Litšoantšo

• E reheletsoe bocha .img-responsiveho .img-fluid.
• E reheletsoe bocha .img-roundedho.rounded
• E reheletsoe bocha .img-circleho.rounded-circle

Litafole

• Hoo e ka bang maemo ohle a >mokhethoa a tlositsoe, ho bolelang hore litafole tse behiloeng sehlaheng joale li tla rua mekhoa ho tsoa ho batsoali ba bona. Sena se nolofatsa batho ba re khethang haholo le tseo re ka li khethang.
• Litafole tse arabelang ha li sa hloka ntho e phuthelang. Ho e-na le hoo, beha feela se .table-responsivenepahetseng ho <table>.
• E reheletsoe bocha .table-condensedbakeng .table-smsa tumellano.
• E kentse khetho e ncha .table-inverse.
• Liphetoho tsa lihlooho tsa tafole tse ekelitsoeng: .thead-defaultle .thead-inverse.
• E reha mabitso a litlelase tsa maemo ho ba le .table--prefix. Kahoo .active, .success, .warning, .dangerle .infoho .table-active, .table-success, le . .table-warning_.table-danger.table-info

Mefuta

• E tsamaisitsoe ho seta botjha _reboot.scssfaeleng.
• E reheletsoe bocha .control-labelho .col-form-label.
• E reheletsoe bocha .input-lgle .input-smho .form-control-lgle ho .form-control-sm, ka ho latellana.
• Litlelase tse theohileng .form-group-*molemong oa ho nolofatsa. Sebelisa .form-control-*litlelase hona joale.
• E theohile .help-block'me ea e nkela sebaka .form-textbakeng sa mongolo oa thuso oa boemo ba block. Bakeng sa mongolo oa thuso oa inline le likhetho tse ling tse feto-fetohang, sebelisa litlelase tsa utility joalo ka .text-muted.
• E theohile .radio-inlinele .checkbox-inline.
• E kopantsoe .checkboxle .radioho kena .form-checkle lihlopha tse fapaneng .form-check-*.
• Mefuta e otlolohileng e fetotsoe:
  • E lahlile .form-horizontaltlhoko ea sehlopha.
  • .form-groupha e sa sebetsa mekhoa e tsoang ho .rowmixin, kahoo .rowe se e hlokahala bakeng sa meralo ea grid e otlolohileng (mohlala, <div class="form-group row">).
  • E kentse sehlopha se secha .col-form-labelho li-labels tse theohileng bohareng tse nang le .form-controls.
  • E kenyellelitsoe tse ncha .form-rowbakeng sa meralo ea li-compact form ka lihlopha tsa grid (fapanyetsana .rowbakeng sa a .form-rowle ho tsamaea).
• Ts'ehetso ea liforomo tse kentsoeng (bakeng sa li-checkbox, li-radio, likhetho, le lintho tse kentsoeng lifaeleng).
• E nchafalitsoe .has-error, .has-warning, le .has-successlitlelase tse nang le netefatso ea liforomo tsa HTML5 ka litlelase tsa CSS :invalidle tsa :validpseudo.
• E reheletsoe bocha .form-control-staticho .form-control-plaintext.

Likonopo

• E reheletsoe bocha .btn-defaultho .btn-secondary.
• E theohile .btn-xssehlopheng ka ho felletseng kaha .btn-sme nyane haholo ho feta ea v3.
• Karolo e hlakileng ea konopo ea button.jsjQuery plugin e lahliloe. Sena se kenyelletsa mekhoa $().button(string)le $().button('reset')mekhoa. Re eletsa ho sebelisa JavaScript e tloaelehileng ho e-na le hoo, e tla ba le molemo oa ho itšoara ka tsela eo u batlang hore e be ka eona.
  • Hlokomela hore likarolo tse ling tsa plugin (likonopo tsa li-checkbox, li-radio tsa konopo, likonopo tsa toggle e le 'ngoe) li bolokiloe ho v4.
• Fetola likonopo' [disabled]ho ea :disabledkamoo IE9+ e tšehetsang :disabled. Leha ho le joalo fieldset[disabled]ho ntse ho hlokahala hobane masimo a batho ba nang le bokooa a ntse a le teng ho IE11 .

Sehlopha sa likonopo

• Ngola karolo hape ka flexbox.
• E tlositsoe .btn-group-justified. E le sebaka sa sebaka seo u ka se sebelisang <div class="btn-group d-flex" role="group"></div>e le sekoahelo se pota-potileng likarolo tse nang le .w-100.
• E ile ea theola .btn-group-xssehlopha ka ho feletseng ka ho tlosoa ha .btn-xs.
• E tlositse sebaka se hlakileng pakeng tsa lihlopha tsa likonopo ka har'a li-toolbar tsa likonopo; sebelisa lisebelisoa tsa marang-rang hona joale.
• Litokomane tse ntlafalitsoeng bakeng sa ho sebelisoa le likarolo tse ling.

Litheohelang

• Fetohile ho tloha ho bakhethoa ba batsoali ho ea ho lihlopha tse bonngoeng bakeng sa likarolo tsohle, li-modifiers, joalo-joalo.
• Mekhoa e nolofalitsoeng ea ho theoha hore e se hlole e romelloa ka metsu e shebileng holimo kapa tlase e kenyellelitsoeng lethathamong la litheolelo.
• Dropdowns e ka hahoa ka <div>s kapa <ul>s hona joale.
• Aha bocha setaele le li-markup ho fana ka tšehetso e bonolo, e hahelletsoeng kahare bakeng sa <a>lintho <button>tse theohang.
• E reheletsoe bocha .dividerho .dropdown-divider.
• Lintho tse theolelang hona joale lia hlokahala .dropdown-item.
• Li-toggles tse theohang ha li sa hloka ho hlakisa <span class="caret"></span>; hona joale ho fanoa ka boiketsetso ka CSS's ::afterho .dropdown-toggle.

Sistimi ea grid

• E kentse sebaka se secha 576pxsa marang-rang joalo ka sm, ho bolelang hore joale ho na le mekhahlelo e mehlano ( xs, sm, md, lg, le xl).
• E reha mabitso a litlelase tse arabelang tsa grid ho tloha ho ea .col-{breakpoint}-{modifier}-{size}ho .{modifier}-{breakpoint}-{size}bakeng sa litlelase tse bonolo tsa grid.
• Ho theohile litlelase tsa ho sututsa le ho hula bakeng sa litlelase tse ncha tse tsamaisoang ke flexbox order. Ka mohlala, sebakeng sa .col-8.push-4le .col-4.pull-8, u tla sebelisa .col-8.order-2le .col-4.order-1.
• E kenyellelitsoe litlelase tsa tšebeliso ea flexbox bakeng sa sistimi ea grid le likarolo.

Etsa lethathamo la lihlopha

• Ngola karolo hape ka flexbox.
• E nkeloe sebaka a.list-group-itemke sehlopha se hlakileng, .list-group-item-action, bakeng sa sehokelo sa setaele le mefuta ea likonopo tsa lintho tsa sehlopha.
• Sehlopha se ekelitsoeng .list-group-flushbakeng sa ho sebelisoa le likarete.

Modal

• Ngola karolo hape ka flexbox.
• Ka lebaka la ho falla ho flexbox, ho lokisoa ha litšoantšo tse ka sehloohong ho ka 'na ha robeha kaha ha re sa sebelisa liphaphatha. Litaba tse phaphametseng li tla pele, empa ka flexbox ha ho sa le joalo. Ntlafatsa li-icon tsa hau tsa ho leleka hore li tle ka mor'a litlotla tsa modal ho li lokisa.
• Khetho remote(e ka sebelisoang ho kenya le ho kenya litaba tsa kantle ho modal) mme loaded.bs.modalketsahalo e tsamaellanang e ile ea tlosoa. Re khothaletsa ho sebelisa template ea lehlakore la bareki kapa moralo o tlamang data, kapa ho letsetsa jQuery.load ka bouena.

Navs

• Ngola karolo hape ka flexbox.
• E lahlile hoo e batlang e le likhetho tsohle >bakeng sa setaele se bonolo ka litlelase tse se nang lihlaha.
• Sebakeng sa bakhethoa ba khethehileng ba HTML joalo ka .nav > li > a, re sebelisa litlelase tse arohaneng bakeng sa .navs, .nav-items, le .nav-links. Sena se etsa hore HTML ea hau e be bonolo haholoanyane ha e ntse e tlisa katoloso e eketsehileng.

Navbar

Navbar e ngotsoe bocha ka botlalo ka har'a flexbox ka ts'ehetso e ntlafalitsoeng bakeng sa ho tsamaisana, karabelo le ho itlhophisa.

• Boitšoaro bo arabelang ba navbar bo se bo sebelisoa .navbarsehlopheng ka tsela e hlokahalang .navbar-expand-{breakpoint} moo u khethang moo u ka phunyang navbar. Pele, sena e ne e le phetoho e fokolang mme e hloka ho khutlisetsoa morao.
• .navbar-defaulthona joale .navbar-light, le hoja .navbar-darke ntse e le joalo. E 'ngoe ea tsena e ea hlokahala sebakeng se seng le se seng sa navbar. Leha ho le joalo, lihlopha tsena ha li sa beha background-colors; ho e-na le hoo li ama feela color.
• Li-Navbar joale li hloka phatlalatso ea morao-rao ea mofuta o itseng. Khetha ho tsoa ho lits'ebeletso tsa rona tsa morao-rao ( .bg-*) kapa u ipehele ea hau ka litlelase tse bobebe/tse fapaneng tse kaholimo bakeng sa ho itloaetsa ka bohlanya .
• Ka lebaka la mekhoa ea flexbox, li-navbar joale li ka sebelisa lisebelisoa tsa flexbox bakeng sa likhetho tse bonolo tsa ho tsamaisana.
• .navbar-togglee se e le hona joale .navbar-toggler'me e na le mekhoa e fapaneng le markup ea ka hare (ha e sa le <span>s tse tharo).
• E ile ea tlohela .navbar-formtlelase ka ho feletseng. Ha e sa hlokahala; ho e-na le hoo, sebelisa feela .form-inlinele ho sebelisa lisebelisoa tsa margin ha ho hlokahala.
• Navbar ha e sa kenyelletsa margin-bottomkapa border-radiuska ho sa feleng. Sebelisa lisebelisoa ha ho hlokahala.
• Mehlala eohle e nang le li-navbar e nchafalitsoe ho kenyelletsa li-markup tse ncha.

Pagination

• Ngola karolo hape ka flexbox.
• Lihlopha tse hlakileng ( .page-item, .page-link) li se li hlokoa ho litloholo tsa .paginations
• E lahlile .pagerkarolo ka botlalo kaha e ne e le li-buttons tse ikhethileng tsa kemiso.

Li-breadcrumbs

• Sehlopha se hlakileng, .breadcrumb-item, se hlokahala joale ho litloholo tsa .breadcrumbs

Li-labels le libeche

• E reheletsoe hape .labelho .badgeho nyenyefatsa ho tsoa ho <label>element.
• E lahlile .badgekarolo ena kaha e ne e batla e ts'oana le lileibole. Sebelisa .badge-pillmofetoleli hammoho le karolo ea laibole bakeng sa chebahalo eo e chitja.
• Libeche ha li sa phaphamala ka bo eona ka lihlopha tsa lenane le likarolo tse ling. Hona joale litlelase tsa utility lia hlokahala bakeng sa seo.
• .badge-defaulte lahliloe 'me .badge-secondaryea eketsoa ho lihlopha tsa ho fetola likarolo tse sebelisoang libakeng tse ling.

Liphanele, li-thumbnails, le liliba

E theotsoe ka botlalo bakeng sa karolo e ncha ea karete.

Liphanele

• .panelho .card, hona joale e hahiloeng ka flexbox.
• .panel-defaulte tlositsoe mme ha ho na sebaka.
• .panel-groupe tlositsoe mme ha ho na sebaka. .card-groupha se phetoho, e fapane.
• .panel-headingho.card-header
• .panel-titleho .card-title. Ho ipapisitse le chebahalo e lakatsehang, u kanna ua batla ho sebelisa likarolo tsa sehlooho kapa litlelase (mohlala <h3>, .h3) kapa likarolo kapa litlelase tse sebete (mohlala <strong>, , <b>, .font-weight-bold). Hlokomela hore .card-title, leha e rehiloe ka tsela e tšoanang, e hlahisa chebahalo e fapaneng le .panel-title.
• .panel-bodyho.card-body
• .panel-footerho.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, 'me .panel-dangerli lahliloe bakeng sa .bg-, .text-, le .borderlisebelisoa tse hlahisoang ho tsoa $theme-colors'mapeng oa rona oa Sass.

Tsoelo-pele

• .progress-bar-*Litlelase tsa maemo a fetotsoeng ka .bg-*lisebelisoa. Ka mohlala, class="progress-bar progress-bar-danger"e fetoha class="progress-bar bg-danger".
• E nkeloe sebaka .activebakeng sa libaka tsa tsoelopele tse nang le .progress-bar-animated.

Carousel

• E ntlafalitse karolo eohle ho nolofatsa moralo le setaele. Re na le mekhoa e fokolang eo u ka e fetisang, matšoao a macha le litšoantšo tse ncha.
• Li-CSS tsohle ha li etsoe lihlaha le ho rehoa bocha, ho netefatsa hore sehlopha ka seng se ngotsoe ka .carousel-.
  • Bakeng sa lintho tsa carousel, .next, .prev, .left, le .righthona joale .carousel-item-next, .carousel-item-prev, .carousel-item-left, le .carousel-item-right.
  • .itemle hona joale .carousel-item.
  • Bakeng sa litaolo tsa pele/tse latelang, .carousel-control.right'me .carousel-control.leftke hona joale .carousel-control-nextle .carousel-control-prev, ho bolelang hore ha li sa hloka sehlopha se itseng sa motheo.
• E tlositse setaele sohle se arabelang, ho sebelisa lisebelisoa (mohlala, ho bonts'a mantsoe a qotsitsoeng libakeng tse itseng tsa pono) le mekhoa e tloaelehileng ha ho hlokahala.
• Litlaleho tse tlositsoeng tsa litšoantšo tsa lintho tsa carousel, tse lebisang ho lits'ebeletso.
• E ntlafalitse mohlala oa Carousel ho kenyelletsa letšoao le mekhoa e mecha.

Litafole

• Ho tlositsoe tšehetso bakeng sa litafole tse entsoeng ka setaele. Mefuta eohle ea litafole e se e futsitsoe ho v4 bakeng sa bakhethoa ba bonolo.
• E kentse mofuta o fapaneng oa tafole.

Lisebelisoa

• Hlahisa, e patiloe, le tse ling:
  • E entse hore lisebelisoa tsa ponts'o li arabele (mohlala, .d-nonele d-{sm,md,lg,xl}-none).
  • E lahlile bongata ba .hidden-*lisebelisoa bakeng sa lisebelisoa tse ncha tsa pontšo . Ka mohlala, sebakeng sa .hidden-sm-up, sebelisa .d-sm-none. E reha .hidden-printlisebelisuoa bocha ho sebelisa sebopeho sa ho reha mabitso. Lintlha tse ling tlasa karolo ea Lisebelisuoa tse Arabang leqepheng lena.
  • Litlelase tse ekelitsoeng .float-{sm,md,lg,xl}-{left,right,none}bakeng sa liphaphatha tse arabelang le ho tlosoa .pull-left, .pull-rightkaha ha li na thuso .float-leftho .float-right.
• Mofuta:
  • E kenyellelitse liphapang tse arabelang litlelaseng tsa rona tsa tlhophiso ea mongolo .text-{sm,md,lg,xl}-{left,center,right}.
• Ho tsamaisana le sebaka:
  • E kentse lisebelisoa tse ncha tse arabelang le tsa ho palama mahlakoreng 'ohle, hammoho le li-shorthand tse otlolohileng le tse tšekaletseng.
  • Keketso ea likepe tsa lisebelisoa tsa flexbox .
  • E theotsoe .center-blocksehlopheng se secha .mx-auto.
• Clearfix e ntlafalitsoe ho theola tšehetso bakeng sa mefuta ea khale ea sebatli.

Metsoako ea pele ea barekisi

Bootstrap 3's vendor prefix mixins, e neng e theohile ho v3.2.0, e tlositsoe Bootstrap 4. Kaha re sebelisa Autoprefixer , ha e sa hlokahala.

E tlositse metsoako e latelang :, 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

Litokomane

Litokomane tsa rona le tsona li ile tsa ntlafatsoa hohle. Mona ke tlase tlase:

• Re ntse re sebelisa Jekyll, empa re na le li-plugins motsoakong:
  • bugify.rbe sebelisoa ho thathamisa likenyo tse leqepheng la rona la liphoso tsa sebatli .
  • example.rbke fereko e tloaelehileng ea highlight.rbplugin ea kamehla, e lumellang hore ho be bonolo ho sebetsana le khoutu ea mohlala.
  • callout.rbke fereko e tšoanang le eo, empa e etselitsoe li-callouts tsa rona tse khethehileng.
  • markdown-block.rbe sebelisetsoa ho fana ka linepe tsa Markdown ka har'a likarolo tsa HTML joalo ka litafole.
  • jekyll-toc e sebelisoa ho hlahisa lethathamo la litaba tsa rona.
• Litaba tsohle tsa litokomane li ngotsoe hape ho Markdown (ho e-na le HTML) bakeng sa ho hlophisa habonolo.
• Maqephe a hlophisitsoe bocha bakeng sa litaba tse bonolo le sehlopha sa maemo a holimo se atamelehang.
• Re tlohile ho CSS e tloaelehileng ho ea ho SCSS ho nka monyetla ka botlalo ka mefuta e fapaneng ea Bootstrap, metsoako, le tse ling.

Lisebelisoa tse arabelang

Liphetoho tsohle @screen-li tlositsoe ho v4.0.0. Sebelisa metsoako ea media-breakpoint-up(), media-breakpoint-down(), kapa media-breakpoint-only()Sass kapa $grid-breakpoints'mapa oa Sass ho e-na le hoo.

Litlelase tsa rona tse arabelang li tlositsoe haholo molemong oa displaylits'ebeletso tse hlakileng.

• The .hiddenle .showlitlelase li tlositsoe hobane li hanana le jQuery's $(...).hide()le $(...).show()mekhoa. Ho e-na le hoo, leka ho fetola [hidden]tšobotsi kapa sebelisa mekhoa e ka har'a marang-rang joaloka style="display: none;"le style="display: block;".
• Lihlopha tsohle .hidden-li tlositsoe, ntle le lisebelisoa tsa khatiso tse fetoletsoeng.
  • E tlositsoe ho 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
  • E tlositsoe ho li-alphas tsa v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Lisebelisoa tsa khatiso ha li sa qala ka .hidden-kapa .visible-, empa ka .d-print-.
  • Mabitso a khale: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Lihlopha tse ncha: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Sebakeng sa ho sebelisa litlelase tse hlakileng .visible-*, o etsa hore ntho e bonahale ka ho se e pate ka boholo ba skrineng. O ka kopanya .d-*-nonesehlopha se le seng le sehlopha se le seng .d-*-blockho bonts'a ntho ka nako e itseng feela ea boholo ba skrine (mohlala, .d-none.d-md-block.d-xl-nonee bonts'a ntho ka lisebelisoa tse mahareng le tse kholo feela).

Hlokomela hore liphetoho ho li-breakpoints tsa grid ho v4 li bolela hore u tla hloka ho ea sebakeng se le seng se seholo ho fihlela sephetho se tšoanang. Likarolo tse ncha tse arabelang ha li leke ho amohela maemo a sa tloaelehang haholo moo ponahalo ea element e ke keng ea hlahisoa e le mefuta e le 'ngoe ea boholo ba sebaka sa pono; o tla hloka ho sebelisa CSS ea tloaelo maemong a joalo.