Uraykachiy

Bootstrap (kunan v3.4.1) huk pisi facil ñankunayuq usqhaylla qallariypaq, sapa huk hukniray yachay pataman chaymanta llamk'ana casoman munay. Ñawinchayta imakuna necesitasqaykiman hina kasqanmanta yachanaykipaq.

jsDelivr nisqa

Chay runakuna chaymanta jsDelivr kaqpi sumaq sunquwan CDN yanapakuyta qunku Bootstrap kaqpa CSS kaqpaq chaymanta JavaScript kaqpaq. Kay jsDelivr t'inkikunata llamk'achiylla.

<!-- 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

Bootstrap kaqpa Less, CSS, JavaScript chaymanta qillqakuna Bower kaqwan churayta chaymanta kamachiyta atikunki :

bower install bootstrap

Instalar con npm

Bootstrap nisqatapas npm nisqawan churayta atinki :

npm install bootstrap@3

require('bootstrap')llapa Bootstrap kaqpa jQuery plugins kaqninta jQuery kaqman karganqa. Kikin bootstrapmódulo nisqa mana imatapas hawaman apachinchu. Bootstrap kaqpa jQuery yapayninkunata sapankama makiwan kargayta atikunki, /js/*.jswillañiqikunata paquetepa pata pata willañiqi ukhupi kargaspa.

Bootstrap's package.jsonwakin yapasqa metadatokuna kay llavekuna ukhupi kachkan:

• less- Bootstrappa hatun Aswan pisi pukyu willañiqiman ñan
• style- ñan Bootstrap kaqpa mana pisichasqa CSS kaqman chaymanta ñawpaqmanta huñusqa ñawpaqmanta churasqakuna llamk'achispa (mana sapanchasqa)

Instalar con Composer

Bootstrap kaqpa Less, CSS, JavaScript chaymanta qillqakuna Composer kaqwan churayta chaymanta kamachiyta atikunki :

composer require twbs/bootstrap

Less/Sass nisqapaq autoprefixador nisqa mañakun

Bootstrap Autoprefixer llamk'achin CSS ranqhaq ñawpaq sutikunawan llamk'ananpaq . Sichus Bootstrap Less/Sass pukyuta huñuchkanki chaymanta mana Gruntfileykuta llamk'achkankichu, Autoprefixer ruwayta ruwanaykiman qam kikiyki tinkinayki tiyan. Sichus ñawpaqmanta huñusqa Bootstrap llamk'achkanki utaq Gruntfileykuta llamk'achkanki, mana kaymanta llakikunaykichu tiyan imaraykuchus Autoprefixer Gruntfileykuman hukllachasqaña kachkan.

Imataq chaypi kachkan

Bootstrap iskay formakunapi uraykachiy atikun, mayqinkunapichus kay qatiq directoriokunata chaymanta willakuykunata tarinki, lógicamente común yanapakuykunata huñuspa chaymanta iskaynin huñusqa chaymanta pisichasqa variaciones quy.

Ñawpaqmanta huñusqa Bootstrap

Huk kuti uraykachisqa, ñit'isqa qillqana mayt'uta kichay (hukllasqa) Bootstrap nisqap ruwayninta qhawanaykipaq. Kay hinatan rikunki:

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

Kayqa Bootstrap kaqpa aswan sapsi rikchayninmi: ñawpaqmanta huñusqa willañiqikuna yaqa mayqin web ruwaypipas utqaylla urmachiy llamk'anapaq. Huñusqa CSS chaymanta JS ( ) quyku bootstrap.*, chaymanta huñusqa chaymanta pisiyachisqa CSS chaymanta JS ( bootstrap.min.*). CSS pukyuta mapakuna ( bootstrap.*.map) wakin maskaqkunap paqarichiq yanapakuyninkunawan llamk'anapaq kanku. Glyphicons kaqmanta letrakuna churasqa kachkan, chaymanta Bootstrap akllana tema kaqhina.

Bootstrap nisqamanta pukyuta

Bootstrap pukyuta uraykachiyqa ñawpaqmanta huñusqa CSS, JavaScript chaymanta qillqap kaqninkunayuq, pukyuta Less kaqwan, JavaScript kaqwan chaymanta qillqakunawan kuska. Aswan sut'itaqa, kaykunatam, aswan achkakunatapas churan:

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

Chay less/, js/, chaymanta fonts/CSS, JS, chaymanta icono letrakunaykupaq pukyuta codigo kanku (hukmanta). Chay dist/qillqana mayt'upiqa tukuy ima kachkan ñawpaqmanta huñusqa uraykachiy t'aqapi hawapi. Qillqana mayt'upi qillqaykupaq, chaymanta Bootstrap llamk'achinapaq docs/pukyuta churan . examples/Chaymanta aswan, mayqin wak yapasqa willañiqipas paquetes kaqpaq, licencia willaypaq chaymanta wiñachiypaq yanapakuyta qun.

CSS y JavaScript nisqa huñuy

Bootstrap Grunt ruwana sistemanpaq llamk'achin, allin ñankunawan marcowan llamk'anapaq. Chayqa imayna codigoykuta huñuyku, pruebakuna purichiyku, chaymanta aswan.

Instalación de Grunt

Grunt churanapaq, ñawpaqta node.js (kaytaq npm kaqwan kachkan) uraykachinayki tiyan chaymanta churanayki tiyan. npm node paqueteado módulos kaqmanta riman chaymanta huk ñan wiñariy hapirinakunata node.js kaqnintakama kamachinapaq.

1. grunt-cliTukuy pachapaq churay npm install -g grunt-cli.
2. Sapsi /bootstrap/willañiqiman puriy, chaymanta purichiy npm install. package.jsonnpm willañiqita qhawanqa chaymanta kikinmanta chaypi listasqa necesario local dependenciakunata churanqa.

Tukuptinqa, kamachiy chirumanta qusqa imaymana Grunt kamachiykunata purichiyta atikunki.

Kaq Grunt kamachiykuna

grunt dist(CSS y JavaScript nisqakunata huñuylla)

Huñusqa /dist/chaymanta pisichasqa CSS chaymanta JavaScript willañiqikunawan willañiqita musuqmanta ruwan. Bootstrap llamk'achiq hina, kayqa normalmente munasqayki kamachiymi.

grunt watch(Qaway)

Aswan pisi pukyu willañiqikunata qhawan chaymanta kikinmanta CSS kaqman wakmanta huñun mayk'aqllapas huk tikrayta waqaychanki.

grunt test(Pruebakunata purichiy)

JSHint llamk'achin chaymanta QUnit pruebakunata chiqa maskaqkunapi purichin Karma kaqman gracias nispa .

grunt docs(Docs kaqpa kaqninkunata ruway & prueba)

CSS, JavaScript chaymanta wak kaqninkunata ruwan chaymanta prueban mayqinkunachus llamk'achkanku mayk'aq qillqakunata kitipi purichichkan via bundle exec jekyll serve.

grunt(Construye absolutamente todo y ejecutar pruebas)

CSS chaymanta JavaScript huñun chaymanta pisiyachin, qillqa web kitita ruwan, HTML5 chiqaqchaq docs kaqwan purichin, Customizer kaqpa kaqninkunata musuqmanta ruwan, chaymanta aswan. Jekyll sutiyuq runatam munan . Normalmente necesario solamente si estás hacking en el mismo Bootstrap.

Sasachakuykunata allichay

Sichus sasachakuykunawan tupanki dependenciakuna churaypi utaq Grunt kamachiykunata purichiypi, ñawpaqta /node_modules/npm kaqwan ruwasqa directoriota qulluy. Chaymanta, yapamanta purichiy npm install.

Plantilla básica

Kay HTML sapsi plantillawan qallariy, icha kay rikch'anakunata tikray . Esperomos que personalizarás nuestras plantillas y ejemplos, adaptandolas para adaptarse a tus necesidades.

Uraypi HTML kaqmanta qillqay huk pisi Bootstrap qillqawan llamk'ayta qallariypaq.

<!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>

Ejemplos

Construye en la plantilla básica de arriba con los muchos componentes de Bootstrap. Kallpanchayku Bootstrap sapan proyectoykipa necesidadninman hina ruwanaykipaq chaymanta adaptanaykipaq.

Uraypi sapa rikch'anapaq pukyuta hapiy Bootstrap waqaychasqata uraykachispa . Ejemplokunataqa tarisunmanmi docs/examples/directorio nisqapi.

Marco nisqawan yanapachikuspa

Plantilla de inicio

Mana imapas aswanpas aswan allin kaqkunamanta: huñusqa CSS chaymanta JavaScript huk waqaychanawan kuska.

Tema de bootstrap

Akllana Bootstrap temata kargay huk rikuywan allinchasqa experienciapaq.

Rejillas

Achka rikch'anakuna llika churanakuna tawantin patayuq, nido, chaymanta aswan.

Jumbotron nisqa

Jumbotron muyuriqpi ruway huk navbarwan wakin básica rejilla columnakunawan.

Jumbotron estrecho

Aswan ruwasqa p'anqata ruway, ñawpaqmanta churasqa waqaychanata, jumbotrontapas pisiyachispa.

Navbars en acción

Navbar nisqa

Plantilla super básica que incluye la navbar junto con algunos contenido adicional.

Navbar superior estático

Plantilla super básica con una navbar estática superior junto con algunos contenido adicional.

Navbar nisqa allichasqa

Plantilla super básica con una navbar superior fija junto con algunos contenido adicional.

Componentes personalizados nisqakuna

Qatay

Una plantilla de una página para construir páginas de inicio simples y hermosas.

Carrusel

Navbar chaymanta carrusel kaqmanta ruway, chaymanta wakin musuq componentes yapay.

Blog nisqa

Sasa iskay columna blog churay sapanchasqa puriywan, umalliqwan, chaymanta qillqawan.

Tablero de instrumentos

Estructura básica para un salpicadero de admin con barra lateral fija y barra de nav.

Yaykuna p'anqa

Diseño de formulario personalizado y diseño para una signo simple en formulario.

Chaninchasqa nav

Huk sapanchasqa navbar ruway chaninchasqa t'inkikunawan. ¡Umakuna wichayman! Mana ancha Safari amigablechu.

K’aspiyuq chaki

Qhawaypa urayninpi huk chaki qillqa k'askachiy, chaymanta aswan pisi kaq kaptin.

Chaki pegajoso con navbar

Huk chaki qillqa qhawaypa urayninpi huk takyasqa navbarwan hawanpi k'askachiy.

Experimentokuna

Mana kutichiq Bootstrap

Mana sasachakuspalla Bootstrap kutichiyta sapa docsniykuman mana llamk'achiy .

Fuera de lona

Huk tikray atikuq mana lona purina menú ruway Bootstrap kaqwan llamk'anapaq.

Llamkanakuna

Bootlint nisqa

Bootlint nisqaqa Bootstrap HTML linter nisqa llamkana oficialmi. Kikinmanta qhawan achka común HTML pantaykunata web kitikunapi mayqinkunachus Bootstrap llamk'achkanku huk allin "vanilla" ñanpi. Vanilla Bootstrap kaqpa componentes/widgets kaqnin DOM kaqpa partenkuna wakin estructuras kaqmanhina kanankupaq mañanku. Bootlint Bootstrap componentekuna instanciakuna HTML allin ruwasqa kaqta qhawan. Yuyaykuy Bootlint yapayta Bootstrap web wiñachiy herramientakuna cadenaykiman chaymanta mana mayqinpas común pantaykuna proyectoykipa wiñayninta pisiyachinanpaq.

Ayllu

Bootstrap wiñayninmanta kunan pachallapi qhipakuy chaymanta kay yanapakuq yanapakuykunawan aylluman chayay.

• Ñawinchay hinaspa qillqakuy The Official Bootstrap Blog nisqaman .
• Bootstrappers masikunawan rimanakuy IRC llamk'achispa irc.freenode.netsirwiqpi, ##bootstrap kanalpi .
• Bootstrap llamk'achiyta yanapakuypaq, StackOverflow kaqpi tapuy etiquetata llamk'achispatwitter-bootstrap-3 .
• Ruwaqkuna llalliq simita bootstrappaquetes kaqpi llamk'achinanku tiyan mayqinkunachus Bootstrap ruwayninta tikranku utaq yapanku mayk'aq npm utaq rikch'aq quy mecanismokuna kaqninta rakinku aswan tariypaq.
• Bootstrapwan Bootstrap Expo nisqapi runakunap rurasqankumanta kallpachaq rikch'anakunata tariy .

Hinallataq qatipayta atinki @getbootstrap Twitter nisqapi chay qhipa ch’aqwaykunamanta hinallataq manchay takiy videokunamanta.

Kutichiyta mana atichispa

Bootstrap kikinmanta p'anqaykikunata imaymana pantalla sayaykunapaq ruwan. Kaypi imayna kay ruwayta mana llamk'achiyta atikun chaymanta p'anqayki kay mana kutichiq rikch'ana hina llamk'an .

P'anqa kutichiyta mana llamk'achinapaq llamkanakuna

1. CSS qillqakunapi<meta> rimasqa qhaway punkuta saqiy
2. Huk anchoyuq sapa llika patapaq chay widthon the kaqmanta llalliy, huk rikch'anapaq Aswan allinta kay ñawpaqmanta Bootstrap CSS kaqmanta hamun. Munasqaykimanta hark'ayta atikunki chaymanta willay mast'ariy tapuykunawan utaq wakin akllaq-fu kaqwan..containerwidth: 970px !important;!important
3. Navbars llamk'achkanki, llapa navbar urmachiy chaymanta mast'ariy ruwayta hurquy.
4. Rejilla churanapaq, .col-xs-*clasekunata llamk'achiy, chawpi/hatun kaqkunamanta yapasqa, utaq rantinpi. Ama llakikuychu, extra-huch'uy dispositivo rejilla llapa resolucionkunaman escalan.

IE8 kaqpaq Respond.js necesitankiraq (imaraykuchus willayniyku tapuykuna chaypiraq kachkanku chaymanta ruwana tiyan). Kayqa Bootstrap kaqpa "kuyuchina sitio" kaqninta mana llamk'achinchu.

Plantilla de bootstrap con respuesta desactivada

Kay ruwanakunata huk ejemploman churarqayku. Ñawinchay paypa pukyuta, chaymanta chay específico tikraykunata ruwasqa kaqta qhawanaykipaq.

Mana kutichiq ejemplota qhaway

Navegador chaymanta dispositivo yanapakuy

Bootstrap ruwasqa aswan allin llamk'ananpaq qhipa mesa kaqpi chaymanta kuyuchina maskaqkunapi, niyta munan ñawpaq maskaqkuna hukniray estiloyuq rikuchiyta atinkuman, ichaqa hunt'asqa ruwanayuq, wakin componentekuna ruwanakuna.

Yanapasqa maskaqkuna

Específicamente, yanapayku kay qhipa kaq layakuna kay qatiq maskaqkunamanta chaymanta plataformakunamanta.

Huk maskaqkuna mayqinkunachus WebKit, Blink utaq Gecko qhipa kaq laya llamk'achinku, chiqalla utaq plataforma web qhaway API kaqnintakama, mana sut'i yanapasqachu kanku. Ichaqa, Bootstrap (aswan achka kutipi) kay maskaqkunapi allinta rikuchinan tiyan chaymanta llamk'anan tiyan chaymanta. Aswan sut'i yanapakuy willakuy uraypi qusqa kachkan.

Kuyuchina aparatokuna

Hatun rimaypi, Bootstrap sapa hatun plataformapa ñawpaqmanta maskaqninpa qhipa kaqninkunata yanapakun. Reparay proxy maskaqkuna (kayhina Opera Mini, Opera Mobile kaqpa Turbo ruwaynin, UC Navegador Mini, Amazon Silk) mana yanapasqachu.

Escritorio nisqapi maskaqkuna

Chaynallataq, aswan qhipa kaq layakuna aswan mesa maskaqkunamanta yanapasqa kanku.

Windows kaqpi, Internet Explorer 8-11 kaqmanta yanapayku .

Firefox kaqpaq, aswan qhipa normal takyasqa kacharisqamanta, yanapaykutaq qhipa Mast'arisqa Yanapakuy Kacharisqa (ESR) Firefox kaqmanta.

Mana oficial kaqpi, Bootstrap allinta qhawanan chaymanta ruwanan tiyan Chromium kaqpi chaymanta Chrome kaqpi Linux kaqpaq, Firefox kaqpi Linux kaqpaq, chaymanta Internet Explorer 7 kaqpi, chaymanta Microsoft Edge kaqpi, ichaqa mana oficial yanapasqachu kanku.

Huk lista wakin maskaq pantaykuna Bootstrap kaqwan maqanakunan tiyan, qhaway Perqayku maskaq pantaykuna .

Internet Explorer 8 chaymanta 9 kaqpi

Internet Explorer 8 chaymanta 9 yanapasqallataq kanku, chaywanpas, ama hina kaspa yachay wakin CSS3 propiedades chaymanta HTML5 elementokuna mana hunt'asqa yanapasqachu kay maskaqkunawan. Chaymanta, Internet Explorer 8 Respond.js llamk'ayta munan willaykunata tapuy yanapakuy atichinanpaq.

Watukuy ¿Utilizaymanchu... CSS3 chaymanta HTML5 ruwanakuna maskaq yanapakuymanta sut'inchaykunapaq.

Internet Explorer 8 chaymanta Respond.js

Cuidakuy kay qatiq advertenciakunamanta mayk'aq Respond.js llamk'achkanki wiñachiyniykipi chaymanta ruwana pachakunapi Internet Explorer 8 kaqpaq.

Respond.js chaymanta CSS chimpapuray kamachiy

Respond.js llamk'achiyta CSS kaqwan huk (huch'uy)dominio kaqpi qusqa (kayhina, huk CDN kaqpi) wakin yapasqa churayta munan. Rikuy Respond.js qillqakunata aswan sut'inchaykunapaq.

Responder.js yfile://

Navegador harkasqa kamachiykunarayku, Respond.js mana llamkanchu file://protocolo kaqninta qhawasqa p'anqakunawan (imayna huk llaqta HTML willayta kichaspa). IE8 kaqpi kutichiy ruwanakuna pruebapaq, p'anqaykikuna HTTP(S) kaqpi qhaway. Rikuy Respond.js qillqakunata aswan sut'inchaykunapaq.

Responder.js y@import

Respond.js mana llamkanchu CSS kaqwan chaymanta referenciasqa via @import. Aswanta, wakin Drupal ruwanakuna riqsisqa kanku llamk'achiyta @import. Rikuy Respond.js qillqakunata aswan sut'inchaykunapaq.

Internet Explorer 8 chaymanta caja-tamaño nisqa

IE8 mana hunt'asqata yanapanchu box-sizing: border-box;, min-width, max-width, min-heightutaq max-height. Chayrayku, v3.0.1 kaqmanta, manaña s max-widthkaqpi llamk'achiykuchu..container

Internet Explorer 8 chaymanta @font-face nisqawan

IE8 wakin sasachakuykunata kan @font-facemayk'aq hukllachasqa kaqwan :before. Bootstrap chay tinkiyta Glyphiconsninwan llamk'achin. Sichus huk p'anqa waqaychasqa kachkan, chaymanta mana silluwan ventanata patapi kargasqa (ichataq musuqyachiy ñit'inata ñit'iy icha iframe kaqpi imatapas kargay) chaymanta p'anqa manaraq qillqap kargakuchkaptin ruwasqa. P'anqa patapi (kurku) kuyurichiyqa wakin iconokuna rikuchinqa chaymanta puchuq iconokuna patapi kuyuchispa chaykunatapas rikuchinqa. Qaway #13863 yupayta astawan yachanaykipaq.

IE Modos de Compatibilidad nisqa

Bootstrap mana yanapasqachu ñawpaq Internet Explorer tupachiy ruwanakunapi. IE kaqpaq qhipa ruway ñanta llamk'achkanki chiqamanta kanaykipaq, <meta>p'anqaykikunapi tupaq etiqueta churayta yuyaykuy:

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

Qillqap ruwayninta takyachiy pantasqa allichay yanapakuykunata kichaspa: ñit'iy F12chaymanta qhaway "Qillqap ruwaynin".

Kay etiqueta llapa Bootstrap qillqakunapi chaymanta ejemplokunapi churasqa kachkan aswan allin ruwayta atikun sapa yanapasqa Internet Explorer kaqpi.

Aswan willakuypaq kay StackOverflow tapuyta qhaway.

Internet Explorer 10 Windows 8 kaqpi chaymanta Windows Phone 8 kaqpi

Internet Explorer 10 mana dispositivo anchota qhaway punku anchomanta t'aqakunchu , chaymanta chayhina mana allintachu Bootstrap kaqpa CSS kaqpi willay tapuykunata ruwan. Normalmente kayta allichanaykipaq huk utqaylla CSS t'aqallata yapawaq:

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

Ichaqa, kay mana llamkanchu dispositivokuna Windows Phone 8 layakuna aswan ñawpaq Update 3 kaqmanta (aka GDR3) purichiqkuna , imaynachus chayhina dispositivokuna aswan mesa qhawayta rikuchiyta ruwan k'iti "telefono" qhawaymanta ranti. Kayta allichanaykipaq, kay qatiq CSS chaymanta JavaScript churanayki tiyan pantaymanta llamk'anaykipaq .

@-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)
}

Aswan willakuypaq chaymanta llamkana kamachiykunapaq, ñawiriy Windows Phone 8 chaymanta Dispositivo-Ancho .

Huk umakuna hina, kayta llapa Bootstrap qillqakunapi chaymanta ejemplokunapi huk rikuchiy hina churayku.

Safari pachakmanta muyuchiy

Safari kaqpa ruwanakuna motornin ñawpaq v7.1 kaqmanta OS X kaqpaq chaymanta Safari iOS v8.0 kaqpaq wakin sasachakuyniyuq karqan yupay decimal kitikuna llamk'achisqa .col-*-1rejilla claseykupi. Chaymi sichus 12 sapalla rejilla columnakunayuq kanki, reparawaqmi huk fila columnakunawan tupachisqa pisilla hamusqankuta. Safari/iOS yapaymanta hawa, wakin akllanakuna llamkanakuna ruwanapaq kanki:

• .pull-rightQhipa kaq llika columnaykiman yapay sinchi-alliq chiqanchayta tarinaykipaq
• Pachakmanta makiwan allichay Safaripaq allin muyuchiyta tarinaykipaq (aswan sasa ñawpaq akllanamanta)

Modales, navbars, y teclados virtuales nisqakuna

Desbordamiento y desplazamiento

Yanapakuypaq elemento kaqpi allin limitasqa iOS kaqpi chaymanta Android kaqpi overflow: hidden. <body>Chaypaq, mayk'aq huk modal patamanta utaq uraymanta mayqin chay dispositivokunap navegadorninpipas kuyuchinki, <body>contenido kuyuchiyta qallarinqa. Qaway Chrome pantay #175502 (Chrome v40 kaqpi allichasqa) chaymanta WebKit pantay #153852 .

iOS qillqa pampakuna chaymanta kuyuchiy

<input>iOS 9.3 kaqmanta, huk modal kichasqa kachkaptin, sichus huk rollo gesto qallariy llamiy huk textual utaq huk kaqpa linderon ukhupi kachkan <textarea>, <body>modal urapi contenidoqa kikin modalpa rantinpi kuyuchisqa kanqa. WebKit pantay #153856 nisqapi qhaway .

Teclados virtuales nisqa

Hinallataq, reparay sichus huk takyasqa navbar llamk'achkanki utaq huk modal ukhupi yaykuykunata llamk'achkanki, iOS huk ruway pantayniyuq kachkan chaymanta mana takyasqa elementokunap posiciónninta musuqchanchu mayk'aq teclado virtual llamk'achisqa. Huk pisi llamkanakuna kaypaq elementokunayki tikray position: absoluteutaq huk pacha yupayta enfoque kaqpi waqyay makiwan churayta allichayta munaspa. Kayqa mana Bootstrap kaqwan ruwasqachu, chayrayku qammanta kanqa mayqin allichay aswan allin ruwanaykipaq tanteanaykipaq.

Navbar Urmachiykuna

Chay .dropdown-backdropelementoqa mana iOS kaqpi nav kaqpi llamk'achkanchu z-indexing kaqpa complejidadninrayku. Chayhina, navbars kaqpi urayk'aqkuna wichq'anapaq, chiqalla urayk'aq elementota ñit'inayki tiyan (utaq mayqin wak elemento kaqtapas mayqinchus iOS kaqpi huk ñit'iy ruwayta rawrachinqa ).

Navegadorpa hatunyachiy

P'anqa hatunyachiy mana hark'asqa ruway artefactokunata wakin componentes kaqpi rikuchin, iskaynin Bootstrap kaqpi chaymanta wakin web kaqpi. Chay sasachakuyman hinaqa, ichapas allichayta atichwan (ñawpaqta maskay, chaymanta huk sasachakuyta kichay necesario kaqtin). Ichaqa, kaykunata mana qhawayta munayku imaynachus sapa kuti mana chiqa solucionniyuqchu kanku wak hacky allichaykunamanta.

Pegajoso :hover/ :focusen móvil

Chiqap hovering mana aswan pantallakuna llachpanakunapi atikunchu chaypas, aswan kuyuchina maskaqkuna hovering yanapakuyta qatipanku chaymanta :hover"k'aspi" ruwanku. Huk rimaypi, :hoverestilokuna huk elementota ñit'iymanta qhipaman churayta qallarinku chaymanta llamk'achiq wak elementota ñit'isqan qhipamanlla churayta saqinku. Kayqa Bootstrap :hoverestadokuna mana munasqa "k'askasqa" kayhina maskaqkunapi ruwayta atin. Wakin movil navegadores kaqkunapas :focuschayhinata k’aspiyuqta ruwanku. Kunanqa mana kay sasachakuykunapaq sasallawan allichay kanchu wak chayhina estilokunata tukuyninpi hurquymanta.

Imprenta

Kunan tiempopi wakin navegadorkunapipas imprimiyqa quirky kanman.

Aswanta, Chrome v32 kaqmanta chaymanta mana margen churanakuna mana qhawaspa, Chrome huk qhaway punku anchota ancha aswan k'itita llamk'achin kay físico papel sayaymanta mayk'aq huk web kitita imprimichkaspa mediokuna tapuykunata allichan. Kayqa Bootstrap kaqpa yapa-huch'uy llikan mana suyasqa llamk'achiyta atinman imprimiypi. Qaway #12078 kaqmanta chaymanta Chrome pantay #273306 wakin willakuypaq. Yuyaychasqa llamkanakuna:

• Abrazar la rejilla extra-pequeña y asegúrate que tu página se vea aceptable bajo él.
• Aswan pisi tikraqkunap chanikunata ruway, @screen-*chaymanta impresora papelniyki aswan hatun kaqta qhawasqa kanqa yapa-huch'uy kaqmanta.
• Sapanchasqa willaykunata tapuykunata yapay, qillqana willaykamallapaq llika sayay p'akiykunata tikranaykipaq.

Hinallataq, Safari v8.0 kaqmanta, takyasqa-ancho .containers Safari huk mana costumbre kaq huch'uy letra sayayninta llamk'achiyta atin imprimiypi. Aswan sut'inchaykunapaq #14868 chaymanta WebKit pantay #138192 qhaway. Huk llamkana atikuq kaypaq kay CSS yapaymi:

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

Android nisqa stock nisqa maskaq

Qutumanta hawa, Android 4.1 (hinallataq wakin musuq lluqsiykuna rikukuq hina) apachinku Navegador ruwanawan akllasqa web maskaq ñawpaqmanta hina (Chrome kaqmanta). Llakikuypaq, Navegador ruwana achka pantaykunayuq chaymanta mana tupaq CSS kaqwan tukuypaq.

Menús nisqakunata akllay

Elementokunapi, Android <select>stock maskaq mana lado kamachiykunata rikuchinqachu sichus huk border-radiuschaymanta/utaq borderchurasqa. (Qhaway kay StackOverflow tapuyta sut'inchaykunapaq.) Uraypi codigomanta fragmentota llamk'achiy k'amiq CSSta hurqunaykipaq chaymanta ruwayta kay <select>mana estiloyuq elemento hina Android stock maskaqpi. Ruwaq agente asnaynin Chrome, Safari chaymanta Mozilla maskaqkunawan hark'ayta harkan.

<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>

¿Huk ejemplota qhawayta munankichu? Kay JS Bin demostracionta qhaway.

Validadores nisqakuna

Aswan allin experienciata ñawpaq chaymanta pantasqa maskaqkunaman qunapaq, Bootstrap CSS maskaq hacks achka kitikunapi llamk'achin especial CSS wakin maskaq layakunaman maskanapaq kikin maskaqkunapi pantaykunata llamk'ananpaq. Kay hacks entiendenapaq hina CSS validadorkuna mana allin kasqankumanta quejakunankupaq ruwanku. Huk iskay kitikunapi, yawar-kantu CSS ruwanakunata llamk'achiykutaq manaraq hunt'asqa estandarizadachu, ichaqa kaykunaqa puramente ñawpaqman allinchaypaq llamk'achisqa kanku.

Kay chiqaqchay willakuykunaqa mana ruwaypi imapaqpaschu kanku chaymanta mana hacky kaq parte CSSniykumanta hunt'asqata chiqaqchanku chaymanta hacky rakikuna mana mana hacky kaqpa allin llamk'ayninta hark'ankuchu, chaymanta imarayku kay particular willaykunata deliberadamente mana qhawaykuchu.

HTML qillqaykupas wakin mana imapaq valeq chaymanta mana imapaqpas HTML chiqaqchay willakuyniyuq kanku huk Firefox pantaypaq huk allichay churasqaykurayku .

Kimsa kaq yanapakuy

Sichus mana oficialmente yanapaykuchu mayqin kimsa kaq plugins utaq yapasqakuna, wakin allin yuyaychaykunata quyku yanapakuypaq mana proyectokunaykipi atikuq sasachakuykunamanta.

Caja-tamaño

Wakin kimsa kaq software, Google Maps chaymanta Google Sapanchasqa Maskana Motor kaqwan, Bootstrap kaqwan ch'aqwankurayku * { box-sizing: border-box; }, huk kamachiy mayqinchus chayta paddingruwan mana huk elemento qhipa yupasqa anchunta afectanchu. Aswan yachay caja modelomanta chaymanta sayachiymanta CSS Tricks kaqpi .

Contexto kaqmanhina, necesitasqaykimanhina llalliyta atikunki (1 kaq akllana) utaq llapa suyukunapaq caja-tamaño kaqmanta churayta atikunki (2 kaq akllana).

/* 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();
}

Accesibilidad nisqa

Bootstrap común web kamachiykunata qatin chaymanta —aslla yapasqa kallpachakuywan— llamk'achiy atikunman sitiokuna ruwanapaq mayqinkunachus AT llamk'achiqkuna yaykuy atikunku .

Saltar el navegación

Sichus puriyniyki achka t'inkikunayuq chaymanta DOM kaqpi hatun willaypa ñawpaqninpi hamun, huk Skip to main contentt'inkiyta yapay ñawpaq puriymanta (huk sanu sut'inchaypaq, kay A11Y Proyecto qillqata qhaway puriy t'inkikuna saltay kaqmanta ). Clase llamk'achiyta .sr-onlyqhawaypi pakanqa salta t'inkita, chaymanta .sr-only-focusableclase t'inki rikukuq kananpaq huk kuti enfocadu kaqpi (rikuq teclado llamk'aqkunapaq).

<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>

Anidado nisqa umalliqkuna

Umakunata ( <h1>- <h6>) k'itichaspaqa, ñawpaq qillqa umalliqniykiqa huk <h1>. Qhipa umalliqkuna llamk'achinanku tiyan lógico kaqwan <h2>- <h6>chayhina pantalla ñawiriqkuna huk tabla de contenido ruwayta atinku p'anqaykikunapaq.

Aswan yachay HTML CodeSniffer kaqpi chaymanta Penn State kaqpa AccessAbility kaqpi .

Contraste de colores nisqa

Kunan, wakin ñawpaqmanta llimp'i tinkiykuna Bootstrap kaqpi tarikuq (kayhina imaymana estiloyuq ñit'ina clasekuna, wakin codigo resaltaq llimp'ikuna llamk'achisqa sapsi codigo bloquekunapaq , .bg-primary contextual qhipa kaq yanapakuq clase, chaymanta ñawpaqmanta t'inki llimp'i yuraq qhipa kaqpi llamk'achisqa kaqtin) pisi contraste ratioyuq kanku ( 4,5:1 ratio yuyaychasqamanta uraypi ). Kayqa sasachakuykunata ruwanman pisi rikuyniyuq utaq color ñawsa kaqkunaman. Kay ñawpaqmanta churasqa llimp’ikunataqa tikrana kanman, chimpapurayninta, ñawiriy atiyninta ima yapananpaq.

Yanapakuykuna yapasqa

• "HTML Codesniffer" qillqana mayt'u yaykuy atiy sasachakuykunata riqsichinapaq
• Chrome kaqpa Yaykuna Paqarichiqpa yanapakuyninkuna mast'ariynin
• Analizador de Contraste de Color nisqa
• El Proyecto A11Y
• MDN nisqaman chayay atiy qillqakuna

Licenciamanta tapuykuna

Bootstrap nisqaqa MIT nisqap licencianwanmi lluqsimun, chaymantataqmi 2019 Twitter nisqap hayñin. Aswan huch’uy t’aqakunaman timpuchisqa, kay condicionkunawanmi willakunman.

Chaypaqqa kaykunatan ruwanayki:

• Licencia chaymanta copyright willayta Bootstrap kaqpa CSS chaymanta JavaScript willañiqikunapi yapasqa waqaychay mayk'aq llamk'anaykipi llamk'achkanki

Permitenmi kaykunata ruwanaykipaq:

• Bootstrap mana qullqiyuq uraykachiy chaymanta llamk'achiy, tukuyninpi utaq wakinpi, sapallapaq, sapallapaq, empresa ukhupi utaq qhatupaq propósitos kaqpaq
• Bootstrap llamk'achiy paquetes utaq rakiykunapi ruwasqaykipi
• Pukyuta tikray
• Huk sublicenciata quy Bootstrap kimsa kaqkunaman mana licenciapi churasqa kaqkunaman tikranapaq chaymanta rakinapaq

Hark'asunki:

• Qillqaqkunata chaymanta licenciayuqkunata dañokunamanta responsableta hap'iy imaynachus Bootstrap mana garantiayuq qusqa kachkan
• Bootstrap kaqpa kamaqninkunata utaq copyright nisqayuqkunata huchachay
• Bootstrap kaqmanta mayqin rakitapas mana allin atribución kaqwan wakmanta rakiy
• Ima markakuna Twitter kaqpa kaqnin imahinapas llamk'achiy mayqinchus Twitter rakisqaykita allinpaq qhawan chayta niyta utaq niyta atinman
• Ima markakuna Twitter kaqpa kaqnin imahinapas llamk'achiy mayqinchus ninman utaq niyta atinman Twitter software tapusqa ruwasqaykita

Manan kamachisunkichu:

• Kikin Bootstrap pukyuta, utaq ima tikraykunamantapas chayman ruwasqaykita, mayqin wakmanta rakiypipas huñuyta atikunki chaymanta chayta yapan
• Bootstrap kaqpi ruwasqayki tikraykunata Bootstrap llamk'ayman kutiy apachiy (ichahina yuyaychay kallpachasqa kaptinpas)

Huk hunt'asqa Bootstrap licencia proyecto waqaychasqapi tarikun aswan willakuypaq.

Traducciones

Ayllu runakuna Bootstrap qillqakunata imaymana simikunaman tikrarqanku. Mana mayqinpas oficialmente yanapasqachu kanku chaymanta mana sapa kutichu kunan pachapaq kanku.

• Correa de botas 中文文档 (Chino simipi)
• Bootstrap på Dansk (danés simipi) .
• Bootstrap en Français (fransis simipi) .
• Bootstrap auf Deutsch (Aliman simipi) .
• Correa de botas en Italiano (Italiano) .
• Bootstrap 한국어 (Kuriya simipi)
• Bootstrap em Português do Brasil (Brasil simipi)
• Bootstrap по-русски (Rusiya simipi) .
• Bootstrap en Español (kastilla simipi) .
• Türkçe Botas (turco) .
• Bootstrap українською (Ukranya simipi)
• Botstrap bằng tiếng Việt (Vietnam simipi) .

Mana yanapaykuchu t'ikraykunata wakichiypi utaq quypi, chaykunaman t'inkiykullayku.

¿Musuq icha aswan allin tikrayta tukunkichu? Huk aysana mañakuyta kichay listaykuman yapanaykipaq.