in English

Migrate amin'ny v4

Bootstrap 4 dia fanoratana lehibe amin'ny tetikasa manontolo. Ny fiovana misongadina indrindra dia fintinina etsy ambany, arahin'ny fanovana manokana kokoa amin'ireo singa mifandraika.

Fiovana maharitra

Mifindra avy amin'ny Beta 3 mankany amin'ny famoahana v4.x stable, tsy misy fiovana manapaka, fa misy fiovana miavaka.

pirinty natao tamin'ny

  • Namboarina ny fitaovana fanontana simba. Teo aloha, ny fampiasana .d-print-*kilasy iray dia tsy nampoizina handresena .d-*kilasy hafa. Ankehitriny, mifanandrify amin'ny fitaovana fampirantiana hafa izy ireo ary mihatra amin'io haino aman-jery io ihany ( @media print).

  • Fampiharana fampirantiana pirinty azo ampiasaina mba hifanaraka amin'ny fitaovana hafa. Beta 3 no ho miakatra ihany no nanana block, inline-block, inline, ary none. Stable v4 nampiana flex, inline-flex, table, table-rowary table-cell.

  • Fandikana mialoha fanontana raikitra manerana ny navigateur miaraka amin'ny fomba fanontana vaovao izay mamaritra ny @page size.

Beta 3 fiovana

Raha ny Beta 2 dia nahita ny ampahany betsaka tamin'ny fiovana rava nandritra ny dingana beta, saingy mbola manana vitsivitsy izay tokony hodinihina amin'ny famoahana Beta 3 izahay. Mihatra ireo fanovana ireo raha manavao amin'ny Beta 3 avy amin'ny Beta 2 na dikan-teny taloha an'ny Bootstrap ianao.

SAMIHAFA

  • Nesorina ny $thumbnail-transitionfari-piainana tsy ampiasaina. Tsy namindra na inona na inona izahay, ka code fanampiny fotsiny ilay izy.
  • Ny fonosana npm dia tsy misy rakitra hafa ankoatra ny rakitra loharano sy dist; raha miantehitra amin'izy ireo ianao ary mampiasa ny scripty amin'ny alàlan'ny node_moduleslahatahiry, dia tokony hampifanaraka ny fizotranao ianao.

teny

  • Avereno soratana ny boaty sy radio mahazatra sy mahazatra. Ankehitriny, samy manana firafitry HTML mifanandrify (ivelany <div>miaraka amin'ny mpiray tam-po <input>sy <label>) ary ny fomba filaharana mitovy (stacked default, inline amin'ny modifier class). Izany dia ahafahantsika manamboatra ny etikety mifototra amin'ny toetran'ny fampidirana, manamora ny fanohanana ny disabledtoetra (mila kilasin'ny ray aman-dreny taloha) ary manohana tsara kokoa ny fanamarinana ny endrika.

    Ao anatin'izany dia novanay ny CSS amin'ny fitantanana background-images marobe amin'ny boaty fisavana sy radio. Teo aloha, ny singa nesorina ankehitriny .custom-control-indicatordia manana ny lokon'ny background, ny gradient ary ny kisary SVG. Ny fanamboarana ny gradient ambadika dia midika hoe manolo ireo rehetra ireo isaky ny mila manova iray monja ianao. Ankehitriny, manana .custom-control-label::beforeny famenoana sy ny gradient isika ary .custom-control-label::aftermitantana ny kisary.

    Raha hanao fisavana manokana an-tsoratra, ampio .custom-control-inline.

  • Mpifidy nohavaozina ho an'ny vondrona bokotra mifototra amin'ny fidirana. Raha tokony [data-toggle="buttons"] { }ho ny fomba sy ny fitondran-tena, dia mampiasa ny datatoetra ho an'ny JS fitondran-tena fotsiny izahay ary miantehitra amin'ny .btn-group-togglekilasy vaovao ho an'ny styling.

  • Nesorina .col-form-legendnoho ny fanatsarana kely .col-form-label. Ity fomba ity .col-form-label-smary .col-form-label-lgazo ampiasaina amin'ny <legend>singa mora foana.

  • Nahazo fiovana tamin'ny $custom-file-textfari-piadidiany Sass ny fampidirana rakitra manokana. Tsy sari-tany Sass misy akany intsony izy io ary tady iray ihany no miasa ankehitriny — ilay Browsebokotra satria io no singa pseudo tokana azo avy amin'ny Sass. Avy Choose fileamin'ny .custom-file-label.

Vondrona fampidirana

  • Ny addons vondrona fampidirana dia voafaritra manokana amin'ny fametrahana azy mifandraika amin'ny fidirana. Nidina izahay .input-group-addonary .input-group-btnho an'ny kilasy roa vaovao, .input-group-prependary .input-group-append. Tsy maintsy mampiasa apetaka na prepend ianao izao, manamora ny ankamaroan'ny CSS. Ao anatin'ny append na prepend, apetraho toy ny misy azy any amin'ny toerana hafa ny bokotra, fa aforeto amin'ny .input-group-text.

  • Ny fomba fanamarinana dia tohana ankehitriny, toy ny fampidirana maromaro (na dia azonao atao aza ny manamarina ny fampidirana iray isaky ny vondrona).

  • Ny kilasy fametahana dia tsy maintsy eo amin'ny ray aman-dreny .input-groupfa tsy amin'ny singa tsirairay.

Beta 2 fiovana

Raha ao amin'ny beta, dia mikendry ny tsy hisy fiovana manapaka. Tsy mandeha araka ny nokasaina foana anefa ny zava-drehetra. Ireto ambany ireto ny fiovana lehibe tokony hotadidina rehefa miala amin'ny Beta 1 mankany Beta 2.

Mafana

  • Variana nesorina $badge-colorsy ny fampiasana azy amin'ny .badge. Mampiasa fiasa mifanohitra amin'ny loko isika mba hifidianana colormifototra amin'ny background-color, noho izany dia tsy ilaina ny fari-piainana.
  • Fampiasa novana anarana grayscale()mba gray()hisorohana ny fifandirana amin'ny grayscalesivana teratany CSS.
  • Novana anarana .table-inverse, .thead-inverse, ary .thead-defaultto .*-darkary .*-light, mifanandrify amin'ny lokonay ampiasaina any an-kafa.
  • Mamorona kilasy ho an'ny teboka fiatoana tsirairay ny tabilao mandray andraikitra. Miala amin'ny Beta 1 ity .table-responsivesatria mitovy amin'ny .table-responsive-md. Azonao ampiasaina izao .table-responsivena .table-responsive-{sm,md,lg,xl}araka izay ilaina.
  • Nidina ny fanohanan'ny Bower satria ny mpitantana ny fonosana dia tsy ampiasaina amin'ny safidy hafa (ohatra, Yarn na npm). Jereo ny bower/bower#2298 raha mila fanazavana fanampiny.
  • Ny Bootstrap dia mbola mitaky jQuery 1.9.1 na ambony kokoa, saingy asaina mampiasa version 3.x ianao satria ny navigateur tohanan'ny v3.x no tohanan'i Bootstrap miampy ny v3.x dia manana fanamboarana fiarovana.
  • Nesorina ny .form-control-labelkilasy tsy ampiasaina. Raha nampiasa an'ity kilasy ity ianao, dia dika mitovy amin'ny .col-form-labelkilasy izay mitsangana mitsangana <label>miaraka amin'ny fampidirana azy amin'ny endrika marindrano.
  • Nanova ny color-yiqavy amin'ny mixin izay nampidirina ny colorfananana ho asa iray mamerina sanda iray, ahafahanao mampiasa azy amin'ny fananana CSS rehetra. Ohatra, raha tokony ho color-yiq(#000), dia hanoratra ianao color: color-yiq(#000);.

Zava-nisongadina

  • Nampiditra fampiasana vaovao pointer-eventsamin'ny modals. Ny ivelany .modal-dialogdia mandalo amin'ny hetsika miaraka pointer-events: noneamin'ny fikarakarana kitiho manokana (mahatonga ny fihainoana fotsiny ny .modal-backdropkitika rehetra), ary avy eo manohitra izany amin'ny tena izy .modal-contentamin'ny pointer-events: auto.

FAMINTINANA

Ireto ny entana tapakila lehibe tianao ho fantatra rehefa miala amin'ny v3 mankany v4.

Fanohanana navigateur

  • Nianjera ny fanohanana IE8, IE9, ary iOS 6. v4 dia IE10+ sy iOS 7+ ihany izao. Ho an'ny tranokala mila ny iray amin'ireo dia ampiasao ny v3.
  • Nampiana fanohanana ofisialy ho an'ny Android v5.0 Lollipop's Browser sy WebView. Ny dikan-teny teo aloha amin'ny navigateur Android sy WebView dia mbola tsy tohana amin'ny fomba ofisialy ihany.

Fiovana maneran-tany

  • Flexbox dia alefa amin'ny alàlan'ny default. Amin'ny ankapobeny izany dia midika hoe miala amin'ny mitsingevana sy bebe kokoa manerana ny singantsika.
  • Niova avy amin'ny Less ho Sass ho an'ny rakitra CSS loharano.
  • Niova pxho remtoy ny singa CSS voalohany anay, na dia mbola ampiasaina amin'ny fangatahana media sy fitondran-tena aza ny piksela satria tsy misy fiantraikany amin'ny haben'ny karazana ny seranan-tsambo.
  • Nitombo 14pxhatramin'ny 16px.
  • Nohavaozina ny ampahan-tsarimihetsika mba hanampiana safidy fahadimy (miresaka fitaovana kely kokoa 576pxsy ambany) ary nesorina -xstamin'ireo kilasy ireo ny infix. Ohatra: .col-6.col-sm-4.col-md-3.
  • Nosoloana ny lohahevitra tsy voatery misaraka amin'ny safidy azo amboarina amin'ny alàlan'ny SCSS variables (oh, $enable-gradients: true).
  • Fanamboarana rafitra nohavaozina hampiasa andian-tsoratra npm fa tsy Grunt. Jereo package.jsonny script rehetra, na ny tetik'asa readme ho an'ny filàna fampandrosoana eo an-toerana.
  • Tsy azo ampiasaina intsony ny fampiasana Bootstrap tsy mamaly.
  • Nandao ny Customizer an-tserasera ho an'ny antontan-taratasim-panamboarana midadasika kokoa sy fananganana namboarina.
  • Nampiana kilasy fampitaovana vaovao am-polony ho an'ny tsiron-tsarobidin'ny fananana CSS mahazatra sy ny hitsin-dàlana amin'ny elanelan'ny sisiny/padding.

Rafitra Grid

  • Hiverina any amin'ny flexbox.
    • Fanampiana fanampiny ho an'ny flexbox ao amin'ny mixins grid sy kilasy efa voafaritra.
    • Ao anatin'ny flexbox, misy fanohanana ny kilasy fampifanarahana mitsangana sy mitsivalana.
  • Anaran'ny kilasin'ny grid nohavaozina sy ampahan'ny grid vaovao.
    • Nampiana tsanganana vaovao smeto ambany 768pxho an'ny fanaraha-maso misimisy kokoa. Manana xs, sm, md, lgary xl. Midika koa izany fa ny tier rehetra dia tafakatra ambaratonga iray (ka .col-md-6ao amin'ny v3 izao dia .col-lg-6ao amin'ny v4).
    • xsNy kilasy grid dia novaina mba tsy hitaky ny infix mba hanehoany marina kokoa fa manomboka mampihatra fomba izy ireo min-width: 0fa tsy sanda pixel napetraka. Raha tokony ho .col-xs-6, dia izao .col-6. Mitaky ny infix (oh, sm).
  • Haben'ny grid nohavaozina, mixins ary variables.
    • Manana sarintany Sass izao ny tatatra Grid mba hahafahanao mamaritra ny sakan'ny tatatra tsirairay isaky ny tapaka.
    • Nohavaozina ny Grid mixins mba hampiasa ny make-col-readyprep mixin sy ny make-colhametraka ny flexsy max-widthho an'ny tsirairay tsanganana habe.
    • Nanova ireo teboka fangatahan'ny haino aman-jery sy ny sakan'ny kaontenera mba hijerena ny ambaratongan-tsarimihetsika vaovao ary hiantohana fa ny tsanganana dia mizara mitovy 12amin'ny sakany ambony indrindra.
    • Ny teboka tapaka sy ny sakan'ny kaontenera dia karakaraina amin'ny alàlan'ny sari-tany Sass ( $grid-breakpointssy $container-max-widths) fa tsy fari-pitsipika misaraka vitsivitsy. Ireo dia manolo @screen-*tanteraka ny fari-piainana ary mamela anao hanitsy tanteraka ny tiers grid.
    • Niova ihany koa ny fanontanian'ny media. Raha tokony hamerina ny fanambaranay momba ny fangatahan'ny haino aman-jery miaraka amin'ny sanda mitovy isaky ny mandeha izahay, dia manana izao @include media-breakpoint-up/down/only. Ankehitriny, raha tokony hanoratra @media (min-width: @screen-sm-min) { ... }ianao dia afaka manoratra @include media-breakpoint-up(sm) { ... }.

singa

  • Ny takelaka, ny thumbnail ary ny lavadrano nilatsaka ho an'ny singa vaovao rehetra, karatra .
  • Nandatsaka ny endri-tsoratra kisary Glyphicons. Raha mila kisary ianao dia misy safidy vitsivitsy:
  • Nidina ny plugin Affix jQuery.
  • Nandatsaka ny singa pager satria bokotra namboarina kely izy io.
  • Naverina naverina saika ny singa rehetra mba hampiasa mpifidy kilasy tsy misy akany kokoa fa tsy mpifidy ankizy manokana.

Amin'ny singa

Ity lisitra ity dia manasongadina fiovana lehibe amin'ny singa eo anelanelan'ny v3.xx sy v4.0.0.

Avereno indray

Vaovao amin'ny Bootstrap 4 dia ny Reboot , stylesheet vaovao izay miorina amin'ny Normalize miaraka amin'ny fomba famerenan-tsika manokana. Ireo mpifidy miseho amin'ity rakitra ity dia mampiasa singa fotsiny—tsy misy kilasy eto. Izany dia manasaraka ny fomba famerenantsika amin'ny fomba singantsika ho fomba fiasa modular kokoa. Ny sasany amin'ireo fanavaozana manan-danja indrindra ao anatin'izany dia ny box-sizing: border-boxfanovana, ny fifindran'ny singa emamin'ny remsinga maro, ny fomba fifandraisana, ary ny famerenana singa maro.

Typography

  • Nafindra tao amin'ny rakitra .text-ny fitaovana rehetra._utilities.scss
  • Nidina .page-headersatria azo ampiharina amin'ny alalan'ny fitaovana ny fomba fiasany.
  • .dl-horizontalefa nariana. Fa kosa, ampiasao sy ampiasao .rowny <dl>kilasin'ny tsanganana (na mixins) amin'ny azy <dt>sy ny <dd>ankizy.
  • Nohavaozina ny blockquotes, mamindra ny fombany avy amin'ny <blockquote>singa mankany amin'ny kilasy tokana, .blockquote. Nandao ny .blockquote-reversemodifier ho an'ny fampiasa lahatsoratra.
  • .list-inlineankehitriny dia mitaky ny hananan'ny lisitry ny lisitry ny ankizy ny kilasy vaovao .list-inline-itemampiharina amin'izy ireo.

Sary

  • Novana anarana .img-responsiveho .img-fluid.
  • Novana anarana .img-roundedho.rounded
  • Novana anarana .img-circleho.rounded-circle

latabatra

  • Saika >nesorina avokoa ny santionan'ny mpifidy, midika izany fa handova fomba avy amin'ny ray aman-dreniny ho azy ny latabatra misy akany. Izany dia manamora be ny mpifidy sy ny mety ho fanasokajiana.
  • novaina .table-condensedho .table-smamin'ny tsy fitoviana.
  • Nampiana .table-inversesafidy vaovao.
  • Nampiana loham-pejy latabatra: .thead-defaultsy .thead-inverse.
  • Novana anarana ny kilasy contextual mba hanana .table--prefix. Noho izany .active, .success, .warningary to , , , .dangerary ..info.table-active.table-success.table-warning.table-danger.table-info

teny

  • Ny singa nafindra dia miverina amin'ny _reboot.scssrakitra.
  • Novana anarana .control-labelho .col-form-label.
  • Novana anarana .input-lgsy .input-smho .form-control-lgary .form-control-sm, tsirairay avy.
  • Nandatsaka .form-group-*kilasy noho ny fahatsorana. Ampiasao .form-control-*izao ny kilasy.
  • Nariana .help-blockary nosoloana .form-textlahatsoratra fanampiana amin'ny ambaratonga sakana. Ho an'ny lahatsoratra fanampiana an-tserasera sy safidy hafa azo esorina, ampiasao ny kilasy fampiasa toy ny .text-muted.
  • Nilatsaka .radio-inlineary .checkbox-inline.
  • Mitambatra .checkboxsy .radiomiditra .form-checkary ny .form-check-*kilasy isan-karazany.
  • Endrika marindrano nohavaozina:
    • Nandao ny .form-horizontalfepetra takian'ny kilasy.
    • .form-grouptsy mampiasa fomba avy amin'ny .rowalalan'ny mixin intsony, noho izany .rowdia ilaina amin'ny fandrafetana grid horizontaly (oh, <div class="form-group row">).
    • Nampiana .col-form-labelkilasy vaovao amin'ny etikety afovoany mitsangana misy .form-controls.
    • Nampiana vaovao .form-rowho an'ny famolavolana endrika compact miaraka amin'ny kilasin'ny grid (manakalo ny anao .rowary .form-rowmandehana).
  • Fanohanana endrika mahazatra (ho an'ny boaty, radio, fifantenana, ary fampidirana rakitra).
  • Nosoloina .has-error, .has-warning, ary .has-successkilasy misy fanamarinana endrika HTML5 amin'ny alàlan'ny CSS :invalidsy :validpseudo-classes.
  • Novana anarana .form-control-staticho .form-control-plaintext.

bokotra

  • Novana anarana .btn-defaultho .btn-secondary.
  • Nidina .btn-xstanteraka ny kilasy satria .btn-smkely kokoa noho ny an'ny v3.
  • Ny endriky ny bokotra stateful an'ny button.jsplugin jQuery dia najanona. Anisan'izany ny $().button(string)sy ny $().button('reset')fomba. Manoro hevitra izahay fa hampiasa JavaScript manokana ho solon'izay, izay hahazo tombony amin'ny fitondran-tena araka ny itiavanao azy.
    • Mariho fa ny endri-javatra hafa amin'ny plugin (boaty checkboxes, radios bokotra, bokotra toggle tokana) dia voatazona ao amin'ny v4.
  • Ovay ny bokotra ' [disabled]raha :disabledmanohana ny IE9+ :disabled. Na izany aza fieldset[disabled]dia mbola ilaina ihany satria mbola misy fiara ao amin'ny IE11 ny fieldsets teratany kilemaina .

Vondrona bokotra

  • Avereno soratana amin'ny flexbox ny singa.
  • nesorina .btn-group-justified. Ho fanoloana dia azonao ampiasaina <div class="btn-group d-flex" role="group"></div>ho famonosana ny singa miaraka amin'ny .w-100.
  • Nandao ny .btn-group-xskilasy nomena ny fanesorana tanteraka ny .btn-xs.
  • Nesorina ny elanelana mibaribary eo amin'ny vondrona bokotra ao amin'ny bokotra fitaovana; mampiasa margin utility izao.
  • Fanatsarana ny antontan-taratasy ampiasaina amin'ny singa hafa.
  • Niova avy amin'ny mpifidy ray aman-dreny mankany amin'ny kilasy tokana ho an'ny singa rehetra, modifiers, sns.
  • Fomba fanalana tsotsotra mba tsy halefa miaraka amin'ny zana-tsipìka miakatra na midina mipetaka amin'ny menio midina.
  • Ny dropdowns dia azo amboarina miaraka amin'ny <div>s na <ul>s izao.
  • Namboarina indray ny fomba fidina sy ny fanamafisam-peo mba hanomezana fanohanana mora sy naorina ho an'ireo <a>entana <button>midina.
  • Novana anarana .dividerho .dropdown-divider.
  • Ilaina izao ny entana midina .dropdown-item.
  • Tsy mitaky mazava <span class="caret"></span>; ity dia omena ho azy amin'ny alàlan'ny CSS ::afteramin'ny .dropdown-toggle.

Rafitra Grid

  • Nanampy 576pxteboka fiatoana vaovao toy ny sm, midika izany fa misy ambaratonga dimy ( xs, sm, md, lg, ary xl).
  • Nanova anarana ireo kilasy mpamodika grids mandray andraikitra .col-{breakpoint}-{modifier}-{size}ho .{modifier}-{breakpoint}-{size}an'ny kilasy grid tsotra kokoa.
  • Nihena ny kilasy fanosehana sy fisintonana fanovana ho an'ny kilasy vaovao mitondra flexbox order. Ohatra, ho solon'ny .col-8.push-4and .col-4.pull-8, dia ampiasainao .col-8.order-2ary .col-4.order-1.
  • Nampiana kilasy flexbox ho an'ny rafitra sy ny singa.

Tanisao ny vondrona

  • Avereno soratana amin'ny flexbox ny singa.
  • Nosoloina a.list-group-itemkilasy mazava, .list-group-item-action, ho an'ny rohy styling sy dikan-bokotra amin'ny singa vondrona lisitra.
  • Nampiana .list-group-flushkilasy ampiasaina amin'ny karatra.
  • Avereno soratana amin'ny flexbox ny singa.
  • Raha jerena ny fifindran'ny flexbox, dia mety ho tapaka ny fampifanarahana ny kisary manilika ao amin'ny lohapejy satria tsy mampiasa mitsingevana intsony isika. Ny votoaty mitsingevana no tonga aloha, fa tsy misy intsony ny flexbox. Havaozy ny kisary fandroahanao ho avy aorian'ny lohateny modal hamboarina.
  • Nesorina ilay remotesafidy (izay azo ampiasaina hametahana sy hampidirana votoaty ivelany ho azy ao anaty modal) ary loaded.bs.modalnesorina ny hetsika mifandraika amin'izany. Manoro hevitra izahay fa hampiasa templating amin'ny lafiny mpanjifa na rafitra mamatotra data, na miantso ny jQuery.load ny tenanao.
  • Avereno soratana amin'ny flexbox ny singa.
  • Nandany saika ny >mpifidy rehetra ho an'ny fanaingoana tsotra kokoa amin'ny alàlan'ny kilasy tsy misy akany.
  • Raha tokony ho HTML-manokana mpifidy toa ny .nav > li > a, dia mampiasa kilasy misaraka ho an'ny .navs, .nav-items, ary .nav-links. Izany dia mahatonga ny HTML anao ho mora kokoa ary mitondra ny fanitarana.

Ny navbar dia naverina nosoratana tanteraka tao amin'ny flexbox miaraka amin'ny fanohanana nohatsaraina amin'ny fampifanarahana, ny fandraisana andraikitra ary ny fanamboarana.

  • Ny fitondran-tena navbar mamaly dia ampiharina amin'ny .navbarkilasy amin'ny alàlan'ny ilainao .navbar-expand-{breakpoint} izay hisafidiananao ny toerana handravana ny navbar. Teo aloha ity dia fanovana kely kokoa ary ilaina ny famerenana indray.
  • .navbar-defaultdia izao .navbar-light, na .navbar-darkdia tsy miova aza. Ny iray amin'ireo dia takiana amin'ny navbar tsirairay. background-colorNa izany aza, tsy mametraka s intsony ireo kilasy ireo ; fa tsy misy fiantraikany amin'ny tena izy ireo color.
  • Ny Navbars izao dia mitaky fanambarana ambadika amin'ny karazana sasany. Misafidiana avy amin'ny kojakoja fototra ( .bg-*) na apetraho ny anao manokana miaraka amin'ny kilasy maivana/mivadika etsy ambony ho an'ny fanamboarana adala .
  • Raha omena ny fomba flexbox, ny navbars dia afaka mampiasa fitaovana flexbox ho an'ny safidy fampifanarahana mora.
  • .navbar-toggleankehitriny .navbar-togglerary manana fomba sy marika anatiny (tsy misy telo <span>s intsony).
  • Niala .navbar-formtanteraka ny kilasy. Tsy ilaina intsony izany; fa kosa, ampiasao .form-inlinesy ampiharo fotsiny ny fampiasana margin raha ilaina.
  • margin-bottomTsy misy na amin'ny alàlan'ny default intsony ny Navbars border-radius. Ampiasao ny fitaovana ilaina raha ilaina.
  • Ny ohatra rehetra misy navbar dia nohavaozina mba hampidirana marika vaovao.

Pagination

  • Avereno soratana amin'ny flexbox ny singa.
  • Ny kilasy mazava ( .page-item, .page-link) dia takiana amin'ny taranak'i .paginations
  • Nandatsaka .pagertanteraka ny singa satria kely kokoa noho ny bokotra rindran-damina namboarina.
  • Ny kilasy mazava, .breadcrumb-item, dia takiana amin'ny taranak'i .breadcrumbs

Labels sy badge

  • Mitambatra .labelary .badgemanafoana ny <label>singa ary manatsotra ireo singa mifandraika.
  • Nampiana .badge-pillho modifier amin'ny endrika boribory "pill".
  • Tsy mandeha ho azy amin'ny vondrona lisitra sy singa hafa intsony ny badge. Ilaina izao ny kilasin'ny fitaovana ilaina amin'izany.
  • .badge-defaultdia nariana ary .badge-secondarynampiana mba hifanaraka amin'ny kilasy modifier singa ampiasaina any an-kafa.

Panels, thumbnails ary lavadrano

Nidina tanteraka ho an'ny singa karatra vaovao.

tontonana

  • .panelto .card, namboarina tamin'ny flexbox ankehitriny.
  • .panel-defaultnesorina ary tsy misy solony.
  • .panel-groupnesorina ary tsy misy solony. .card-grouptsy fanoloana fa hafa.
  • .panel-headingny.card-header
  • .panel-titleho .card-title. Miankina amin'ny endrika irina, azonao atao koa ny mampiasa singa na kilasy (oh <h3>, .h3) na singa na kilasy (oh <strong>, <b>, .font-weight-bold). Mariho fa .card-title, na dia mitovy anarana aza, dia miteraka endrika hafa noho ny .panel-title.
  • .panel-bodyny.card-body
  • .panel-footerny.card-footer
  • .panel-primary. .panel-success_ .panel-info_ .panel-warning_ .panel-danger_ .bg-_ .text-_ .border_ $theme-colors_

fandrosoana

  • .progress-bar-*Nosoloina ny kilasin'ny contextual tamin'ny .bg-*fitaovana. Ohatra, class="progress-bar progress-bar-danger"lasa class="progress-bar bg-danger".
  • Nosoloana .activebara fandrosoana animé miaraka amin'ny .progress-bar-animated.
  • Nohavaozina ny singa manontolo mba hanatsorana ny famolavolana sy ny famolavolana. Vitsy kokoa ny fomba tokony hosoloinao, tondro vaovao ary kisary vaovao.
  • Ny CSS rehetra dia tsy nasiana akany ary novana anarana, miantoka ny kilasy tsirairay miaraka amin'ny .carousel-.
    • Ho an'ny entana carousel, .next, .prev, .left, ary .rightankehitriny .carousel-item-next, .carousel-item-prev, .carousel-item-left, ary .carousel-item-right.
    • .itemizao koa .carousel-item.
    • Ho an'ny fanaraha-maso teo aloha/manaraka, .carousel-control.rightary .carousel-control.leftankehitriny .carousel-control-nextary .carousel-control-prev, midika izany fa tsy mila kilasy fototra manokana intsony izy ireo.
  • Nesorina avokoa ny fomba famaliana rehetra, nahemotra ho an'ny fitaovana ilaina (oh: mampiseho lohateny amin'ny seranan-tsambo sasany) sy fomba fanao araka izay ilaina.
  • Fanodinana sary nesorina ho an'ny sary ao amin'ny singa carousel, mihemotra amin'ny fitaovana.
  • Namboarina ny ohatra Carousel mba hampidirana marika sy fomba vaovao.

latabatra

  • Fanohanana nesorina ho an'ny latabatra misy akany misy endrika. Ny fomban'ny latabatra rehetra dia nolovaina amin'ny v4 ho an'ny mpifidy tsotra kokoa.
  • Nampiana variana latabatra inverse.

Asa vaventy

  • Asehoy, miafina ary maro hafa:
    • Namboarina ny fampiratiana fitaovana mamaly (oh, .d-noneary d-{sm,md,lg,xl}-none).
    • Nandatsaka ny ankamaroan'ny .hidden-*fitaovana ho an'ny fampiratiana vaovao . Ohatra, fa tsy .hidden-sm-up, ampiasao .d-sm-none. Novana anarana ny .hidden-printfitaovana ampiasaina amin'ny tetik'asa fanononana anarana. Fanazavana bebe kokoa eo ambanin'ny fizarana Utiliti Responsive amin'ity pejy ity.
    • Nampiana .float-{sm,md,lg,xl}-{left,right,none}kilasy ho an'ny mitsingevana mandray andraikitra sy nesorina .pull-leftary .pull-rightnoho izy ireo tsy ampy amin'ny .float-leftsy .float-right.
  • Karazana:
    • Nampiana fiovaovana mamaly ny kilasin'ny fampifanarahana lahatsoratra .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment sy elanelana:
  • Havaozina ny Clearfix mba hialana amin'ny fanohanan'ny navigateur taloha.

Mpivarotra prefix mixins

Ny mixins prefix mpivarotra Bootstrap 3 , izay tsy nampiasaina tamin'ny v3.2.0, dia nesorina tao amin'ny Bootstrap 4. Koa satria mampiasa Autoprefixer izahay , dia tsy ilaina intsony izy ireo.

Nesorina ireto mixins manaraka ireto : 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-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

tahirin-kevitra

Nahazo fanavaozana manerana ny birao ihany koa ny antontan-taratasinay. Ity ambany ity ny ambany:

  • Mbola mampiasa Jekyll izahay, saingy manana plugins ao anaty fifangaroana izahay:
    • bugify.rbdia ampiasaina amin'ny fitanisana amin'ny fomba mahomby ireo fidirana ao amin'ny pejin'ny navigateur .
    • example.rbdia fork mahazatra amin'ny highlight.rbplugin default, mamela ny fikarakarana ohatra-kaody mora kokoa.
    • callout.rbdia fork fanao mitovy amin'izany, fa natao ho an'ny antso an-tariby manokana.
    • jekyll-toc dia ampiasaina hamoronana ny lisitry ny atiny.
  • Ny votoatin'ny doka rehetra dia naverina nosoratana tao amin'ny Markdown (fa tsy HTML) mba ho mora kokoa ny fanitsiana.
  • Namboarina ho an'ny votoaty tsotra kokoa sy ambaratonga azo hatonina kokoa ny pejy.
  • Nifindra avy amin'ny CSS mahazatra mankany SCSS izahay mba hanararaotra tanteraka ny fari-piainan'ny Bootstrap, mixins, sy ny maro hafa.

Utiliti responsive

@screen-Nesorina tao amin'ny v4.0.0 ny variables rehetra . Ampiasao kosa ny media-breakpoint-up(), media-breakpoint-down(), na media-breakpoint-only()Sass mixins na ny $grid-breakpointssari-tany Sass.

Ny kilasin'ny utilitaire responsive dia nesorina tamin'ny ankapobeny ho an'ny displayfitaovana mazava.

  • Nesorina .hiddenny kilasy ary .showsatria nifanohitra tamin'ny jQuery $(...).hide()sy ny $(...).show()fomba. Andramo kosa ny manodina ny [hidden]toetra na mampiasa fomba an-tsipika toy ny style="display: none;"sy style="display: block;".
  • Ny .hidden-kilasy rehetra dia nesorina, afa-tsy ny fitaovana fanontana izay novana anarana.
    • Nesorina tamin'ny 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
    • Nesorina tamin'ny 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
  • Tsy manomboka amin'ny .hidden-na .visible-, fa amin'ny .d-print-.
    • Anarana taloha: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Kilasy vaovao: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Raha tokony hampiasa .visible-*kilasy mazava ianao dia manao singa iray ho hita amin'ny tsy fanafenana azy amin'ny haben'ny efijery. Azonao atao ny manambatra .d-*-nonekilasy iray amin'ny .d-*-blockkilasy iray mba hampisehoana singa iray raha tsy amin'ny elanelan'ny haben'ny efijery (oh: .d-none.d-md-block.d-xl-nonemampiseho ny singa amin'ny fitaovana antonony sy lehibe ihany).

Mariho fa ny fiovana amin'ny teboka tapaka amin'ny tsipika ao amin'ny v4 dia midika fa mila mandeha teboka iray lehibe kokoa ianao mba hahazoana vokatra mitovy. Ny kilasin'ny fampiasa vaovao mandray andraikitra dia tsy manandrana mametraka tranga tsy dia fahita firy izay tsy azo aseho amin'ny endrika isan-karazany amin'ny haben'ny seranan-tsambo ny fahitana singa iray; ianao kosa dia mila mampiasa CSS mahazatra amin'ny tranga toy izany.