Descargar

Bootstrap (actualmente v3.4.1) ten algunhas formas sinxelas de comezar rapidamente, cada unha delas apelando a un nivel de habilidade e un caso de uso diferentes. Lea para ver o que se adapta ás súas necesidades particulares.

jsDelivr

A xente de jsDelivr ofrece amablemente soporte CDN para CSS e JavaScript de Bootstrap. Simplemente use estas ligazóns jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Instalar con Bower

Tamén podes instalar e xestionar as fontes Less, CSS, JavaScript e as fontes de Bootstrap usando Bower :

bower install bootstrap

Instalar con npm

Tamén pode instalar Bootstrap usando npm :

npm install bootstrap@3

require('bootstrap')cargará todos os complementos jQuery de Bootstrap no obxecto jQuery. O bootstrapmódulo en si non exporta nada. Podes cargar manualmente os complementos jQuery de Bootstrap individualmente cargando os /js/*.jsficheiros no directorio de nivel superior do paquete.

Bootstrap package.jsoncontén algúns metadatos adicionais baixo as seguintes claves:

• less- ruta ao ficheiro de orixe Less principal de Bootstrap
• style- camiño ao CSS non minificado de Bootstrap que foi precompilado usando a configuración predeterminada (sen personalización)

Instalar con Composer

Tamén podes instalar e xestionar as fontes Less, CSS, JavaScript e as fontes de Bootstrap usando Composer :

composer require twbs/bootstrap

Prefixo automático necesario para Less/Sass

Bootstrap usa Autoprefixer para xestionar os prefixos de provedores CSS . Se estás a compilar Bootstrap desde a súa fonte Less/Sass e non estás a usar o noso Gruntfile, terás que integrar o Autoprefixer no teu proceso de compilación. Se estás a usar o Bootstrap precompilado ou o noso Gruntfile, non tes que preocuparte porque Autoprefixer xa está integrado no noso Gruntfile.

Que está incluído

Bootstrap pódese descargar de dúas formas, dentro das cales atoparás os seguintes directorios e ficheiros, que agrupan loxicamente os recursos comúns e proporcionan variacións tanto compiladas como minificadas.

Bootstrap precompilado

Unha vez descargado, descomprime o cartafol comprimido para ver a estrutura de Bootstrap (compilado). Verás algo así:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Esta é a forma máis básica de Bootstrap: ficheiros precompilados para un uso rápido en case calquera proxecto web. Ofrecemos CSS e JS compilados ( bootstrap.*), así como CSS e JS compilados e minificados ( bootstrap.min.*). Os mapas fonte CSS ( bootstrap.*.map) están dispoñibles para usar con determinadas ferramentas de desenvolvemento de navegadores. Inclúense fontes de Glyphicons, así como o tema Bootstrap opcional.

Código fonte bootstrap

A descarga do código fonte de Bootstrap inclúe os recursos CSS, JavaScript e fontes precompilados, xunto con Source Less, JavaScript e documentación. Máis concretamente, inclúe o seguinte e máis:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Os less/, js/, e fonts/son o código fonte dos nosos tipos de letra CSS, JS e iconas (respectivamente). O dist/cartafol inclúe todo o que aparece na sección de descarga precompilada anterior. O docs/cartafol inclúe o código fonte da nosa documentación e examples/do uso de Bootstrap. Ademais, calquera outro ficheiro incluído ofrece soporte para paquetes, información de licenza e desenvolvemento.

Compilación de CSS e JavaScript

Bootstrap usa Grunt para o seu sistema de compilación, con métodos cómodos para traballar co framework. É así como compilamos o noso código, realizamos probas e moito máis.

Instalando Grunt

Para instalar Grunt, primeiro debes descargar e instalar node.js (que inclúe npm). npm significa módulos empaquetados en nodos e é unha forma de xestionar as dependencias de desenvolvemento a través de node.js.

1. Instalar grunt-cliglobalmente con npm install -g grunt-cli.
2. Navegue ata o directorio raíz /bootstrap/e, a continuación, execute npm install. npm mirará o package.jsonficheiro e instalará automaticamente as dependencias locais necesarias que aparecen alí.

Cando estea completado, poderás executar os distintos comandos Grunt proporcionados desde a liña de comandos.

Comandos Grunt dispoñibles

grunt dist(Só compilar CSS e JavaScript)

Rexenera o /dist/directorio con ficheiros CSS e JavaScript compilados e minificados. Como usuario de Bootstrap, este é normalmente o comando que desexa.

grunt watch(Ver)

Observa os ficheiros de orixe de Less e recompílaos automaticamente a CSS sempre que gardas un cambio.

grunt test(Executa probas)

Executa JSHint e executa as probas QUnit en navegadores reais grazas a Karma .

grunt docs(Construír e probar os recursos de documentos)

Crea e proba CSS, JavaScript e outros recursos que se usan ao executar a documentación localmente a través de bundle exec jekyll serve.

grunt(Constrúe absolutamente todo e faga probas)

Compila e minimiza CSS e JavaScript, crea o sitio web de documentación, executa o validador HTML5 contra os documentos, rexenera os recursos do Customizer e moito máis. Require Jekyll . Normalmente só é necesario se estás pirateando o propio Bootstrap.

Solución de problemas

Se atopa problemas coa instalación de dependencias ou coa execución de comandos Grunt, primeiro elimine o /node_modules/directorio xerado por npm. Despois, volve executar npm install.

Modelo básico

Comeza con este modelo HTML básico ou modifica estes exemplos . Agardamos que personalice os nosos modelos e exemplos, adaptándoos ás súas necesidades.

Copia o seguinte HTML para comezar a traballar cun documento de Bootstrap mínimo.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Exemplos

Constrúe o modelo básico anterior cos moitos compoñentes de Bootstrap. Animámosche a que personalices e adaptes Bootstrap ás necesidades do teu proxecto individual.

Obtén o código fonte de cada exemplo a continuación descargando o repositorio de Bootstrap . Pódense atopar exemplos no docs/examples/directorio.

Usando o marco

Modelo de inicio

Nada máis que o básico: CSS e JavaScript compilados xunto cun contedor.

Tema Bootstrap

Carga o tema Bootstrap opcional para unha experiencia visualmente mellorada.

Reixas

Varios exemplos de deseños de cuadrícula cos catro niveis, aniñación e moito máis.

Jumbotron

Constrúe ao redor do jumbotron cunha barra de navegación e algunhas columnas de reixa básicas.

Jumbotron estreito

Constrúe unha páxina máis personalizada reducindo o contedor predeterminado e o jumbotron.

Navbars en acción

Barra de navegación

Modelo super básico que inclúe a barra de navegación xunto con algún contido adicional.

Barra de navegación superior estática

Modelo super básico cunha barra de navegación superior estática xunto con algún contido adicional.

Barra de navegación fixa

Modelo super básico cunha barra de navegación superior fixa xunto con algún contido adicional.

Compoñentes personalizados

Cuberta

Un modelo dunha páxina para crear páxinas de inicio sinxelas e fermosas.

Carrusel

Personaliza a barra de navegación e o carrusel, despois engade algúns compoñentes novos.

Blog

Disposición sinxela de blog de dúas columnas con navegación, cabeceira e tipo personalizados.

Panel de control

Estrutura básica para un panel de administración con barra lateral fixa e barra de navegación.

Páxina de inicio de sesión

Deseño e deseño de formularios personalizados para un formulario de inicio de sesión sinxelo.

Navegación xustificada

Crea unha barra de navegación personalizada con ligazóns xustificadas. Aviso! Non é moi amigable con Safari.

Pé de páxina pegajoso

Engade un pé de páxina na parte inferior da vista cando o contido sexa máis curto ca el.

Pé de páxina adhesivo con barra de navegación

Engade un pé de páxina na parte inferior da ventana gráfica cunha barra de navegación fixa na parte superior.

Experimentos

Bootstrap non responde

Desactive facilmente a capacidade de resposta de Bootstrap segundo os nosos documentos .

Off lenzo

Crea un menú de navegación fóra do lenzo que se pode alternar para usar con Bootstrap.

Ferramentas

Bootlint

Bootlint é a ferramenta oficial de linter HTML de Bootstrap . Comproba automaticamente varios erros HTML comúns en páxinas web que usan Bootstrap dun xeito bastante "vainilla". Os compoñentes/widgets de Vanilla Bootstrap requiren que as súas partes do DOM se axusten a determinadas estruturas. Bootlint comproba que as instancias dos compoñentes de Bootstrap teñan HTML correctamente estruturado. Considera engadir Bootlint á túa cadea de ferramentas de desenvolvemento web Bootstrap para que ningún dos erros comúns retarde o desenvolvemento do teu proxecto.

Comunidade

Mantente ao día do desenvolvemento de Bootstrap e ponte en contacto coa comunidade con estes recursos útiles.

• Le e subscríbete ao blog oficial de Bootstrap .
• Chatea con outros Bootstrappers usando IRC no irc.freenode.netservidor, na canle ##bootstrap .
• Para obter axuda para usar Bootstrap, pregunte en StackOverflow usando a etiquetatwitter-bootstrap-3 .
• Os desenvolvedores deben usar a palabra clave bootstrapnos paquetes que modifican ou engaden a funcionalidade de Bootstrap cando se distribúen a través de npm ou mecanismos de entrega similares para obter a máxima visibilidade.
• Busca exemplos inspiradores de persoas que crean con Bootstrap na Bootstrap Expo .

Tamén podes seguir @getbootstrap en Twitter para ver os últimos fofocas e vídeos musicais incribles.

Desactivando a capacidade de resposta

Bootstrap adapta automaticamente as túas páxinas a varios tamaños de pantalla. Aquí tes como desactivar esta función para que a túa páxina funcione como este exemplo que non responde .

Pasos para desactivar a capacidade de resposta da páxina

1. Omita a ventana gráfica <meta>mencionada nos documentos CSS
2. Anular a widthpara .containercada nivel de grade cun único ancho, por exemplo width: 970px !important;Asegúrese de que isto vén despois do CSS de Bootstrap predeterminado. Opcionalmente, pode evitar o !importantcon consultas multimedia ou algún selector-fu.
3. Se usas barras de navegación, elimina todos os comportamentos que se contraen e se expanden.
4. Para os deseños de cuadrícula, use .col-xs-*clases ademais das medias/grandes ou en lugar das mesmas. Non te preocupes, a reixa do dispositivo extra-pequena escala a todas as resolucións.

Aínda necesitarás Respond.js para IE8 (xa que as nosas consultas de medios aínda están alí e deben ser procesadas). Isto desactiva os aspectos do "sitio móbil" de Bootstrap.

Modelo de arranque coa capacidade de resposta desactivada

Aplicamos estes pasos a un exemplo. Le o seu código fonte para ver os cambios específicos implementados.

Ver exemplo que non responde

Soporte de navegador e dispositivo

Bootstrap está construído para funcionar mellor nos últimos navegadores de escritorio e móbiles, o que significa que os navegadores máis antigos poden mostrar representacións de determinados compoñentes con estilos diferentes, aínda que totalmente funcionais.

Navegadores compatibles

En concreto, admitimos as versións máis recentes dos seguintes navegadores e plataformas.

Os navegadores alternativos que usan a versión máis recente de WebKit, Blink ou Gecko, directamente ou a través da API de visualización web da plataforma, non son compatibles explícitamente. Non obstante, Bootstrap debería (na maioría dos casos) mostrarse e funcionar correctamente nestes navegadores tamén. A continuación ofrécese información de asistencia máis específica.

Dispositivos móbiles

En xeral, Bootstrap admite as últimas versións dos navegadores predeterminados de cada plataforma principal. Teña en conta que os navegadores proxy (como Opera Mini, o modo Turbo de Opera Mobile, UC Browser Mini, Amazon Silk) non son compatibles.

Navegadores de escritorio

Do mesmo xeito, son compatibles as versións máis recentes da maioría dos navegadores de escritorio.

En Windows, admitimos Internet Explorer 8-11 .

Para Firefox, ademais da última versión estable normal, tamén admitimos a versión máis recente de Extended Support Release (ESR) de Firefox.

Extraoficialmente, Bootstrap debería verse e comportarse o suficientemente ben en Chromium e Chrome para Linux, Firefox para Linux e Internet Explorer 7, así como Microsoft Edge, aínda que non son compatibles oficialmente.

Para obter unha lista dalgúns dos erros do navegador cos que Bootstrap ten que lidiar, consulte o noso Muro de erros do navegador .

Internet Explorer 8 e 9

Internet Explorer 8 e 9 tamén son compatibles, non obstante, teña en conta que algunhas propiedades CSS3 e elementos HTML5 non son totalmente compatibles con estes navegadores. Ademais, Internet Explorer 8 require o uso de Respond.js para habilitar a compatibilidade de consulta multimedia.

Visita Podo usar... para obter máis información sobre a compatibilidade do navegador coas funcións CSS3 e HTML5.

Internet Explorer 8 e Respond.js

Teña coidado coas seguintes advertencias cando use Respond.js nos seus contornos de desenvolvemento e produción para Internet Explorer 8.

Respond.js e CSS entre dominios

Usar Respond.js con CSS aloxado nun (sub)dominio diferente (por exemplo, nun CDN) require algunha configuración adicional. Consulta os documentos de Respond.js para obter máis información.

Respond.js efile://

Debido ás regras de seguranza do navegador, Respond.js non funciona coas páxinas vistas mediante o file://protocolo (como cando se abre un ficheiro HTML local). Para probar as funcións de resposta en IE8, consulta as túas páxinas a través de HTTP(S). Consulta os documentos de Respond.js para obter máis información.

Respond.js e@import

Respond.js non funciona con CSS ao que se fai referencia mediante @import. En particular, sábese que algunhas configuracións de Drupal usan @import. Consulta os documentos de Respond.js para obter máis información.

Internet Explorer 8 e tamaño de caixa

IE8 non é totalmente compatible box-sizing: border-box;cando se combina con min-width, max-width, min-heightou max-height. Por ese motivo, a partir da v3.0.1, xa non usamos max-widthen .containers.

Internet Explorer 8 e @font-face

IE8 ten algúns problemas @font-facecando se combina con :before. Bootstrap usa esa combinación cos seus Glyphicons. Se unha páxina está almacenada na caché e se carga sen o rato sobre a xanela (é dicir, preme o botón de actualización ou carga algo nun iframe), entón a páxina queda representada antes de que se cargue o tipo de letra. Pasando o rato sobre a páxina (corpo), mostraranse algunhas das iconas e ao pasar o rato sobre as restantes mostraranse tamén. Consulte o número 13863 para obter máis detalles.

Modos de compatibilidade IE

Bootstrap non é compatible cos antigos modos de compatibilidade de Internet Explorer. Para asegurarse de que está a usar o modo de renderizado máis recente para IE, considere incluír a <meta>etiqueta adecuada nas súas páxinas:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirme o modo de documento abrindo as ferramentas de depuración: prema F12e marque o "Modo de documento".

Esta etiqueta inclúese en toda a documentación e exemplos de Bootstrap para garantir a mellor representación posible en cada versión compatible de Internet Explorer.

Consulte esta pregunta de StackOverflow para obter máis información.

Internet Explorer 10 en Windows 8 e Windows Phone 8

Internet Explorer 10 non diferencia o ancho do dispositivo do ancho da ventana gráfica e, polo tanto, non aplica correctamente as consultas multimedia no CSS de Bootstrap. Normalmente, só engadiría un fragmento rápido de CSS para solucionar isto:

@-ms-viewport       { width: device-width; }

Non obstante, isto non funciona para dispositivos que executan versións de Windows Phone 8 anteriores á Actualización 3 (tamén coñecido como GDR3) , xa que fai que estes dispositivos mostren unha vista maioritariamente de escritorio en lugar dunha vista estreita do "teléfono". Para solucionar isto, terás que incluír o seguinte CSS e JavaScript para evitar o erro .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Para obter máis información e pautas de uso, lea Windows Phone 8 e Device-Width .

Como aviso, incluímos isto en toda a documentación e exemplos de Bootstrap como demostración.

Redondeo por cento de Safari

O motor de renderizado das versións de Safari anteriores á v7.1 para OS X e Safari para iOS v8.0 tivo algúns problemas co número de cifras decimais utilizadas nas nosas .col-*-1clases de grade. Entón, se tiveses 12 columnas de grade individuais, notarías que quedaron curtas en comparación con outras filas de columnas. Ademais de actualizar Safari/iOS, tes algunhas opcións de solucións:

• Engadir.pull-right á túa última columna de grade para obter o aliñamento á dereita
• Axusta as túas porcentaxes manualmente para obter o redondeo perfecto para Safari (máis difícil que a primeira opción)

Modais, barras de navegación e teclados virtuais

Desbordamento e desprazamento

O soporte para overflow: hiddeno <body>elemento é bastante limitado en iOS e Android. Para iso, cando te despraces pola parte superior ou inferior dun modal en calquera dos navegadores destes dispositivos, o <body>contido comezará a desprazarse. Consulte o erro de Chrome #175502 (solucionado en Chrome v40) e o erro de WebKit #153852 .

Campos de texto de iOS e desprazamento

A partir de iOS 9.3, mentres un modal está aberto, se o toque inicial dun xesto de desprazamento está dentro do límite dun texto <input>ou dun <textarea>, o <body>contido debaixo do modal desprazarase en lugar do propio modal. Consulte o erro de WebKit #153856 .

Teclados virtuais

Ademais, teña en conta que se está a usar unha barra de navegación fixa ou a usar entradas dentro dun modal, iOS ten un erro de renderizado que non actualiza a posición dos elementos fixos cando se activa o teclado virtual. Algunhas solucións para isto inclúen transformar os teus elementos position: absoluteou invocar un temporizador de foco para tentar corrixir o posicionamento manualmente. Isto non o xestiona Bootstrap, polo que depende de ti decidir cal é a mellor solución para a túa aplicación.

Menú despregable da barra de navegación

O .dropdown-backdropelemento non se usa en iOS no navegador debido á complexidade da indexación z. Así, para pechar menús despregables nas barras de navegación, debes facer clic directamente no elemento despregable (ou calquera outro elemento que desencadee un evento de clic en iOS ).

Zoom do navegador

O zoom da páxina presenta inevitablemente artefactos de renderizado nalgúns compoñentes, tanto en Bootstrap como no resto da web. Dependendo do problema, é posible que poidamos solucionalo (busque primeiro e despois abra un problema se é necesario). Non obstante, tendemos a ignoralos xa que moitas veces non teñen unha solución directa que non sexan as solucións hackers.

Sticky :hover/ :focusno móbil

Aínda que non é posible pasar o rato real na maioría das pantallas táctiles, a maioría dos navegadores móbiles emulan a compatibilidade co rato e fan que o rato sexa :hover"pegañento". Noutras palabras, :hoveros estilos comezan a aplicarse despois de tocar un elemento e só deixan de aplicarse despois de que o usuario toque outro elemento. Isto pode provocar que os :hoverestados de Bootstrap queden indesexablemente "atascados" neses navegadores. Algúns navegadores móbiles tamén fan un :focuspegajoso similar. Actualmente non hai unha solución sinxela para estes problemas que non sexa a eliminación total destes estilos.

Impresión

Mesmo nalgúns navegadores modernos, a impresión pode ser peculiar.

En particular, a partir de Chrome v32 e independentemente da configuración das marxes, Chrome utiliza un ancho de visualización significativamente máis reducido que o tamaño físico do papel ao resolver consultas de medios ao imprimir unha páxina web. Isto pode provocar que a reixa extra-pequena de Bootstrap se active de forma inesperada ao imprimir. Consulte o problema #12078 e o erro de Chrome #273306 para obter algúns detalles. Solucións suxeridas:

• Adopta a cuadrícula extra-pequena e asegúrate de que a túa páxina se vexa aceptable baixo ela.
• Personaliza os valores do@screen-* variables Menos para que o papel da túa impresora se considere máis grande que extra pequeno.
• Engade consultas de medios personalizadas para cambiar os puntos de interrupción do tamaño da grade só para os medios impresos.

Ademais, a partir de Safari v8.0, os de ancho fixo .containerpoden facer que Safari utilice un tamaño de letra inusualmente pequeno ao imprimir. Consulte #14868 e o erro de WebKit #138192 para obter máis detalles. Unha posible solución para isto é engadir o seguinte CSS:

@media print {
  .container {
    width: auto;
  }
}

Navegador de accións de Android

Fóra da caixa, Android 4.1 (e incluso algunhas versións máis recentes aparentemente) envíanse coa aplicación Navegador como o navegador web predeterminado preferido (a diferenza de Chrome). Desafortunadamente, a aplicación Navegador ten moitos erros e inconsistencias con CSS en xeral.

Seleccione menús

Nos <select>elementos, o navegador de accións de Android non mostrará os controis laterais se hai un border-radiuse/ou borderaplicado. (Consulta esta pregunta de StackOverflow para obter máis información.) Usa o fragmento de código que aparece a continuación para eliminar o CSS ofensivo e representalo <select>como un elemento sen estilo no navegador de accións de Android. O sniffing do axente de usuario evita interferencias cos navegadores Chrome, Safari e Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Queres ver un exemplo? Consulte esta demostración de JS Bin.

Validadores

Co fin de ofrecer a mellor experiencia posible aos navegadores antigos e con erros, Bootstrap usa hackeos de navegador CSS en varios lugares para orientar CSS especiais a determinadas versións do navegador para evitar erros nos propios navegadores. Estes pirateos fan que os validadores CSS se queixan de que non son válidos. En algúns lugares, tamén usamos funcións CSS de vangarda que aínda non están totalmente estandarizadas, pero que se usan exclusivamente para mellorar progresivamente.

Estas advertencias de validación non importan na práctica, xa que a parte non hacky do noso CSS valida por completo e as porcións hacky non interfiren co bo funcionamento da parte non hacky, polo que ignoramos deliberadamente estas advertencias particulares.

Os nosos documentos HTML tamén teñen algúns avisos de validación HTML triviais e intrascendentes debido á nosa inclusión dunha solución para un determinado erro de Firefox .

Apoio de terceiros

Aínda que non admitimos oficialmente ningún complemento ou complemento de terceiros, si ofrecemos algúns consellos útiles para evitar posibles problemas nos teus proxectos.

Tamaño de caixa

Algúns programas de terceiros, incluídos Google Maps e Google Custom Search Engine, entran en conflito con Bootstrap debido a * { box-sizing: border-box; }, unha regra que fai que paddingnon afecte ao ancho calculado final dun elemento. Obtén máis información sobre o modelo de caixa e o tamaño en Trucos CSS .

Dependendo do contexto, pode anular segundo sexa necesario (Opción 1) ou restablecer o tamaño da caixa para rexións enteiras (Opción 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Accesibilidade

Bootstrap segue estándares web comúns e, cun mínimo esforzo extra, pódese usar para crear sitios accesibles para os que usan AT .

Saltar navegación

Se a túa navegación contén moitas ligazóns e aparece antes do contido principal no DOM, engade unha Skip to main contentligazón antes da navegación (para unha explicación sinxela, consulta este artigo do proxecto A11Y sobre omitir ligazóns de navegación ). Ao usar a .sr-onlyclase ocultarase visualmente a ligazón de omisión e a .sr-only-focusableclase asegurarase de que a ligazón se faga visible unha vez enfocada (para usuarios de teclado videntes).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Títulos anidados

Ao aniñar títulos ( <h1>- <h6>), a cabeceira do documento principal debe ser un <h1>. Os títulos posteriores deberían facer un uso lóxico de <h2>-<h6> para que os lectores de pantalla poidan construír unha táboa de contidos para as súas páxinas.

Máis información en HTML CodeSniffer e AccessAbility de Penn State .

Contraste de cor

Actualmente, algunhas das combinacións de cores predeterminadas dispoñibles en Bootstrap (como as distintas clases de botóns con estilo , algunhas das cores de resaltado do código que se usan para os bloques de código básicos , a clase auxiliar de .bg-primary fondo contextual e a cor da ligazón predeterminada cando se usa nun fondo branco) teñen unha relación de contraste baixa (por debaixo da proporción recomendada de 4,5:1 ). Isto pode causar problemas aos usuarios con baixa visión ou daltónicos. Estas cores predeterminadas poden ter que modificarse para aumentar o seu contraste e lexibilidade.

Recursos adicionais

• Bookmarklet "HTML Codesniffer" para identificar problemas de accesibilidade
• Extensión de ferramentas para programadores de accesibilidade de Chrome
• Analizador de contraste de cor
• O proxecto A11Y
• Documentación de accesibilidade de MDN

Preguntas frecuentes sobre licenzas

Bootstrap publícase baixo a licenza MIT e ten copyright 2019 Twitter. Reducido a anacos máis pequenos, pódese describir coas seguintes condicións.

Esixe que:

• Mantén a licenza e o aviso de copyright incluídos nos ficheiros CSS e JavaScript de Bootstrap cando os uses nas túas obras

Permítelle:

• Descarga e utiliza Bootstrap de xeito gratuíto, total ou parcialmente, para fins persoais, privados, internos da empresa ou comerciais
• Use Bootstrap nos paquetes ou distribucións que cree
• Modificar o código fonte
• Conceda unha sublicenza para modificar e distribuír Bootstrap a terceiros non incluídos na licenza

Prohíbeche:

• Facer responsables dos danos aos autores e aos propietarios da licenza xa que Bootstrap se ofrece sen garantía
• Responsabilizar aos creadores ou aos titulares dos dereitos de autor de Bootstrap
• Redistribuír calquera parte de Bootstrap sen a debida atribución
• Use calquera marca propiedade de Twitter de calquera forma que poida indicar ou implicar que Twitter avala a súa distribución
• Use calquera marca propiedade de Twitter de calquera forma que poida indicar ou implicar que creaches o software de Twitter en cuestión

Non esixe que:

• Incluír a fonte de Bootstrap en si, ou de calquera modificación que lle fixera, en calquera redistribución que poida montar que o inclúa
• Envía os cambios que realices en Bootstrap ao proxecto Bootstrap (aínda que se recomenda este tipo de comentarios)

A licenza de Bootstrap completa atópase no repositorio do proxecto para obter máis información.

Traducións

Os membros da comunidade traduciron a documentación de Bootstrap a varios idiomas. Ningún ten soporte oficial e é posible que non estean sempre actualizados.

• Bootstrap 中文文档 (chinés)
• Bootstrap para Dansk (danés)
• Bootstrap en francés (francés)
• Bootstrap auf Deutsch (alemán)
• Bootstrap en italiano (italiano)
• Bootstrap 한국어 (coreano)
• Bootstrap em Português do Brasil (portugués brasileiro)
• Bootstrap по-русски (ruso)
• Bootstrap en español (español)
• Türkçe Bootstrap (turco)
• Bootstrap українською (ucraíno)
• Bootstrap bằng tiếng Việt (vietnamita)

Non axudamos a organizar nin a aloxar traducións, só enlazamos con elas.

Remataches unha tradución nova ou mellor? Abre unha solicitude de extracción para engadila á nosa lista.