Comezando
Unha descrición xeral de Bootstrap, como descargar e usar, modelos e exemplos básicos e moito máis.
Unha descrición xeral de Bootstrap, como descargar e usar, modelos e exemplos básicos e moito máis.
Bootstrap (actualmente v3.3.7) 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.
CSS, JavaScript e fontes compilados e reducidos. Non se inclúen documentos ou ficheiros de orixe orixinais.
Source Less, JavaScript e ficheiros de fontes, xunto cos nosos documentos. Require un compilador Less e algunha configuración.
Bootstrap portado de Less a Sass para facilitar a inclusión en proxectos Rails, Compass ou Sass.
A xente de jsDelivr ofrece amablemente soporte CDN para CSS e JavaScript de Bootstrap. Só ten que usar estas ligazóns CDN de Bootstrap .
Tamén podes instalar e xestionar as fontes Less, CSS, JavaScript e as fontes de Bootstrap usando Bower :
Tamén pode instalar Bootstrap usando npm :
require('bootstrap')
cargará todos os complementos jQuery de Bootstrap no obxecto jQuery. O bootstrap
módulo en si non exporta nada. Podes cargar manualmente os complementos jQuery de Bootstrap individualmente cargando os /js/*.js
ficheiros no directorio de nivel superior do paquete.
Bootstrap package.json
contén algúns metadatos adicionais baixo as seguintes claves:
less
- ruta ao ficheiro de orixe Less principal de Bootstrapstyle
- camiño ao CSS non minificado de Bootstrap que foi precompilado usando a configuración predeterminada (sen personalización)Tamén podes instalar e xestionar as fontes Less, CSS, JavaScript e as fontes de Bootstrap usando Composer :
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 Autoprefixer no teu proceso de compilación. Se estás usando Bootstrap precompilado ou usando o noso Gruntfile, non tes que preocuparte porque Autoprefixer xa está integrado no noso Gruntfile.
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.
Teña en conta que todos os complementos de JavaScript requiren que se inclúa jQuery, como se mostra no modelo de inicio . Consulte o nosobower.json
para ver que versións de jQuery son compatibles.
Unha vez descargado, descomprime o cartafol comprimido para ver a estrutura de Bootstrap (compilado). Verás algo así:
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.
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:
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.
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.
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.
Despois, desde a liña de comandos:grunt-cli
globalmente con npm install -g grunt-cli
./bootstrap/
e, a continuación, execute npm install
. npm mirará o package.json
ficheiro 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.
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 sen cabeza en PhantomJS .
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.
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
.
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.
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.
Modelo super básico que inclúe a barra de navegación xunto con algún contido adicional.
Estrutura básica para un panel de administración con barra lateral fixa e barra de navegación.
Deseño e deseño de formularios personalizados para un formulario de inicio de sesión sinxelo.
Crea unha barra de navegación personalizada con ligazóns xustificadas. Aviso! Non é moi amigable con Safari.
Desactive facilmente a capacidade de resposta de Bootstrap segundo os nosos documentos .
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.
Mantente ao día do desenvolvemento de Bootstrap e ponte en contacto coa comunidade con estes recursos útiles.
irc.freenode.net
servidor, na canle ##bootstrap .twitter-bootstrap-3
.bootstrap
nos 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.Tamén podes seguir @getbootstrap en Twitter para ver os últimos fofocas e vídeos musicais incribles.
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 .
<meta>
mencionada nos documentos CSSwidth
para .container
cada 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 !important
con consultas multimedia ou algún selector-fu..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.
Aplicamos estes pasos a un exemplo. Le o seu código fonte para ver os cambios específicos implementados.
Queres migrar dunha versión anterior de Bootstrap a v3.x? Consulte a nosa guía de migración .
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.
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.
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.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Soportado | Soportado | N / A |
iOS | Soportado | Soportado | Soportado |
Do mesmo xeito, son compatibles as versións máis recentes da maioría dos navegadores de escritorio.
Chrome | Firefox | Internet Explorer | Ópera | Safari | |
---|---|---|---|---|---|
Mac | Soportado | Soportado | N / A | Soportado | Soportado |
Windows | Soportado | Soportado | Soportado | Soportado | Non é compatible |
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 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.
Característica | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Non é compatible | Soportado |
box-shadow |
Non é compatible | Soportado |
transform |
Non é compatible | Soportado, con -ms prefixo |
transition |
Non é compatible | |
placeholder |
Non é compatible |
Visita Podo usar... para obter máis información sobre a compatibilidade do navegador coas funcións CSS3 e HTML5.
Teña coidado coas seguintes advertencias cando use Respond.js nos seus contornos de desenvolvemento e produción para Internet Explorer 8.
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.
file://
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.
@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.
IE8 non é totalmente compatible box-sizing: border-box;
cando se combina con min-width
, max-width
, min-height
ou max-height
. Por ese motivo, a partir da v3.0.1, xa non usamos max-width
en .container
s.
IE8 ten algúns problemas @font-face
cando se combina con :before
. Bootstrap usa esa combinación cos seus Glyphicons. Se unha páxina está almacenada na caché e cargada 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.
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:
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 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:
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 .
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.
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-*-1
clases 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:
.pull-right
á túa última columna de grade para obter o aliñamento á dereitaO soporte para overflow: hidden
o <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 .
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 .
Ademais, teña en conta que se estás 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: absolute
ou 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.
O .dropdown-backdrop
elemento 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 ).
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.
:hover
/ :focus
no móbilAí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, :hover
os 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 :hover
estados de Bootstrap queden indesexablemente "atascados" neses navegadores. Algúns navegadores móbiles tamén fan un :focus
pegajoso similar. Actualmente non hai unha solución sinxela para estes problemas que non sexa a eliminación total destes estilos.
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 menor que o tamaño físico do papel ao resolver as 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:
@screen-*
variables Menos para que o papel da túa impresora se considere máis grande que extra pequeno.Ademais, a partir de Safari v8.0, os de ancho fixo .container
poden 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:
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.
Nos <select>
elementos, o navegador de accións de Android non mostrará os controis laterais se hai un border-radius
e/ou border
aplicado. (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.
Queres ver un exemplo? Consulte esta demostración de JS Bin.
Co fin de ofrecer a mellor experiencia posible aos navegadores antigos e con erros, Bootstrap usa trucos 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 .
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.
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 padding
non 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).
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 .
Se a túa navegación contén moitas ligazóns e aparece antes do contido principal no DOM, engade unha Skip to main content
ligazó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-only
clase ocultarase visualmente a ligazón de omisión e a .sr-only-focusable
clase asegurarase de que a ligazón se faga visible unha vez enfocada (para usuarios de teclado con visión).
Debido a deficiencias/erros de longa data en Chrome (consulte o número 262171 no rastreador de erros de Chromium ) e Internet Explorer (consulte este artigo sobre ligazóns na páxina e orde de foco ), terás que asegurarte de que o destino da túa ligazón de omisión é polo menos enfocable mediante programación engadindo tabindex="-1"
.
Ademais, pode querer suprimir explícitamente unha indicación de foco visible no destino (particularmente porque Chrome actualmente tamén establece o foco nos elementos tabindex="-1"
cando se fai clic co rato) con #content:focus { outline: none; }
.
Teña en conta que este erro tamén afectará a calquera outra ligazón dentro da páxina que estea a utilizar o seu sitio, o que fará que sexan inútiles para os usuarios do teclado. Podes considerar engadir unha corrección provisional similar a todas as outras áncoras/identificadores de fragmentos denominados que actúan como obxectivos de ligazón.
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 .
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 utilizadas 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.
Bootstrap publícase baixo a licenza MIT e ten copyright 2016 Twitter. Reducido a anacos máis pequenos, pódese describir coas seguintes condicións.
A licenza de Bootstrap completa atópase no repositorio do proxecto para obter máis información.
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.
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.