twitter-bootstrap => Migración a Bootstrap 4

Introducción

Bootstrap 4 es una reescritura importante y hay muchos cambios que debe tener en cuenta al actualizar desde Bootstap 3. Estos son los cambios de nombre de clase, consejos y ejemplos de cómo migrar su código Bootstrap 3.x a Bootstrap 4.x.

Observaciones

Este es solo un pequeño ejemplo de ejemplos más detallados a seguir.

Cambios en el diseño de la columna del sistema de cuadrícula en Bootstrap 4

El primer bloque de código se escribe en Bootstrap 3. En Bootstrap 3 hay 4 tipos de especificaciones de columna, a saber, col-md-* col-lg-* col-sm-* col-xs-* . Un diseño totalmente sensible se verá así en Bootstrap 3:

<div class="row">
    <div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
        contents
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        contents
    </div>
</div>

En Bootstrap 4, agregaron un nuevo nivel de cuadrícula sm por debajo de 768 px para un control más granular. Así que Bootstrap 4 tiene col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Entonces, lo que solía ser .col-md-6 en v3 ahora es .col-lg-6 en v4. Observe que el infijo -xs se ha eliminado, por lo que .col-6 representa 6 unidades de columna en el punto de interrupción extra pequeño (predeterminado).

Entonces, si ahora queremos escribir el mismo ejemplo anterior en Bootstrap 4, se vería así:

<div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
        contents
    </div>
    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
        contents
    </div>
</div>

Diseño de cuadrícula Bootstrap 4

Cambios en el soporte del navegador

En twitter-bootstrap 4 se ha eliminado el soporte para IE8, IE9, and iOS 6 . v4 ahora es solo IE10+ and iOS 7+ . Para sitios que necesiten cualquiera de esos, use v3.

En twitter-bootstrap 4 se agregó el soporte oficial para Android v5.0 Lollipop's Browser and WebView . Las versiones anteriores del Navegador de Android y WebView solo son unofficially supported .

Remover clase de eliminación

El afijo se elimina de Bootstrap 4.

Se recomienda usar una position: sticky lugar de un relleno de polietileno position: sticky .

Si estaba usando el Afijo para aplicar estilos adicionales, no de posición, los polyfills podrían no ser compatibles con su caso de uso. Una opción para tales usos es la biblioteca ScrollPos-Styler de terceros.

Según la documentación de Bootstrap

Se eliminó el complemento Affix jQuery. Recomendamos el uso de una posición: polietileno adhesivo en su lugar. Consulte la entrada de Por favor en HTML5 para obtener detalles y recomendaciones específicas de polyfill.
Si estaba usando el Afijo para aplicar estilos adicionales, no de posición, los polyfills podrían no ser compatibles con su caso de uso. Una opción para tales usos es la biblioteca ScrollPos-Styler de terceros.

Si alguien está migrando de Bootstrap v3 a Bootstrap v4 el enfoque alternativo:

HTML

<header>
    
</header>
<nav class="navbar navbar-light bg-faded" data-toggle="affix">
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        ☰
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>
                <div class="dropdown-menu" aria-labelledby="Preview">
                    <a class="dropdown-item" href="">Logout</a>

                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" id="main">
    <h2>Hello Bootstrap 4.</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-9">
            <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore
                PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg
                sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

header {
height: 220px;
background: #ccc;
}

JAVASCRIPT

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {
  
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
    
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
      
  };
  

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
    
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
    
    // init
    toggleAffix(ele, $(window), wrapper);
  });
  
});

El nuevo componente Bootstrap 4 Navbar Component se ha mejorado con respecto a su predecesor Bootstrap 3.x. En Bootstrap 4, la barra de navegación responde de manera predeterminada y utiliza flexbox para facilitar la alineación del contenido de la barra de navegación. También es una cuestión simple de usar las nuevas clases navbar-toggleable-* para cambiar el punto de interrupción de Navbar. Ahora la barra de navegación tiene 6 tamaños de punto de interrupción o "estados" para que pueda tener fácilmente una de las siguientes opciones de la barra de navegación.

La barra de navegación nunca se colapsa en la vista móvil vertical, y siempre es horizontal.
La barra de navegación siempre se contrae en la vista vertical y se alterna a través de la hamburguesa.
La barra de navegación se colapsa en vista vertical en uno de los 4 puntos de interrupción de respuesta .

Basic Bootstrap 4 Navbar

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

Como puede ver en el código de arriba, la navbar-header se ha eliminado de Bootstrap 4 y ya no se requiere el container-fluid del container-fluid para una barra de navegación de ancho completo.

Cambiar el punto de interrupción de la barra de navegación

La navbar-toggleable-md hace que la barra de navegación de arriba se contraiga verticalmente (y muestre el icono de alternar) en el punto de interrupción medio (md) de 992px. Para cambiar esto a un punto de interrupción diferente, solo tendríamos que intercambiar navbar-toggleable-md con uno de estos ...

navbar-toggleable = contraer en anchos xs <576px
navbar-toggleable-sm = colapso en anchos sm <768px
navbar-toggleable-lg = colapso en anchos de lg <1200px

Bootstrap 4 Breakpoint Navbar Demo

Cambiar la alineación de la barra de navegación

Flexbox nos permite cambiar fácilmente la alineación de la barra de navegación y su contenido (marca, enlaces, formularios o texto). El contenido predeterminado de la barra de navegación se alinea a la izquierda. Por supuesto que hay muchos otros escenarios de alineación ...

Marca izquierda (por defecto), enlaces centro y derecha
Centro de marca, enlaces izquierda y derecha.
Marca izquierda y enlaces a la derecha.
Marca, enlaces y ancho de relleno.
Sin marca, centro de enlaces y derecha.
Marca izquierda, enlaces a la derecha dentro del contenedor.
Enlaces justificados (ancho de relleno) centrados

Bootstrap 4 Navbar con marca centrada, y enlaces de izquierda / derecha

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Bootstrap 4 Navbar con marca izquierda, centro de enlaces y derecha

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

Demostraciones de alineación de la barra de navegación: http://www.codeply.com/go/qhaBrcWp3v

Más sobre el Bootstrap 4 Navbar

Personalización del color, alineación o altura

Bootstrap 3 to Bootstrap 4 Cambios CSS

Dado que Bootstrap 4 es una reescritura importante , muchos de los nombres de clase de Bootstrap 3.x han cambiado o se han eliminado. La reestructuración de componentes, como la barra de navegación, y la introducción de nuevas clases de CSS y el soporte de Flexbox significa que la actualización a 4.x no es un proceso de conversión simple desde 3.x.

Sin embargo, hay algunas clases CSS de Bootstrap 3.x que tienen un reemplazo específico de Bootstrap 4.

Cambios de nombre / selector de clase CSS de Bootstrap 3.3.7 a 4 (alfa 6)

{t}: representa un nivel o punto de interrupción (es decir, sm, md, lg, etc.).
xs nivel xs es el predeterminado, y no necesita ser especificado: col-3 , col-6 , etc.

{u} - representa un tamaño de unidad de col (es decir: 1-12)

Bootstrap 3.x	Bootstrap 4
.col- {t} - {u}	.col- {t} - {u} ( `leave {t} blank for xs` )
.col- {t} -offset- {u}	.offset- {t} - {u} ( `leave {t} blank for xs` )
.col- {t} -push- {u}	.push- {t} - {u} ( `leave {t} blank for xs` )
.col- {t} -pull- {u}	.pull- {t} - {u} ( `leave {t} blank for xs` )
.panel	.tarjeta
.panel-título	.card-header
título .panel	.card-titulo
.panel-cuerpo	.card-block
.panel-pie de página	.card-footer
.panel-primario	.card-primary.card-inverso
.panel-exito	.card-success.card-inverso
.panel-info	.card-info.card-inverse
.panel-aviso	.card-warning.card-inverso
.panel-peligro	.card-danger.card-inverso
.bien	.card.card-block
.miniatura	.card.card-block
.list-inline> li	.list-inline-item
menú desplegable> li	ítem desplegable
.nav navbar> li	.nav-item
.nav navbar> li> a	.nav-link
.navbar-derecha	.ml-auto
.navbar-btn	.nav-item
.navbar-fixed-top	.fixed-top
.nav-stacked	.flex-column
.btn-predeterminado	.btn-secundaria
.img-responsive	.img-fluido
.img-circulo	círculo redondo
.estoy castigado	.redondeado
.form-horizontal	(remoto)
.radio	.form-check
.caja	.form-check
.input-lg	.form-control-lg
.input-sm	.form-control-sm
.control-label	.form-control-label
mesa-condensada	.table-sm
.paginación> li	.page-item
.paginación> li> a	.page-link
.ít	.carousel-item
.text-help	.form-control-feedback
.pull-right	.flotar derecho
.pulgar a la izquierda	.flotador izquierdo
.center-block	.mx-auto
.collapse.in	.collapse.show
.hidden-sm	.hidden-md-down
.hidden-md	.hidden-lg-down
.hidden-xs	.hidden-xs-down
.visible-xs	.hidden-sm-up
.visible-sm	.hidden-xs-down.hidden-md-up
.visible-md	.hidden-sm-down.hidden-lg-up
.visible-lg	.hidden-md-down.hidden-xl-up
.etiqueta	.placa
.placa	.badge.badge-pill

Ver también:
Bootstrap 3.x to 4 Migration Tool
What's New in Bootstrap 4

Bootstrap 4 Vertical Align

Elementos que consiguen a centro o Alinear abajo verticalmente siempre ha sido un reto con CSS y Bootstrap. La alineación vertical deseada puede estar dentro de un contenedor principal, o en relación con elementos adyacentes.

Ahora que Bootstrap 4 es Flexbox por defecto, hay muchos enfoques diferentes para la alineación vertical utilizando: márgenes automáticos , Utilidades de Flexbox o Utilidades de pantalla junto con Utilidades de alineación vertical .

Al principio, las Utilidades de alineación vertical parecerían una opción obvia, pero estas solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunas opciones y escenarios de alineación vertical de Bootstrap 4 ...

1 - Centro vertical utilizando márgenes automáticos:

Una forma de centrar verticalmente es usar my-auto . Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100 hace que la fila tenga su altura completa, y my-auto centrará verticalmente la col-sm-12 .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Centro vertical usando la demo de Auto Margins

my-auto representa márgenes en el eje vertical y es equivalente a:

margin-top: auto;
margin-bottom: auto;

2 - Centro vertical con Flexbox:

Ya que Bootstrap 4 .row está ahora en display:flex , simplemente puede usar align-self-center en cualquier columna para centrarlo verticalmente ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

o, use align-items-center en toda la .row para .row verticalmente todos los col-* en la fila ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Centro vertical Demostración de diferentes columnas de altura

3 - Centro vertical usando Utilidades de pantalla:

Bootstrap 4 tiene utilidades de visualización que se pueden usar para display:table , display:table-cell , display:inline , etc. Se pueden usar con las utilidades de alineación vertical para alinear elementos de celda en línea, bloque en línea o tabla.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Centro vertical usando la demostración de utilidades de pantalla

Bootstrap 4 Centrado

Cómo centrar un elemento, columna o contenido dentro de una columna funciona de manera diferente en Bootstrap 4.

Centro horizontal

text-center todavía se utiliza para la display:inline elementos en display:inline
mx-auto reemplaza center-block central al centro de la display:block elementos de display:block
offset-* o mx-auto se puede usar para centrar las columnas de la cuadrícula

mx-auto (los márgenes del eje x automáticos) centrarán la display:block o display:flex elementos display:flex que tienen un ancho definido , ( % , vw , px , etc.). Flexbox se utiliza de forma predeterminada en las columnas de la cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Centro de texto o elementos en línea: text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

display:block central display:block o display:flex : mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

offset-* columnas usando compensaciones: offset-*

<div class="row">
    <div class="col-4 offset-4">
        <h6>I'm .col-4 centered (offset 4)
    </div>
</div>

Las columnas también se pueden centrar con: mx-auto

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

Demo Bootstrap 4 Centrado horizontal

Centro vertical

Para el centrado vertical en Bootstrap 4 (eje y), consulte la documentación en: Alineamiento vertical de Bootstrap 4

Bootstrap 4 Column Order

Cambiar el orden (o la posición) fue posible en Bootstrap 3 usando las clases push-pull. En Bootstrap 4, las clases push-pull siguen funcionando y, además , se puede utilizar el orden flexbox .

En Bootstrap 4, las clases push- pull ahora son push-{viewport}-{units} y pull-{viewport}-{units} y se ha eliminado el infix xs- . Considere este ejemplo que cambia el orden de las columnas al diseño 1-3-2 en xs y sm :

<div class="row">
    <div class="col-3 col-md-6">
        1
    </div>
    <div class="col-3 col-md-6 push-6 push-md-0">
        2
    </div>
    <div class="col-6 col-md-12 pull-3 pull-md-0">
        3
    </div>
</div>

Bootstrap 4 Push Pull Demo

Como la nueva versión 4 es flexbox, otra opción es usar las clases de la utilidad flexbox para cambiar el orden de las columnas. Ahora todo el ancho, 12 unidades col-*-12 columnas se pueden revertir usando el ordenamiento de flexbox .

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Demostración de pedidos de Flexbox

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

twitter-bootstrap
Migración a Bootstrap 4

Buscar..