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.x, 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.
• Deixouse caer .page-headerxa que 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.
• As citas en bloque redeseñadas, movendo os seus estilos do <blockquote>elemento a unha única clase, .blockquote. Quitou o .blockquote-reversemodificador para as utilidades de texto.
• .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.
• 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, o aliñamento das iconas de exclusión na cabeceira é probable que se rompa 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

• Consolidado .labele .badgepara desambiguar do <label>elemento e simplificar os compoñentes relacionados.
• Engadido .badge-pillcomo modificador para o aspecto de "pílula" redondeada.
• 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, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

Progress

• Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".
• Replaced .active for animated progress bars with .progress-bar-animated.

Carousel

• Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
• All CSS has been un-nested and renamed, ensuring each class is prefixed with .carousel-.
  • For carousel items, .next, .prev, .left, and .right are now .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right.
  • .item is also now .carousel-item.
  • For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-next and .carousel-control-prev, meaning they no longer require a specific base class.
• Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
• Removed image overrides for images in carousel items, deferring to utilities.
• Tweaked the Carousel example to include the new markup and styles.

Tables

• Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.
• Added inverse table variant.

Utilities

• Display, hidden, and more:
  • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
  • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
  • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
• Type:
  • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
• Alignment and spacing:
  • Added new responsive margin and padding utilities for all sides, plus vertical and horizontal shorthands.
  • Added boatload of flexbox utilities.
  • Dropped .center-block for the new .mx-auto class.
• Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: 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

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

• We’re still using Jekyll, but we have plugins in the mix:
  • bugify.rb is used to efficiently list out the entries on our browser bugs page.
  • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
  • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
  • jekyll-toc is used to generate our table of contents.
• All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
• Pages have been reorganized for simpler content and a more approachable hierarchy.
• We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

• The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
• All .hidden- classes have been removed, save for the print utilities which have been renamed.
  • Removed from 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
  • Removed from 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
• Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
  • Old names: .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.