Documentación oficial de Bootstrap4 | Introducción a las nuevas funciones

Bootstrap es un marco de desarrollo de front-end simple, intuitivo y poderoso que hace que el desarrollo web sea más rápido y fácil. Es el marco de trabajo de front-end más popular del mundo para crear sitios WEB con capacidad de respuesta, primero para dispositivos móviles.

Empezando con Bootstrap 4

instalación

Introducido por descarga

• Método 1: Descargue el archivo fuente e impórtelo a la página del proyecto.
  Al descargar los archivos fuente de Bootstrap's Sass, JavaScript y documentación, utilice su propia herramienta de proceso para compilar Bootstrap. Descargar archivos fuente
• Método 2: archivos CSS y JS precompilados
  Descargue los archivos precompilados de Bootstrap v4.5.0 y agréguelos al proyecto. Descarga Bootstrap
• Método 3: BootstrapCDN
  usa BootstrapCDN para que no haya necesidad de descargar, y los archivos CSS y JS precompilados de Bootstrap se cargan en el proyecto usando el caché.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Nota: JavaScript compilado, no olvide introducir la versión CDN de jQuery y Popper.js antes.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Gerente de empaquetación

Con algunos de los administradores de paquetes más populares, puede arrastrar los archivos fuente de Bootstrap a casi cualquier proyecto. No importa cuál sea el administrador de paquetes, Bootstrap requerirá que el compilador Sass y el Autoprefixer establezcan la configuración que coincida con nuestra versión compilada oficial.

• npm
  usa npm para instalar Bootstrap en una aplicación Node.js:

npm install bootstrap

• Yarn
  usa yarn para instalar Bootstrap en la aplicación Node.js:

yarn add bootstrap

• RubyGems
  agrega el siguiente código a tu archivo Gemfile y luego usa Bundler (recomendado) y la herramienta RubyGems para instalar Bootstrap en tu aplicación Ruby:

$ gem 'bootstrap', '~> 4.5.0'

//不使用 Bundler，你还可以通过以下命令安装 Bootstrap 的 gem：
$ gem install bootstrap -v 4.5.0

• Composer
  También puede usar Composer para instalar y administrar los archivos Sass y JavaScript de Bootstrap:

composer require twbs/bootstrap:4.5.0

• NuGet
  Si es un desarrollador de .NET, también puede usar NuGet para instalar y administrar los archivos CSS o Sass y JavaScript de Bootstrap:

Install-Package bootstrap
Install-Package bootstrap.sass

contenido

El contenido incluido en Bootstrap incluye versiones de código fuente y precompiladas. Tenga en cuenta que el complemento JavaScript de Bootstrap requiere jQuery.

Cargador de arranque precompilado

Después de la descarga, descomprima la carpeta comprimida, con el siguiente contenido:

bootstrap /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css. mapa
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap .css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js /
├── bootstrap.bundle.js
├── bootstrap.bundle .js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└─ ─ bootstrap.min.js.map

CSS y JS compilados (bootstrap. ), Y CSS y JS compilados y optimizados (bootstrap.min. ).
Los mapas de origen (bootstrap. *. Map) se pueden utilizar en herramientas de desarrollo para algunos navegadores.
El archivo JS incluido (bootstrap.bundle.js minimiza bootstrap.bundle.min.js) incluye Popper pero no jQuery.

Archivo CSS

El contenido del archivo css es el siguiente:

Archivo JS

Código fuente del programa Bootstrap

La descarga del código fuente de Bootstrap incluye activos CSS y JavaScript precompilados, así como Sass fuente, JavaScript y documentación. Más específicamente, incluye lo siguiente y más:

bootstrap /
├── dist /
│ ├── css /
│ └── js /
├── site /
│ └──docs /
│ └── 4.5 /
│ └── ejemplos /
├── js /
└── scss /

Navegadores y dispositivos

Navegadores compatibles

Bootstrap admite las versiones más recientes y estables de todos los principales navegadores y plataformas. En Windows, se admite Internet Explorer 10-11 / Microsoft Edge.
No hay soporte explícito para usar la última versión de los navegadores alternativos WebKit, Blink o Gecko directamente o mediante la API de vista web de la plataforma. Sin embargo, Bootstrap también debería (en la mayoría de los casos) mostrarse y ejecutarse normalmente en estos navegadores. A continuación, se proporciona información de soporte más específica.

https://github.com/browserslist/browserslist#readme
>=1%
última 1 versión principal
no muerta
Chrome> = 45
Firefox> = 38
Edge> = 12
Explorer> = 10
iOS> = 9
Safari> = 9
Android> = 4.4
Opera > = 30

Dispositivos móviles

En términos generales, Bootstrap admite la última versión del navegador predeterminado para cada plataforma principal.
注意:Los navegadores proxy (como Opera Mini, modo Turbo de Opera Mobile, mini navegador UC, Amazon Silk) no son compatibles. Los detalles son los siguientes:

Navegador de escritorio

Asimismo, se admite la última versión de la mayoría de los navegadores de escritorio. Los detalles son los siguientes:

Navegador IE

Compatible con Internet Explorer 10+; IE9 y versiones anteriores no lo son.
Nota: Algunos atributos CSS3 y elementos HTML5 no son totalmente compatibles con IE10 o requieren atributos de prefijo para tener una funcionalidad completa. Si necesita compatibilidad con IE8-9, utilice Bootstrap 3. Obtenga información detallada sobre la compatibilidad del navegador con las funciones de CSS3 y HTML5. ...

Javascript

1. Haga que Bootstrap cobre vida con el complemento JavaScript opcional integrado en jQuery

2. El complemento se puede incluir por separado (usando el js / dist / .js personal de Bootstrap ), o ambos bootstrap.js o el complemento reducido bootstrap.min.js (sin incluir ambos). Si usa paquetes (Webpack, resumen ...), puede usar archivos listos para /js/dist/.jsUMD.

3. 所有插件都依赖于jQuery（这意味着必须在插件文件之前包含jQuery ）

Deshabilitar la API de atributos de datos

Para deshabilitar la API de atributos de datos, debe desvincular todos los eventos en el espacio de nombres del documento. La API de datos es la siguiente:

$(document).off('.data-api')

Para ubicar un complemento específico, simplemente incluya el nombre del complemento como el espacio de nombres y el espacio de nombres de data-api, como se muestra a continuación:

$(document).off('.alert.data-api')

evento

Bootstrap proporciona eventos personalizados para el funcionamiento exclusivo de la mayoría de los complementos. Todos los eventos infinitivos proporcionan preventDefault()funcionalidad. Esto proporciona la capacidad de detener la ejecución antes de que comience la acción. Al regresar del controlador de eventos false, también se llamará automáticamente a preventDefault ().

$('#myModal').on('show.bs.modal', function (e) {
    
    
  if (!data) {
    
    
    return e.preventDefault() // stops modal from being shown
  }
})

API programática

Utilice todos los complementos de Bootstrap a través de la API de JavaScript. Todas las API públicas son un único método enlazable y devuelven el conjunto de acciones.

$('.btn.danger').button('toggle').addClass('fat')

// 所有方法都应接受可选的options对象，以特定方法为目标的字符串或不包含任何内容（以默认行为启动插件）：如下
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({
    
     keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Cada complemento también expone su constructor original en la propiedad Constructor $.fn.popover.Constructor. Si desea obtener un plug-in caso particular, recuperarlo de los elementos: $('[rel="popover"]').data('popover').

Conversión y funciones asincrónicas

Todos los métodos de la API de programación son asincrónicos y regresan a la persona que llama después de que comienza la transición pero antes de que finalice.

Para realizar operaciones después de que se complete la conversión, puede escuchar el evento correspondiente.

$('#myCollapse').on('shown.bs.collapse', function (e) {
    
    
  // Action to execute once the collapsible area is expanded
})

Además, se ignorarán las llamadas a métodos a los componentes de transición.

$('#myCarousel').on('slid.bs.carousel', function (e) {
    
    
  $('#myCarousel').carousel('2') // 1完成后将滑向2
})

$('#myCarousel').carousel('1') // 
$('#myCarousel').carousel('2') // 被忽视

Configuración predeterminada

Puede cambiar la configuración predeterminada del complemento modificando el objeto Constructor.Default del complemento:

$.fn.modal.Constructor.Default.keyboard = false

Tematización

Personalice Bootstrap 4 con las nuevas variables de Sass integradas para implementar preferencias de estilo globales para facilitar los cambios de temas y componentes. En Bootstrap 3, la tematización se reemplaza principalmente por variables en LESS, CSS personalizado y una hoja de estilo de tema separada que incluimos en el archivo dist. Con un poco de esfuerzo, puede rediseñar completamente la apariencia de Bootstrap 3 sin tocar los archivos principales. Bootstrap 4 proporciona un enfoque familiar pero ligeramente diferente.
Ahora, la tematización se realiza a través de variables Sass, mapeo Sass y CSS personalizado. No hay más hojas de estilo temáticas dedicadas. En cambio, podemos habilitar temas integrados para agregar degradados, sombras, etc.

Hablar con descaro a

Utilice archivos Sass de origen para utilizar variables, mapas, mixins, etc. En la compilación de Bootstrap, la precisión del redondeo de Sass se ha aumentado a 6 (el valor predeterminado es 5) para evitar problemas de redondeo del navegador.
...
Aprendamos más sobre bootstrap4 y aprendamos más sobre la documentación oficial de bootstrap4 ...