in English

v4 nisqaman astakuspa

Bootstrap 4 nisqaqa tukuy llamk'aymanta hatun musuqmanta qillqaymi. Aswan riqsisqa tikrakuykuna uraypi resumenpi churasqa kachkan, chaymanta aswan específicos tikrakuykuna componentes relevantes kaqpi.

Cambios estables

Beta 3 kaqmanta v4.x takyasqa kacharisqaykuman kuyuspa, mana p'akiy tikraykuna kanchu, ichaqa wakin reparanapaq tikraykuna kanku.

Imprenta

  • P'akisqa impresora yanapakuykunata allichasqa. Ñawpaqqa huk claseta llamk'achispaqa .d-print-*qunqayllamanta huk claseta mana allintachu ruwanman .d-*. Kunanqa, huk qhaway yanapakuyniykuwan tupanku chaymanta chay willay mast'ariqkunamanlla ( @media print).

  • Mastarisqa tarikuq qillqana qhaway yanapakuykuna wak yanapakuykunawan tupananpaq. Beta 3 y más solo tenían block, inline-block, inline, y none. Estable v4 yapasqa flex, inline-flex, ,, tablechaymanta .table-rowtable-cell

  • Allinchasqa qillqana ñawpaq qhaway ruway maskaqkunapi musuq qillqana estilokunawan chaymanta willan @page size.

Beta 3 tikrakun

Mientras Beta 2 rikurqa aswan hatun p'akiyniyku tikraykunata beta fase kaqpi, ichaqa hinallataq huk pisikunayuq kayku chaymanta Beta 3 lluqsichiypi allichasqa kananku karqa. Kay tikraykunaqa ruwakunku sichus Beta 3 kaqman Beta 2 kaqmanta utaq mayqin ñawpaq Bootstrap kaqmanta musuqyachichkanki.

Tukuy rikchaq

  • Mana llamk'achisqa $thumbnail-transitiontikraqta hurqusqa. Manam imatapas transicionachkarqanikuchu, chaymi extra códigolla karqa.
  • npm paqueteqa manañam ima willañiqikunatapas churanchu, manataqmi ñuqaykupa pukyuta, dist nisqa willañiqikunatapas; sichus chaykunapi hapipakurqanki chaymanta scriptniyku node_modulescarpeta kaqnintakama purichichkarqanki, llamkanakunap puriyninta tikranayki tiyan.

Formas

  • Iskaynin sapanchasqa chaymanta ñawpaqmanta churasqa qhaway qutukunata chaymanta radiokunata musuqmanta qillqarqan. Kunan, iskayninku tupaq HTML estructurayuq kanku (hawa <div>wawqiwan <input>chaymanta <label>) chaymanta kikin churana estilokuna (pilasqa ñawpaqmanta, inline kaqwan tikraq clase kaqwan). Kayqa etiquetata estilo ruwayta atikunku yaykusqapa estadonpi, disabledatributopaq yanapakuyta pisiyachispa (ñawpaq huk tayta claseta mañakuspa) chaymanta aswan allin formulario chiqaqchayniyku yanapayta.

    Kaymanta huknin hina, CSS achka background-images kamachinapaq sapanchasqa formulario qhaway qutukunapi chaymanta radiokunapi tikrasqayku. Ñawpaqqa, kunan hurqusqa .custom-control-indicatorelementoqa qhipa llimp'iyuq, gradienteyuq, SVG siq'iyuq karqan. Gradiente de fondo nisqa ruwayqa llapa chaykunata sapa kuti hukllata tikranayki kaptin tikrayta munarqa. .custom-control-label::beforeKunanqa, hunt'achinapaq chaymanta gradientepaq kapuwanchik chaymanta .custom-control-label::aftericonota hapin.

    Huk sapanchasqa qhawayta chiru ukhupi ruwanapaq, yapay .custom-control-inline.

  • Yaykuy-sapanchasqa ñit'ina huñukunapaq akllaq musuqchasqa. Estilopaq [data-toggle="buttons"] { }chaymanta ruwaypaq ranti, dataatributota JS ruwanakunallapaq llamk'achiyku chaymanta musuq .btn-group-toggleclase kaqpi estilopaq hapipakuyku.

  • .col-form-legendHuk pisi allinchasqapa favorninpi hurqusqa .col-form-label. Kayhinata .col-form-label-smchaymanta elementokunapi mana sasachakuspalla .col-form-label-lgllamk'achiy atikun .<legend>

  • $custom-file-textSapanchasqa willañiqi yaykuykunaqa Sass tikraqninkupi huk tikrayta chaskirqanku . Manaña huk anidado Sass mapachu chaymanta kunan huk watiqallata kallpachan —chay Browsebotón hina chay kunan sapalla pseudo-elemento ruwasqa Sassniykumanta. Kunanqa Choose fileqillqasqaqa .custom-file-label.

Yaykuy huñukuna

  • Yaykuy huñu yapaykunaqa kunan huk yaykusqawan tupachisqa churayninpaq específicos kanku. Urmaykuyku .input-group-addonhinaspa .input-group-btniskay musuq clasekunapaq, .input-group-prependhinaspa .input-group-append. Kunanqa sut'imanta huk yapasqa utaq huk ñawpaqmanta llamk'achinayki tiyan, aswan CSSniykumanta pisiyachispa. Huk yapay utaq ñawpaqmanta churay ukhupi, ñit'inaykikunata maypipas kasqanman hina churay, ichataq qillqasqata .input-group-text.

  • Chiqaqchay estilokuna kunan yanapasqa kachkan, achka yaykunakuna hina (huk yaykunallata sapa huñupi chiqapchayta atikunki chaypas).

  • Tamaño clasekuna tayta mamapi kanan tiyan .input-groupmanataq sapan forma elementokuna kaqpichu.

Beta 2 nisqa tikrakun

Beta kaqpi kachkaspa, mana pakikuq tikrayniyuq kayta munayku. Ichaqa manan yuyaykusqanchisman hinachu imapas ruwakun. Uraypi p'akiy tikraykuna kanku yuyaypi hap'inapaq Beta 1 kaqmanta Beta 2 kaqman kuyuchkaspa.

Pakispa

  • Variables $badge-colory su uso en .badge. Huk llimp'i chiqanchay ruwayta llamk'achiyku huk akllanapaq colorchaymanta background-color, chayrayku tikraq mana necesariochu.
  • Ruwayman musuq sutichasqa CSS nativo grayscale()filtrowan gray()ch'aqwayta mana p'akinanpaq grayscale.
  • Huk sutichasqa .table-inverse, .thead-inverse, chaymanta .thead-defaultchaymanta .*-darkchaymanta .*-light, hukkunapi llamk'achisqa llimp'ikunaykuwan tupaspa.
  • Kunan kutichiq tablakuna sapa llika p'akiypaq clasekunata paqarichinku. Kayqa Beta 1 kaqmanta p'akikun chaymanta chay .table-responsiveqam llamk'achkanki aswan rikch'akuq .table-responsive-md. Kunanqa utilizawaqmi .table-responsiveotaq .table-responsive-{sm,md,lg,xl}necesitasqaykiman hina.
  • Bower yanapakuyta urmachisqa imaynachus paquete kamachiq huk alternativakuna kaqpaq (kayhina, Yarn utaq npm) manaña llamk'achisqachu. Qaway bower/bower#2298 nisqapi astawan yachanaykipaq.
  • Bootstrap jQuery 1.9.1 utaq aswan hatun kaqtapas munanraq, ichaqa yuyaychasqa kanki 3.x laya llamk'achiyta chaymanta v3.x yanapasqa maskaqkuna Bootstrap yanapakun chaymanta v3.x wakin harkasqa allichayniyuq kanku.
  • Mana llamk'achisqa .form-control-labelclaseta hurqusqa. Sichus kay clasemanta llamk'achirqanki, chayqa karqan iskay kuti .col-form-labelclasemanta chaymanta verticalmente chawpichasqa huk <label>chaymanta chaywan tinkisqa yaykuywan horizontal formulario churaykunapi.
  • color-yiqHuk mixin kaqmanta mayqinchus propiedad colorkaqwan huk llamkanaman huk chanin kutichiqman tikrasqa, mayqin CSS kaqninpaqpas llamk'achiyta saqispa. Ejemplopaq, color-yiq(#000), nisqamantaqa qelqawaqmi color: color-yiq(#000);.

Resaltadokuna

  • Modalkunapi musuq pointer-eventsllamk'ayta riqsichisqa. Hawa kaq .modal-dialogpasakun ruwaykunawan kaqwan pointer-events: noneruwasqa ñit'iy hap'inapaq (chay atikuq uyariylla kaqpi chaymanta .modal-backdropima ñit'iykunapaqpas), chaymanta contrarrestan chiqap .modal-contentkaqwan pointer-events: auto.

Pisiyachisqa

Kaypi hatun tiksi imakuna kanku mayqinkunamantachus v3manta v4man kuyuchkaspa yachayta munanki.

Navegadorpa yanapakuynin

  • IE8, IE9, iOS 6 yanapakuykunata urmachirqa. v4 kunanqa IE10+ chaymanta iOS 7+ kaqlla. Chaykunamanta mayqintapas necesitaq sitiokunapaq, v3 llamk'achiy.
  • Yanapakuy oficial Android v5.0 Lollipop kaqpa Navegador chaymanta WebView kaqpaq yapasqa. Ñawpaq Android Navegador kaqmanta chaymanta WebView kaqmanta layakuna mana oficial yanapasqalla qhipakunku.

Tukuy pachapi tikrakuykuna

  • Flexbox nisqaqa ñawpaqmanta churasqa kachkan. En general kayqa niyta munan huk kuyuy karunchakuy flotadores kaqmanta chaymanta aswanta tukuy componentesniykumanta.
  • Aswan pisi kaqmanta Sass kaqman tikrasqa pukyuta CSS willañiqiykupaq.
  • Kaymanta pxkayman tikrasqa remñawpaq CSS unidadniyku hina, ichaqa pixelkuna kunankamapas llamk'achkanku willay mast'ariykunapaq chaymanta rejilla ruwaypaq imaynachus dispositivo qhaway punkukuna mana laya sayayninwan afectasqachu.
  • Tukuy pacha qillqap sayayninqa yapakurqanmanta 14px.16px
  • Pichqa kaq akllana yapanapaq rejilla patakunata musuqyachisqa (aswan huch'uy dispositivokunata kaypi 576pxchaymanta uraypi direccionaspa) chaymanta -xschay clasekunamanta infixta hurqusqa. Ejemplo: .col-6.col-sm-4.col-md-3.
  • Sapaq akllana temata SCSS tikraqkuna kaqnintakama ruwanapaq akllanakunawan tikrasqa (kayhina, $enable-gradients: true).
  • Ruway sistema allichasqa huk serie npm scriptkuna Grunt ranti llamk'achinapaq. package.jsonLlapan scriptkuna qhaway , utaq proyectoyku readme llaqta wiñariy necesidadkunapaq.
  • Bootstrap mana kutichiq llamk'achiyninqa manaña yanapasqachu.
  • Urmachisqa internetpi Ruwachiq aswan hatun churana qillqakuna chaymanta ruwasqa ruwanakuna favorninpi.
  • Chunkakuna musuq yanapakuy clasekuna yapasqa común CSS propiedad-chani pariskunapaq chaymanta margen/padding espaciamiento llalliqkunapaq.

Sistema de rejilla

  • Flexbox nisqaman astasqa.
    • Flexboxpaq yanapakuy yapasqa grid mixins kaqpi chaymanta ñawpaqmanta riqsisqa clasekunapi.
    • Flexbox kaqpa huknin kaqnin hina, sayaq chaymanta horizontal alineación clasekunapaq yanapakuy churasqa.
  • Kunanchasqa llika clase sutikuna chaymanta musuq llika pata.
    • Aswan granular kamachiypaq uraypi musuq smrejilla pata yapasqa. 768pxKunanqa xs, sm, md, lg, xl. Kayqa niyta munantaq sapa pata huk pataman t'uqyasqa kasqanmanta (chayrayku .col-md-6v3 kaqpi kunan .col-lg-6v4 kaqpi kachkan).
    • xsrejilla clasekuna hukchasqa kanku mana infix aswan chiqan rikuchinanpaq mañanankupaq chaymanta paykuna estilokuna churayta qallarinku kaypi min-width: 0chaymanta mana huk churasqa pixel chanichu. Aswanpas .col-xs-6kunanmi .col-6. Llapan huk llika patakuna infix nisqatam munanku (kayhina, sm).
  • Rejilla sayaykuna, mixins, chaymanta variables nisqakuna musuqchasqa.
    • Rejilla canales kunan huk Sass mapayuq kanku chaymanta sapa p'akiypi canales anchos específicos kaqta niyta atikunki.
    • Kunanchasqa rejilla mixins llamk'achinapaq huk make-col-readyprep mixin chaymanta huk make-colchuranapaq flexchaymanta max-widthsapa columna sayachiypaq.
    • Tikrasqa rejilla sistema medio tapuy pakikuna chaymanta contenedor anchokuna musuq rejilla patamanta yupaypaq chaymanta columnakuna kaqlla rakisqa 12kasqankuta max anchonkupi qhawaypaq.
    • Rejilla pakikuna chaymanta waqaychana anchokuna kunan Sass mapakuna ( $grid-breakpointschaymanta $container-max-widths) kaqnintakama llamk'achisqa kanku huk makilla sapaq tikraqkunap rantinpi. Kaykunaqa @screen-*tukuyninpi tikraqkunata tikran chaymanta tukuyninpi rejilla patakunata ruwayta atikunki.
    • Medios de comunicación nisqapi tapukuykunapas cambiarunñam. Sapa kuti kikin chaniyuq willay mast'ariy tapuy willakuyniyku yapamanta ruwanaykumantaqa, kunan @include media-breakpoint-up/down/only. Kunanqa, qillqanaykimantaqa @media (min-width: @screen-sm-min) { ... }, qillqayta atinki @include media-breakpoint-up(sm) { ... }.

Componentes nisqakuna

  • Urmachisqa paneles, uchuy siq'ikuna, chaymanta pukyukuna musuq tukuy imayuq componentepaq, tarjetakuna .
  • Glyphicons nisqap siq'in qillqayninta urmachirqan. Sichus iconokuna necesitanki, wakin akllanakuna kanku:
  • Affix jQuery nisqa plugin nisqatam urmachirqa.
    • Recomendamos utilizar position: stickyen vez de. HTML5 Ama hina kaspa qillqayta qhaway detallespaq chaymanta específicos polyfill yuyaychaykunapaq. Huk yuyaychayqa huk @supportskamachiyta llamk'achinapaqmi (kayhina, @supports (position: sticky) { ... }) .
    • Sichus Affix llamk'achkanki yapa, mana positionestilokuna churanaykipaq, polillenakuna mana llamk'ana casoykita yanapanmanchu. Huk akllana chayhina llamkanakunapaq kimsa kaq ScrollPos-Styler biblioteca kaq.
  • Urmachirqa componente pager kaqmanta imaynachus esencialmente huk chhika ruwasqa botones karqa.
  • Yaqa llapa componentekuna musuqmanta ruwasqa aswan mana anidadoyuq clase akllaqkunata llamk'achinapaq aswan específico wawakuna akllaqkunap rantinpi.

Por componente

Kay lista llave tikraykunata componente kaqmanhina v3.xx chaymanta v4.0.0 kaqpura riqsichin.

Reboot

Musuq Bootstrap 4 kaqpi kachkan Reboot , huk musuq estilo raphi Normalizar kaqpi ruwan kikinchik huk chhika yuyayniyuq kutichiy estilokunaykuwan. Kay willañiqipi rikuriq akllaqkuna elementokunallatam llamk'achinku —kaypi manam clasekuna kanchu. Kayqa aswan modular ruwaypaq kutichiy estiloykumanta componente estiloykumanta t'aqakun. Wakin aswan chaniyuq kutichiykuna kay yapan box-sizing: border-boxtikray kanku, emunidadkunamanta remunidadkunaman achka elementokunapi, t'inki estilokunapi, chaymanta achka formulario elemento kutichiykunapi kuyuy.

Tipografía

  • Llapan .text-yanapakuykunata _utilities.scsswillañiqiman kuyuchisqa.
  • Urmachisqa .page-headerimaynachus estilosnin utilidades kaqnintakama churakunman.
  • .dl-horizontalurmachisqañam kachkan. Aswanpas, llamk'achiy .rowchaymanta <dl>llamk'achiy cuadrícula columna clasekuna (utaq mixins) chaymanta <dt>chaymanta <dd>wawakuna.
  • Bloqueokuna musuqmanta ruwasqa, <blockquote>elementomanta huk claseman estilonkuta kuyuchispa, .blockquote. .blockquote-reverseQillqa yanapakuykunapaq tikraqta urmachirqa .
  • .list-inlinekunan kamachin wawankuna lista elementokuna musuq .list-inline-itemclase paykunaman aplicasqa kananpaq.

Imaykuna

  • Huk sutiwan .img-responsivesutichasqa .img-fluid.
  • Renombrado .img-roundeda.rounded
  • Renombrado .img-circlea.rounded-circle

Tablas

  • Yaqa llapa >akllaqpa instanciankuna hurqusqa, niyta munan anidado tablakuna kunan kikinmanta tayta mamankumanta estilokunata herenciata chaskinqa. Kayqa anchata akllaqkunaykuta chaymanta atikuq ruwanakunaykuta pisiyachin.
  • Renombrado .table-condenseda .table-smpara consistencia.
  • Musuq .table-inverseakllanata yapasqa.
  • Tabla umalliq tikraqkuna yapasqa: .thead-defaultchaymanta .thead-inverse.
  • Contextual clasekunata .table--prefijoyuq kananpaq musuqmanta sutichasqa. Chayraykum .active, .success, .warning, .dangerhinaspa .infoa .table-active, .table-success, .table-warning, .table-dangerhinaspa .table-info.

Formas

  • Kuyuchisqa elementoqa _reboot.scsswillañiqiman kutichin.
  • Huk sutiwan .control-labelsutichasqa .col-form-label.
  • Renombrado .input-lgy .input-sma .form-control-lgy .form-control-sm, respectivamente.
  • Sencillezrayku .form-group-*clasekunata urmachirqa. .form-control-*Kunanqa chaypa rantinpi clasekunata llamk’achiy .
  • Urmachisqa .help-blockchaymanta tikrasqa .form-textpara bloque-nivel yanapakuy qillqawan. Chiru ukhupi yanapakuy qillqapaq chaymanta wak flexible akllanakunapaq, yanapakuy clasekuna hina llamk'achiy .text-muted.
  • Urmachisqa .radio-inlinehinaspa .checkbox-inline.
  • Consolidado .checkboxy .radioen .form-checky las distintas .form-check-*clases.
  • Formas horizontales nisqakuna revisasqa:
    • Clasepa .form-horizontalkamachikuynintam urmachirqa.
    • .form-groupmanaña .rowvia mixin kaqmanta estilokunata churanchu, chayrayku .rowkunan horizontal rejilla churanapaq mañakun (kayhina, <div class="form-group row">).
    • s .col-form-labelnisqawan sayaq chawpi etiquetakunaman musuq clase yapasqa ..form-control
    • Musuq yapasqa .form-rowcompacto formulario churanakunapaq rejilla clasekunawan (intercambio qampaq hukwan .rowchaymanta .form-rowriy).
  • Yapachisqa sapanchasqa formulariokuna yanapakuy (qhanakuna, radiokuna, akllanakuna chaymanta willakuy yaykuykunapaq).
  • .has-error, .has-warning, chaymanta clasekuna HTML5 .has-successformulario chiqaqchaywan CSS's :invalidchaymanta :validpseudo-clases kaqninta tikrasqa.
  • Huk sutiwan .form-control-staticsutichasqa .form-control-plaintext.

Botones

  • Huk sutiwan .btn-defaultsutichasqa .btn-secondary.
  • Urmachisqa .btn-xsclase tukuyninpi hina .btn-smproporcionalmente aswan huch'uy v3's kaqmanta.
  • jQuery plugin kaqpa estadoyuq ñit'ina ruwaynin button.jsurmachisqa. Kayqa $().button(string)chaymanta $().button('reset')métodos nisqakunatam churan. Yuyaychayku huk uchuylla JavaScript ruwasqa llamk'achiyta chaymanta, mayqinchus allinniyuq kanqa imayna munasqaykimanhina ruwayta.
    • Reparay huk ruwanakuna plugin kaqmanta (botón qhaway qutukuna, botón radiokuna, huklla-toggle botones) v4 kaqpi waqaychasqa kasqankuta.
  • Cambiar botones' [disabled]a :disabledcomo IE9+ yanapan :disabled. Ichaqa fieldset[disabled]necesarioraqmi imaraykuchus nativo mana atichisqa chakra huñukuna IE11 kaqpi pantasqaraq kasqankurayku .

Grupo de botón

  • Componente nisqawan flexbox nisqawan musuqmanta qillqay.
  • Q'ipisqa .btn-group-justified. Huk sustituto hinaqa <div class="btn-group d-flex" role="group"></div>elementokuna muyuriqpi huk p'istu hina llamk'achiy atikunki .w-100.
  • Urmachisqa .btn-group-xsclase tukuyninpi qusqa hurquy de .btn-xs.
  • Botón llamkanakunap llikankunapi ñit'ina huñukunapura sut'i rakiyta hurqusqa; kunan margen utilidadkunata llamk’achiy.
  • Huk componentekunawan llamk'anapaq allinchasqa qillqakuna.
  • Tayta akllaqkunamanta sapalla clasekunaman tikrasqa llapa componentekunapaq, tikraqkunapaq, hukkunapaqpas.
  • Simplificado urayk'aq estilokuna manaña apachinapaq wichayman utaq urayman qhawaq flechakunawan urayk'aq menúman k'askasqa.
  • <div>Urmachiykunata kunan s utaq s nisqawan ruwakunman <ul>.
  • Wakmanta ruwasqa urayk'aq estilokuna chaymanta markakuna mana sasa, ruwasqa yanapakuy qunapaq <a>chaymanta <button>sayasqa urayk'aq imakuna qunapaq.
  • Huk sutiwan .dividersutichasqa .dropdown-divider.
  • Kunanqa urayk'aq imakuna mañan .dropdown-item.
  • Urmachiy tikraykunaqa manañam huk sut'i kaqtaqa munanchu <span class="caret"></span>; kayqa kunan kikinmanta qusqa CSS's kaqnintakama ::afteron .dropdown-toggle.

Sistema de rejilla

  • Musuq 576pxllika p'akiy hina yapasqa sm, kunan pichqa llapan patakuna ( xs, sm, md, lg, chaymanta xl) kachkanku niyta munan.
  • Kutichiq llika tikraq clasekunata kaqmanta sutichasqa .col-{breakpoint}-{modifier}-{size}aswan .{modifier}-{breakpoint}-{size}sasan llika clasekunapaq.
  • Urmachisqa tanqay chaymanta aysana modificador clasekuna musuq flexbox-wan kallpachasqa orderclasekunapaq. Ejemplopaq, hinaspa nisqapa rantinpi .col-8.push-4hinaspam .col-4.pull-8servichikuwaq ..col-8.order-2.col-4.order-1
  • Yapachisqa flexbox yanapakuy clasekuna sistema de red kaqpaq chaymanta componentes kaqpaq.

Huñukunata qillqay

  • Componente nisqawan flexbox nisqawan musuqmanta qillqay.
  • a.list-group-itemHuk sut'i clasewan tikrasqa, , .list-group-item-actionlista huñu imakunap t'inki chaymanta ñit'ina layakuna estilopaq.
  • .list-group-flushTarjetakunawan llamk’anapaq clase yapasqa .
  • Componente nisqawan flexbox nisqawan musuqmanta qillqay.
  • Flexbox kaqman kuyuy qusqa, umalliqpi qarquy iconokuna chiqanchayqa p'akisqachá kanman manaña flotadores kaqwan llamk'achkaykuchu. Contenido flotado ñawpaqta hamun, ichaqa flexbox kaqwan manaña chayhinachu. Kunanchay qarquy iconokunayki allichanapaq modal titulukuna qhipaman hamunanpaq.
  • Akllana remote(mayqinchus kikillanmanta hawa contenidota huk modal kaqman kargananpaq chaymanta inyectananpaq llamk'achiy atikunman) chaymanta tupaq loaded.bs.modalruwaymanta hurqusqa karqan. Recomendayku aswanpas plantillas lado cliente kaqmanta utaq huk marco de unión de datos kaqmanta llamk'achiyta, utaq jQuery.load kaqmanta qam kikiyki waqyayta.
  • Componente nisqawan flexbox nisqawan musuqmanta qillqay.
  • Yaqa llapan >akllaqkunata urmachirqa aswan sasan estilopaq mana anidado clasekuna kaqnintakama.
  • HTML-paq akllanakuna hina .nav > li > a, sapaq clasekunata .navs, .nav-items, .nav-links kaqpaq llamk'achiyku. Kayqa HTML kaqniyki aswan flexible ruwan chaymanta yapasqa mast'ariyta apamun.

Navbar tukuyninpi flexbox kaqpi musuqmanta qillqasqa kachkan allinchasqa yanapakuywan chiqanchaypaq, kutichiypaq chaymanta ruwanapaq.

  • Kutichiy navbar ruwanakuna kunan .navbarclaseman churasqa kanku chaymanta mañasqa .navbar-expand-{breakpoint} maypi akllanki maypi navbar urmachinaykipaq. Ñawpaqqa kayqa huk Menos variable modificación karqa chaymanta recompilayta necesitarqa.
  • .navbar-defaultkunanmi .navbar-light, ichaqa .navbar-darkkaqllapunim kachkan. Huknin kaykunamanta sapa navbar kaqpi mañakun. Ichaqa, kay clasekuna manaña background-colors churankuchu; en vez de esencialmente solo afectan color.
  • Navbars kunan huk laya qhipa willayta munanku. Akllay qhipa yanapakuyniykumanta ( .bg-*) utaq qampaq churay k'anchay/inverso clasekunawan patamanta loco ruwanapaq .
  • Flexbox estilokuna qusqa, navbars kunan flexbox yanapakuykunata llamk'achiyta atinku mana sasa chiqanchay akllanakunapaq.
  • .navbar-togglekunan kachkan .navbar-togglerchaymanta hukniray estiloyuq chaymanta ukhu marcayuq (mana aswan kimsa <span>s).
  • Clasetaqa .navbar-formllapantam urmachirqa. Manañam necesariochu; aswanpas, .form-inlinenecesitasqanman hina margen utilidadkunata llamk'achiylla chaymanta churaylla.
  • Navbars manaña churanchu margin-bottomicha border-radiusñawpaqmanta. Utilidades nisqakunata necesitasqanman hina utilizay.
  • Llapan ejemplokuna navbarkuna rikuchiq musuq marcasqa kananpaq musuqchasqa kanku.

Paginación

  • Componente nisqawan flexbox nisqawan musuqmanta qillqay.
  • Kunanqa s nisqap mirayninpiqa sut'i clasekuna ( .page-item, ) nisqatam mañakunku.page-link.pagination
  • Urmachirqa .pagercomponente tukuyninpi hina aswan pisi aswan ruwasqa botonkuna contorno kaqmanta.
  • Huk sut’i clase, , kunanqa s .breadcrumb-itemmirayninkunapi mañakun.breadcrumb

Etiquetas y insignias

  • Consolidado .labely .badgepara desambiguar del <label>elemento y simplificar componentes relacionados.
  • .badge-pillMuyu “píldora” qhawaypaq modificador hina yapasqa .
  • Insigniakuna manaña kikillanmantachu lista qutukunapi wak componentekunapipas wayt'akun. Chaypaqqa kunanqa clases de utilidad nisqakunam necesitakun.
  • .badge-default.badge-secondaryhukkunapi llamk'achisqa componente modificador clasekunawan tupananpaq urmachisqa chaymanta yapasqa.

Paneles, miniaturas, y pozos

Musuq tarjeta componentepaq tukuyninpi urmachisqa.

Paneles

  • .panelto .card, kunanqa flexbox nisqawan ruwasqa.
  • .panel-defaultquitado y no reemplazo.
  • .panel-groupquitado y no reemplazo. .card-groupmanan rantinpichu, hukniraymi.
  • .panel-headinga.card-header
  • .panel-titlenisqamanta .card-title. Munasqa qhawayman hina, umalliq elementokunata icha clasekunatapas (kayhina <h3>, .h3) icha yana elementokunata icha clasekunata (kayhina <strong>, <b>, .font-weight-bold) llamk'achiyta atinki. Reparay .card-title, kaqlla sutichasqa kaptinpas, hukniray rikchaytam paqarichimun .panel-title.
  • .panel-bodya.card-body
  • .panel-footera.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, chaymanta , , chaymanta Sass mapaykumanta ruwasqa yanapakuykunapaq .panel-dangerurmachisqa kanku ..bg-.text-.border$theme-colors

Puriy

  • Contextual .progress-bar-*clasekunata .bg-*utilidadkunawan tikrasqa. Ejemplopaq, class="progress-bar progress-bar-danger"tukun class="progress-bar bg-danger".
  • Kuyuchisqa .activeñawpaqman puriy barrakunapaq tikrasqa .progress-bar-animated.
  • Tukuy componenteta revisarqan, diseñota, estilota ima simplificananpaq. Aswan pisi estilokunayuq kayku qampaq llallinaykipaq, musuq rikuchiqkuna chaymanta musuq iconokuna.
  • Llapan CSS mana anidadochasqa chaymanta huk sutichasqa, sapa clase kaqwan ñawpaqchasqa kaqta qhawaspa .carousel-.
    • Carrusel nisqa kaqkunapaq, .next, .prev, .left, hinaspa .rightkunan .carousel-item-next, .carousel-item-prev, .carousel-item-left, hinaspa .carousel-item-right.
    • .itemkunanpas kachkanmi .carousel-item.
    • Ñawpaq/qhipa kamachiykunapaq, .carousel-control.rightchaymanta .carousel-control.leftkunan .carousel-control-nextchaymanta .carousel-control-prev, niyta munan manaña huk específico base claseta munankuchu.
  • Llapa kutichiq estilokunata hurqusqa, yanapakuykunaman qhipachiy (kayhina, wakin qhaway punkukunapi qillqakuna rikuchiy) chaymanta sapanchasqa estilokuna necesitasqanmanhina.
  • Carrusel imaymanakunapi siq'ikunapaq siq'i llalliykuna hurqusqa, yanapakuykunaman qhipaman churaspa.
  • Carrusel ejemplota t'ikrarqan musuq marcasqa chaymanta estilokuna churanapaq.

Tablas

  • Estiloyuq anidado tablakunapaq yanapakuyta hurqusqa. Llapan tabla estilokuna kunan v4 kaqpi herenciayuq kanku aswan sasallawan akllaqkunapaq.
  • Añadido variante de tabla inversa.

Utilidades

  • Qhawachiy, pakasqa, hukkunapas:
    • Ruwasqa qhaway yanapakuykunata kutichiq (kayhina, .d-nonechaymanta d-{sm,md,lg,xl}-none).
    • .hidden-*Musuq qhaway yanapakuykunapaq aswan achka yanapakuykunata urmachirqa . Ejemplopaq, .hidden-sm-up, nisqamantaqa .d-sm-none. Yanapakuykuna musuq sutichasqa .hidden-printqhaway yanapakuy sutichay esquema llamk'achinapaq. Aswan willakuy kay p'anqapi Responsive utilities t'aqapi.
    • Yapachisqa .float-{sm,md,lg,xl}-{left,right,none}clasekuna kutichiq flotadores kaqpaq chaymanta hurqusqa .pull-leftchaymanta .pull-rightchaymanta paykuna redundante kanku .float-leftchaymanta .float-right.
  • Niraq:
    • Qillqa chiqanchay claseykuman kutichiq t'ikraykunata yapasqa .text-{sm,md,lg,xl}-{left,center,right}.
  • Alineación y espaciado:
  • Clearfix musuqchasqa ñawpaq maskaq layakuna yanapakuyta urmachinanpaq.

Vendorpa ñawpaqnin mixins

Bootstrap 3 kaqpa ranqhaq ñawpaqnin mixins kaqnin, mayqinkunachus v3.2.0 kaqpi manaña llamk'achisqa karqanku, Bootstrap 4 kaqpi hurqusqa kanku.Autoprefixer llamk'achisqaykumanta pacha , manaña necesariochu kanku.

Kay mixinkunata hurqusqa: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, , , box-sizing, content-columns, hyphens, , , opacity, , perspective, perspective-origin, rotate, , , rotateX, , rotateY, , scale, scaleX, scaleY, , skew, , transform-origin, , transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Documentación nisqa

Documentacionniyku huk yapayta chaskirqa tukuy tablapi hinallataq. Kaypi uray uray:

  • Jekyll llamk'achkanchikraq, ichaqa chaqrusqapi plugins nisqayuq kayku:
    • bugify.rbllamk'achkan allinta listaman yaykusqakunata maskaq pantaykuna p'anqaykupi.
    • example.rbhuk ruwasqa tenedor ñawpaqmanta churasqa highlight.rbplugin kaqmanta, aswan facil ejemplo-codigo hap'iyta saqin.
    • callout.rbchaymanta huk rikch'aq tenedor personalizado kaq, ichaqa ruwasqayku especial docs waqyakuyniykupaq.
    • jekyll-toc es utilizado para generar nuestra tabla de contenidos.
  • Llapan docs kaqpa kaqninqa Markdown kaqpi musuqmanta qillqasqa kachkan (HTML kaqmanta) aswan facil allichaypaq.
  • P'anqakuna musuqmanta wakichisqa kanku aswan sasa contenidopaq chaymanta aswan asuykunapaq jerarquía kaqpaq.
  • Sapa kuti CSS kaqmanta SCSS kaqman kuyurqayku Bootstrap kaqpa tikraqninkunamanta, mixins kaqmanta chaymanta aswan allinta llamk'achinaykupaq.

Utilidades respuestas nisqa

Llapan @screen-variables nisqakunam v4.0.0 nisqapi hurqusqa kachkan. Chaypa rantinpi media-breakpoint-up(), media-breakpoint-down(), icha media-breakpoint-only()Sass mixins nisqawan icha $grid-breakpointsSass mapa nisqawan llamk'achiy.

displayKutichiq utilidad claseyku hatunmanta hurqusqa kanku explícita utilidadkuna favorninpi .

  • Chay .hiddenchaymanta clasekuna jQuery's kaqwan chaymanta métodos .showkaqwan ch'aqwasqankurayku hurqusqa kanku . Aswanpas, atributota tikrayta kallpachakuy utaq chiru ukhupi estilokunata llamk'achiy imaynachus chaymanta .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Llapan .hidden-clasekuna hurqusqa kanku, waqaychay impresora yanapakuykuna mayqinkunachus huk sutichasqa kanku.
    • v3 nisqamanta hurqusqa:.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
    • v4 alphas nisqamanta hurqusqa:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Impriminapaq yanapakuykunaqa manañam .hidden-icha nisqawanchu qallarinku .visible-, aswanpas .d-print-.
    • Ñawpa sutikuna: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Musuq yachaykuna: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Aswan sut'i .visible-*clasekuna llamk'achinamanta, huk elementota rikukuq ruwanki chay pantalla sayaypi mana pakaspalla. .d-*-noneHuk clase huk clasewan hukllachayta atikunki .d-*-blockhuk elemento pantalla sayaykunamanta qusqa intervalo .d-none.d-md-block.d-xl-nonekaqllapi rikuchinaykipaq (kayhina, elementota chawpi hatun dispositivokunallapi rikuchin).

Reparay v4 kaqpi rejilla pakikuna tikraykunaqa niyta munan huk pakina aswan hatun rinayki tiyan kikin ruwaykunata aypanaykipaq. Musuq kutichiq yanapakuy clasekuna mana aswan pisi común casokuna acomodayta munankuchu maypi huk elemento rikuy atiy mana huk sapalla contiguo rango qhaway punku sayayniyuq hina rikuchiyta atinchu; aswanpas chayhina kaqkunapi sapanchasqa CSS llamk'achinayki tiyan.