Migrando a v4

Bootstrap 4 é unha reescritura importante de todo o proxecto. Os cambios máis notables resúmense a continuación, seguidos de cambios máis específicos nos compoñentes relevantes.

Cambios estables

Pasando da Beta 3 á nosa versión estable v4.0, non hai cambios de ruptura, pero hai algúns cambios notables.

Impresión

• Arranxáronse as utilidades de impresión rotas. Anteriormente, usar unha .d-print-*clase anulaba inesperadamente calquera outra .d-*clase. Agora, coinciden coas nosas outras utilidades de visualización e só se aplican a ese medio ( @media print).

• Ampliáronse as utilidades de visualización de impresión dispoñibles para que coincidan con outras utilidades. A versión beta 3 e máis antiga só tiña block, inline-block, inlinee none. Stable v4 engadiuse flex, inline-flex, table, table-rowe table-cell.

• Corrixiuse a representación da vista previa de impresión nos navegadores con novos estilos de impresión que especifican @page size.

Cambios na beta 3

Aínda que a Beta 2 viu a maior parte dos nosos cambios de ruptura durante a fase beta, pero aínda temos algúns que precisaban ser abordados na versión Beta 3. Estes cambios aplícanse se estás actualizando a Beta 3 desde Beta 2 ou calquera versión anterior de Bootstrap.

Varios

• Eliminouse a $thumbnail-transitionvariable non utilizada. Non estabamos a facer a transición de nada, polo que era só un código extra.
• O paquete npm xa non inclúe ningún ficheiro que non sexa os nosos ficheiros fonte e dist; se confiabas neles e estabas executando os nosos scripts a través do node_modulescartafol, deberías adaptar o teu fluxo de traballo.

Formularios

• Reescribiu as caixas de verificación e as radios personalizadas e predeterminadas. Agora, ambos teñen unha estrutura HTML coincidente (exterior <div>con irmán <input>e <label>) e os mesmos estilos de deseño (apilado predeterminado, en liña coa clase modificadora). Isto permítenos crear un estilo da etiqueta en función do estado da entrada, simplificando o soporte para o disabledatributo (anteriormente requiría unha clase pai) e apoiando mellor a validación do noso formulario.

  Como parte disto, cambiamos o CSS para xestionar varios background-images en caixas de verificación e radios de formularios personalizados. Anteriormente, o .custom-control-indicatorelemento agora eliminado tiña a cor de fondo, o degradado e a icona SVG. Personalizar o degradado de fondo significaba substituír todos aqueles cada vez que precisaba cambiar só un. Agora, temos .custom-control-label::beforepara o recheo e o degradado e .custom-control-label::aftermanexa a icona.

  Para facer unha comprobación personalizada en liña, engade .custom-control-inline.

• Selector actualizado para grupos de botóns baseados na entrada. No canto de [data-toggle="buttons"] { }estilo e comportamento, usamos o dataatributo só para comportamentos JS e dependemos dunha nova .btn-group-toggleclase para o estilo.

• Eliminado .col-form-legenda favor dun lixeiramente mellorado .col-form-label. Deste xeito .col-form-label-sm, .col-form-label-lgpódese usar en <legend>elementos con facilidade.

• As entradas de ficheiros personalizados recibiron un cambio na súa $custom-file-textvariable Sass. Xa non é un mapa Sass anidado e agora só alimenta unha cadea: o Browsebotón xa que agora é o único pseudoelemento xerado a partir do noso Sass. O Choose filetexto agora provén do .custom-file-label.

Grupos de entrada

• Os complementos do grupo de entrada agora son específicos para a súa colocación en relación a unha entrada. Deixamos dúas clases novas , .input-group-addone . Agora debes usar explícitamente un anexo ou un antecedente, simplificando gran parte do noso CSS. Dentro dun anexo ou anteposto, coloque os botóns como existirían en calquera outro lugar, pero envolve o texto en formato ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• Agora son compatibles os estilos de validación, así como varias entradas (aínda que só podes validar unha entrada por grupo).

• As clases de tamaño deben estar no pai .input-groupe non nos elementos individuais do formulario.

Cambios na beta 2

Mentres esteamos en versión beta, pretendemos que non teñamos cambios significativos. Non obstante, as cousas non sempre saen como estaba previsto. A continuación móstranse os cambios que hai que ter en conta ao pasar da Beta 1 á Beta 2.

Romper

• Eliminouse $badge-colora variable e o seu uso en .badge. Usamos unha función de contraste de cores para escoller unha colorbaseada no background-color, polo que a variable é innecesaria.
• Cambiou o nome grayscale()da función a gray()para evitar romper o conflito co grayscalefiltro nativo de CSS.
• Cambiou o nome .table-inversede .thead-inverse, e .thead-defaulta .*-darke .*-light, facendo coincidir os nosos esquemas de cores usados ​​noutros lugares.
• Agora as táboas sensibles xeran clases para cada punto de interrupción da grella. Isto rompe coa beta 1 en que o .table-responsiveque usaches é máis parecido a .table-responsive-md. Agora podes usar .table-responsiveou .table-responsive-{sm,md,lg,xl}segundo sexa necesario.
• A compatibilidade de Bower deixouse caer xa que o xestor de paquetes quedou en desuso para alternativas (por exemplo, Yarn ou npm). Vexa bower/bower #2298 para máis detalles.
• Bootstrap aínda require jQuery 1.9.1 ou superior, pero recoméndase que use a versión 3.x xa que os navegadores compatibles con v3.x son os que admite Bootstrap e v3.x ten algunhas correccións de seguridade.
• Eliminouse a .form-control-labelclase non utilizada. Se fixo uso desta clase, era un duplicado da .col-form-labelclase que centraba verticalmente a <label>coa súa entrada asociada en formatos horizontais.
• Cambiouse a función color-yiqdun mixin que incluía a colorpropiedade a unha función que devolve un valor, o que lle permite usalo para calquera propiedade CSS. Por exemplo, en lugar de color-yiq(#000), escribirías color: color-yiq(#000);.

Destacados

• Introduciuse un novo pointer-eventsuso nos modais. O exterior .modal-dialogpasa por eventos pointer-events: nonepara o manexo de clics personalizado (o que fai posible só escoitalo .modal-backdroppor calquera clic) e despois contrarresta o real .modal-contentcon pointer-events: auto.

Resumo

Aquí tes os grandes artigos dos que queres ter en conta ao pasar de v3 a v4.

Soporte de navegador

• Deixouse de admitir IE8, IE9 e iOS 6. v4 agora só é IE10+ e iOS 7+. Para sitios que necesiten calquera destes, use v3.
• Engadiuse soporte oficial para o navegador e WebView de Android v5.0 Lollipop. As versións anteriores do navegador Android e WebView só seguen sendo compatibles de xeito non oficial.

Cambios globais

• Flexbox está activado por defecto. En xeral, isto significa un afastamento dos flotadores e máis entre os nosos compoñentes.
• Cambiamos de Less a Sass para os nosos ficheiros CSS de orixe.
• Cambiamos de pxa remcomo a nosa unidade CSS principal, aínda que os píxeles aínda se usan para consultas multimedia e comportamento da grade xa que as ventanas gráficas dos dispositivos non se ven afectadas polo tamaño do tipo.
• O tamaño global da fonte aumentou de 14pxa 16px.
• Renováronse os niveis de grella para engadir unha quinta opción (encargarse de dispositivos máis pequenos en 576pxe abaixo) e eliminouse o -xsinfixo desas clases. Exemplo: .col-6.col-sm-4.col-md-3.
• Substituíuse o tema opcional separado por opcións configurables mediante variables SCSS (por exemplo, $enable-gradients: true).
• Sistema de compilación revisado para usar unha serie de scripts npm en lugar de Grunt. Consulta package.jsontodos os scripts ou o noso proxecto Readme para as necesidades de desenvolvemento local.
• Xa non se admite o uso de Bootstrap que non responde.
• Eliminado o Personalizador en liña a favor dunha documentación de configuración máis ampla e de compilacións personalizadas.
• Engadíronse decenas de novas clases de utilidade para os pares de propiedade-valor CSS comúns e atallos de espazo de marxe/recheo.

Sistema de reixa

• Moveuse a flexbox.
  • Engadido soporte para flexbox nas mesturas de grella e clases predefinidas.
  • Como parte de flexbox, incluíu soporte para clases de aliñamento vertical e horizontal.
• Actualizáronse os nomes das clases de grade e un novo nivel de grade.
  • Engadiuse un novo smnivel de grade a continuación 768pxpara un control máis granular. Agora temos xs, sm, md, lge xl. Isto tamén significa que cada nivel subiu un nivel (polo que .col-md-6na v3 agora está .col-lg-6na v4).
  • xsAs clases de cuadrícula modificáronse para non requirir que o infixo represente con máis precisión que comezan a aplicar estilos min-width: 0e non nun valor de píxel establecido. En vez de .col-xs-6, é agora .col-6. Todos os demais niveis de grella requiren o infixo (por exemplo, sm).
• Tamaños, mesturas e variables da grella actualizados.
  • As cunetas de cuadrícula agora teñen un mapa Sass para que poidas especificar anchos de canalóns específicos en cada punto de interrupción.
  • Actualizáronse as mesturas de cuadrícula para utilizar unha mestura de make-col-readypreparación e unha make-colpara establecer o flexe max-widthpara o tamaño da columna individual.
  • Modificáronse os puntos de interrupción de consulta de medios do sistema de cuadrícula e o ancho dos contedores para ter en conta o novo nivel de grade e garantir que as columnas sexan divisibles uniformemente 12polo seu ancho máximo.
  • Os puntos de interrupción da grade e os anchos dos contedores agora manéxanse mediante mapas Sass ( $grid-breakpointse $container-max-widths) en lugar dun puñado de variables separadas. Estes substitúen as @screen-*variables por completo e permítenche personalizar completamente os niveis da grella.
  • As consultas dos medios tamén cambiaron. En lugar de repetir as nosas declaracións de consulta de medios co mesmo valor cada vez, agora temos @include media-breakpoint-up/down/only. Agora, en vez de escribir @media (min-width: @screen-sm-min) { ... }, podes escribir @include media-breakpoint-up(sm) { ... }.

Compoñentes

• Caídas de paneis, miniaturas e pozos para un novo compoñente que abarca todo, as tarxetas .
• Soltou o tipo de letra da icona Glyphicons. Se precisas iconas, algunhas opcións son:
  • a versión upstream de Glyphicons
  • Octicóns
  • Font Awesome
  • Vexa a páxina Estender para ver unha lista de alternativas. Tes suxestións adicionais? Abre un problema ou PR.
• Quitou o complemento Affix jQuery.
  • Recomendamos usar position: stickyno seu lugar. Consulte a entrada HTML5 para obter detalles e recomendacións específicas de recheo polivalente. Unha suxestión é usar unha @supportsregra para implementala (por exemplo, @supports (position: sticky) { ... })/
  • Se positionusabas Affix para aplicar estilos adicionais que non sexan, é posible que os polyfills non admitan o teu caso de uso. Unha opción para tales usos é a biblioteca ScrollPos-Styler de terceiros .
• Deixouse caer o compoñente do paginador xa que se trataba esencialmente de botóns lixeiramente personalizados.
• Refactorizaron case todos os compoñentes para usar máis selectores de clases non anidados en lugar de selectores secundarios demasiado específicos.

Por compoñente

Esta lista destaca os cambios clave por compoñente entre v3.xx e v4.0.0.

Reinicie

Novo en Bootstrap 4 é o Reboot , unha nova folla de estilo que se basea en Normalize cos nosos propios estilos de restablecemento un tanto obstinados. Os selectores que aparecen neste ficheiro só usan elementos; aquí non hai clases. Isto illa os nosos estilos de restablecemento dos nosos estilos de compoñentes para un enfoque máis modular. Algúns dos restablecementos máis importantes que inclúen son o box-sizing: border-boxcambio, pasar de emunidades rema moitos elementos, estilos de ligazón e moitos restablecementos de elementos de formulario.

Tipografía

• Moveuse todas as .text-utilidades ao _utilities.scssficheiro.
• Caído .page-headerxa que, ademais do bordo, todos os seus estilos pódense aplicar mediante utilidades.
• .dl-horizontalfoi eliminado. En vez diso, use .rowon <dl>e use clases de columnas de grella (ou mixins) nas súas <dt>e <dd>fillos.
• O estilo personalizado <blockquote>trasladouse ás clases .blockquotee ao .blockquote-reversemodificador.
• .list-inlineagora require que os elementos da lista fillos teñan .list-inline-itemaplicada a nova clase.

Imaxes

• Renombrado .img-responsivea .img-fluid.
• Renombrado .img-roundeda.rounded
• Renombrado .img-circlea.rounded-circle

Táboas

• >Elimináronse case todas as instancias do selector, o que significa que as táboas aniñadas agora herdarán automaticamente os estilos dos seus pais. Isto simplifica moito os nosos selectores e as posibles personalizacións.
• As táboas sensibles xa non requiren un elemento de envoltura. En vez diso, só tes que poñer a .table-responsivedereita no <table>.
• Renomeado .table-condensedpor .table-smcoherencia.
• Engadida unha nova .table-inverseopción.
• Engadidos modificadores de cabeceira da táboa: .thead-defaulte .thead-inverse.
• Cambiou o nome das clases contextuais para que teñan un .table--prefixo. Polo tanto .active, .success, .warning, .dangere .infoa .table-active, .table-success, .table-warninge .table-danger..table-info

Formularios

• O elemento movido restablece o _reboot.scssficheiro.
• Renombrado .control-labela .col-form-label.
• Renomeado .input-lge .input-sma .form-control-lge .form-control-sm, respectivamente.
• Abandonou .form-group-*as clases por razón de simplicidade. Usa .form-control-*clases no seu lugar agora.
• Soltouse .help-blocke substituíuna .form-textpor texto de axuda a nivel de bloque. Para o texto de axuda en liña e outras opcións flexibles, use clases de utilidade como .text-muted.
• Caído .radio-inlinee .checkbox-inline.
• Consolidado .checkboxe .radioen .form-checke as distintas .form-check-*clases.
• Formas horizontais revisadas:
  • Retírase o .form-horizontalrequisito de clase.
  • .form-groupxa non aplica estilos desde o .rowvia mixin, polo .rowque agora é necesario para deseños de grade horizontais (por exemplo, <div class="form-group row">).
  • Engadiuse unha nova .col-form-labelclase para centrar verticalmente as etiquetas con .form-controls.
  • Engadido novo .form-rowpara deseños de formularios compactos coas clases de cuadrícula (cambia o teu .rowpor a .form-rowe listo).
• Engadido soporte de formularios personalizados (para caixas de verificación, radios, seleccións e entradas de ficheiros).
• Substituíronse as clases .has-error, .has-warning, e .has-successcoa validación de formularios HTML5 mediante CSS :invalide :validpseudoclases.
• Renombrado .form-control-statica .form-control-plaintext.

Botóns

• Renombrado .btn-defaulta .btn-secondary.
• Baixou a .btn-xsclase por completo xa .btn-smque é proporcionalmente moito menor que a v3.
• A función do botónbutton.js con estado do complemento jQuery foi eliminada. Isto inclúe os métodos $().button(string)e . $().button('reset')Recomendamos usar un pouco de JavaScript personalizado no seu lugar, que terá a vantaxe de comportarse exactamente como quere.
  • Teña en conta que as outras funcións do complemento (caixas de verificación dos botóns, radios de botóns, botóns de alternancia única) mantivéronse na versión 4.
• Cambia os botóns [disabled]a :disabledque IE9+ admita :disabled. Non obstante fieldset[disabled], aínda é necesario porque os conxuntos de campos nativos desactivados aínda teñen erros en IE11 .

Grupo de botóns

• Reescribiu o compoñente con flexbox.
• Eliminado .btn-group-justified. Como reemplazo podes usar <div class="btn-group d-flex" role="group"></div>como envoltorio arredor de elementos con .w-100.
• Eliminause a .btn-group-xsclase por completo dada a eliminación de .btn-xs.
• Eliminouse o espazo explícito entre os grupos de botóns nas barras de ferramentas de botóns; use agora as utilidades de marxe.
• Documentación mellorada para o seu uso con outros compoñentes.

Despregables

• Cambiouse dos selectores principais a clases singulares para todos os compoñentes, modificadores, etc.
• Estilos de menú despregable simplificados para deixar de enviarse coas frechas cara arriba ou cara abaixo unidas ao menú despregable.
• Os menús desplegables pódense crear con <div>s ou <ul>s agora.
• Reconstruíron os estilos e marcas despregábeis para ofrecer soporte integrado e sinxelo aos <a>elementos <button>despregables baseados.
• Renombrado .dividera .dropdown-divider.
• Os elementos desplegables agora requiren .dropdown-item.
• Os alternadores do menú despregable xa non requiren un <span class="caret"></span>; agora ofrécese automaticamente a través de CSS ::afteren .dropdown-toggle.

Sistema de reixa

• Engadiuse un novo 576pxpunto de corte de grella como sm, o que significa que agora hai cinco niveis totais ( xs, sm, md, lge xl).
• Cambiouse o nome das clases de modificadores de grella sensibles de .col-{breakpoint}-{modifier}-{size}a .{modifier}-{breakpoint}-{size}para as clases de grella máis sinxelas.
• Eliminaron as clases de modificadores push e pull para as novas clases impulsadas por flexbox order. Por exemplo, en lugar de .col-8.push-4e .col-4.pull-8, usarías .col-8.order-2e .col-4.order-1.
• Engadíronse clases de utilidade flexbox para o sistema de reixa e os compoñentes.

Lista de grupos

• Reescribiu o compoñente con flexbox.
• Substituíuse a.list-group-itempor unha clase explícita, .list-group-item-action, para as versións de ligazóns e botóns de estilo dos elementos do grupo de lista.
• Engadida .list-group-flushclase para usar con tarxetas.

Modal

• Reescribiu o compoñente con flexbox.
• Dado o cambio a flexbox, é probable que a aliñación das iconas de exclusión na cabeceira estea rota xa que xa non usamos flotadores. O contido flotante é o primeiro, pero con flexbox xa non é o caso. Actualiza as túas iconas de exclusión para ir despois dos títulos modais para corrixir.
• Elimináronse remotea opción (que podería usarse para cargar e inxectar automaticamente contido externo nun modal) e o loaded.bs.modalevento correspondente. Recomendamos no seu lugar usar un modelo do lado do cliente ou un marco de vinculación de datos, ou chamar a jQuery.load vostede mesmo.

Navs

• Reescribiu o compoñente con flexbox.
• Deixáronse caer case todos os >selectores para un estilo máis sinxelo a través de clases non aniñadas.
• En lugar de selectores específicos de HTML como .nav > li > a, usamos clases separadas para .navs, .nav-items e .nav-links. Isto fai que o teu HTML sexa máis flexible ao tempo que aumenta a extensibilidade.

Barra de navegación

A barra de navegación foi totalmente reescrita en flexbox con compatibilidade mellorada para o aliñamento, a capacidade de resposta e a personalización.

• Os comportamentos da barra de navegación responsive agora aplícanse á .navbarclase a través do necesario .navbar-expand-{breakpoint} onde escolles onde contraer a barra de navegación. Anteriormente esta era unha modificación menos variable e requiría recompilación.
• .navbar-defaulté agora .navbar-light, aínda que .navbar-darksegue igual. Un destes é necesario en cada barra de navegación. Porén, estas clases xa non establecen background-colors; en cambio, esencialmente só afectan color.
• Agora as barras de navegación requiren unha declaración de fondo dalgún tipo. Escolle entre as nosas utilidades en segundo plano ( .bg-*) ou configura as túas propias coas clases lixeiras/inversas anteriores para unha personalización loca .
• Dados os estilos de flexbox, agora as barras de navegación poden usar as utilidades de flexbox para facilitar opcións de aliñamento.
• .navbar-toggleé agora .navbar-togglere ten diferentes estilos e marcado interno (non máis tres <span>s).
• Deixou a .navbar-formclase por completo. Xa non é necesario; en vez diso, simplemente use .form-inlinee aplique as utilidades de marxe segundo sexa necesario.
• As barras de navegación xa non inclúen margin-bottomou border-radiuspor defecto. Use utilidades segundo sexa necesario.
• Actualizáronse todos os exemplos con barras de navegación para incluír novas marcas.

Paxinación

• Reescribiu o compoñente con flexbox.
• Agora son necesarias clases explícitas ( .page-item, .page-link) nos descendentes de .paginations
• Eliuse o .pagercompoñente por completo porque era pouco máis que botóns de esquema personalizados.

Migas de pan

• Agora requírese unha clase explícita, .breadcrumb-item, nos descendentes do .breadcrumbs

Etiquetas e distintivos

• Renombrado .labela .badgepara desambiguar o <label>elemento.
• Deixouse caer o .badgecompoñente porque era case idéntico ás etiquetas. Use o .badge-pillmodificador xunto co compoñente de etiqueta para ese aspecto redondeado.
• As insignias xa non se colocan automaticamente nos grupos de listas e noutros compoñentes. Agora son necesarias clases de utilidade para iso.
• .badge-defaulteliminouse e .badge-secondaryengadiuse para facer coincidir as clases modificadoras de compoñentes usadas noutros lugares.

Paneis, miniaturas e pozos

Eliminado por completo para o novo compoñente da tarxeta.

Paneis

• .panela .card, agora construído con flexbox.
• .panel-defaulteliminado e sen substitución.
• .panel-groupeliminado e sen substitución. .card-groupnon é un substituto, é diferente.
• .panel-headinga.card-header
• .panel-titlea .card-title. Dependendo do aspecto desexado, tamén pode querer usar elementos ou clases de título (por exemplo <h3>, , .h3) ou elementos ou clases en negra (por exemplo <strong>, <b>, .font-weight-bold). Teña en conta que .card-title, aínda que recibe un nome similar, produce un aspecto diferente ao de .panel-title.
• .panel-bodya.card-body
• .panel-footera.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, e .panel-dangerforon eliminados para .bg-, .text-, e .borderutilidades xeradas a partir do noso $theme-colorsmapa Sass.

Progreso

• Substituíronse as .progress-bar-*clases contextuais por .bg-*utilidades. Por exemplo, class="progress-bar progress-bar-danger"convértese en class="progress-bar bg-danger".
• Substituíuse .activepor barras de progreso animadas con .progress-bar-animated.

Carrusel

• Revisouse todo o compoñente para simplificar o deseño e o estilo. Temos menos estilos para anular, novos indicadores e novas iconas.
• Todo o CSS non se aniñou e renomeouse, garantindo que cada clase teña o prefixo .carousel-.
  • Para os elementos do carrusel, .next, .prev, .left, e .rightagora son .carousel-item-next, .carousel-item-prev, .carousel-item-left, e .carousel-item-right.
  • .itemtamén está agora .carousel-item.
  • Para os controis anteriores/seguintes, .carousel-control.righte .carousel-control.leftson agora .carousel-control-nexte .carousel-control-prev, o que significa que xa non precisan dunha clase base específica.
• Elimináronse todos os estilos receptivos, remitíndose ás utilidades (por exemplo, amosando subtítulos en certas vistas) e aos estilos personalizados segundo sexa necesario.
• Elimináronse as substitucións de imaxes para as imaxes dos elementos do carrusel, remitíndose ás utilidades.
• Axusteuse o exemplo do carrusel para incluír o novo marcado e estilos.

Táboas

• Eliminouse o soporte para táboas aniñadas con estilo. Todos os estilos de táboa agora herdanse na versión 4 para selectores máis sinxelos.
• Engadida a variante da táboa inversa.

Utilidades

• Mostrar, ocultar e moito máis:
  • Fixo que as utilidades de visualización respondan (por exemplo, .d-nonee d-{sm,md,lg,xl}-none).
  • Deixáronse caer a maior parte das .hidden-*utilidades para as novas utilidades de visualización . Por exemplo, en lugar de .hidden-sm-up, use .d-sm-none. Cambiouse o nome das .hidden-printutilidades para usar o esquema de nomes da utilidade de visualización. Máis información na sección de utilidades responsive desta páxina.
  • Engadíronse .float-{sm,md,lg,xl}-{left,right,none}clases para flotadores sensibles e elimináronse .pull-lefte .pull-rightxa que son redundantes para .float-lefte .float-right.
• Tipo:
  • Engadiron variacións de resposta ás nosas clases de aliñamento de texto .text-{sm,md,lg,xl}-{left,center,right}.
• Aliñación e espazamento:
  • Engadíronse novas utilidades de marxe de resposta e recheo para todos os lados, ademais de taquigrafías verticais e horizontais.
  • Engadida carga de barcos de utilidades flexbox .
  • Deixouse .center-blockpara a nova .mx-autoclase.
• Clearfix actualizado para eliminar a compatibilidade con versións antigas do navegador.

Mixins de prefixos de provedores

Os mixins de prefixos de provedores de Bootstrap 3 , que estaban obsoletos na versión 3.2.0, elimináronse de Bootstrap 4. Dado que usamos Autoprefixer , xa non son necesarios.

Elimináronse as seguintes mesturas : 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,translatetranslate3duser-select

Documentación

A nosa documentación tamén recibiu unha actualización en todos os ámbitos. Aquí está o baixo:

• Aínda estamos usando Jekyll, pero temos complementos na mestura:
  • bugify.rbúsase para listar de forma eficiente as entradas da nosa páxina de erros do navegador .
  • example.rbé unha bifurcación personalizada do highlight.rbcomplemento predeterminado, que permite un manexo do código de exemplo máis sinxelo.
  • callout.rbé unha bifurcación personalizada semellante, pero deseñada para os nosos textos especiais de documentos.
  • markdown-block.rbúsase para renderizar fragmentos de Markdown dentro de elementos HTML como táboas.
  • jekyll-toc úsase para xerar a nosa táboa de contidos.
• Todo o contido de documentos foi reescrito en Markdown (en lugar de HTML) para facilitar a edición.
• As páxinas reorganizáronse para conseguir un contido máis sinxelo e unha xerarquía máis accesible.
• Pasamos de CSS normal a SCSS para aproveitar ao máximo as variables, mixins e moito máis de Bootstrap.

Utilidades sensibles

Todas as @screen-variables foron eliminadas na versión 4.0.0. No seu lugar, utiliza os mixins media-breakpoint-up(), media-breakpoint-down(), ou Sass ou o mapa Sass.media-breakpoint-only()$grid-breakpoints

As nosas clases de utilidades sensibles foron eliminadas en gran medida en favor das displayutilidades explícitas.

• Elimináronse as clases .hiddene .showporque entraban en conflito cos métodos $(...).hide()e jQuery. $(...).show()En vez diso, proba a alternar o [hidden]atributo ou usa estilos en liña como style="display: none;"e style="display: block;".
• .hidden-Elimináronse todas as clases, agás as utilidades de impresión que foron renomeadas.
  • Eliminado de 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
  • Eliminado de 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
• As utilidades de impresión xa non comezan con .hidden-ou .visible-, senón con .d-print-.
  • Nomes antigos: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Novas clases: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

En lugar de usar clases explícitas .visible-*, fai visible un elemento simplemente sen ocultalo nese tamaño de pantalla. Podes combinar unha .d-*-noneclase cunha .d-*-blockclase para mostrar un elemento só nun intervalo determinado de tamaños de pantalla (por exemplo, .d-none.d-md-block.d-xl-nonemostra o elemento só en dispositivos medianos e grandes).

Teña en conta que os cambios nos puntos de interrupción da grella na versión 4 significan que terás que aumentar un punto de interrupción para conseguir os mesmos resultados. As novas clases de utilidade receptivas non tentan acomodar casos menos comúns nos que a visibilidade dun elemento non se pode expresar como un único intervalo contiguo de tamaños de vistas; En cambio, necesitará usar CSS personalizado nestes casos.