Mboguejy

Bootstrap (koꞌág̃agua v3.3.7) oguereko mbovymi tape ndahasýiva oñepyrũ pyaꞌe hag̃ua, peteĩteĩva oguerohorýva peteĩ nivel katupyry ha káso jepuru iñambuévape. Emoñe’ẽmbaite rehecha haĝua mba’épa okonveni umi ne remikotevẽ particular-pe.

Ñepyrũrã CDN rehegua

Umi tapicha oĩva jsDelivr -pe ome’ẽ py’aporãme CDN pytyvõ Bootstrap CSS ha JavaScript-pe g̃uarã. Eipurunte ko’ã Bootstrap CDN joajuha.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

Oñemoĩ Bower ndive

Ikatu avei emohenda ha emohenda Bootstrap Less, CSS, JavaScript ha taikuéra Bower rupive :

$ bower install bootstrap

Emoĩ npm ndive

Ikatu avei emohenda Bootstrap eipuruhápe npm :

$ npm install bootstrap@3

require('bootstrap')okargáta opaite Bootstrap jQuery mboajepyréva jQuery mba’e’oka ári. Pe bootstrapmódulo voi ndoguerahaukái mba’eve. Ikatu emboguejy nde po rupive Bootstrap jQuery mboajepyréva peteĩteĩva ekargávo umi /js/*.jsvore oĩva paquete kundaha yvategua guýpe.

Bootstrap's package.jsonoguereko peteĩ metadato ambuéva ko’ã clave guýpe:

• less- tape Bootstrap rembiapokue Less fuente principal-pe
• style- tape Bootstrap CSS noñemboguejýivape oñemboheko mboyve ojeporúvo ñembohekorã ñepyrũrã (ndaipóri ñemboheko) .

Emoĩ Compositor ndive

Ikatu avei emohenda ha emohenda Bootstrap Less, CSS, JavaScript ha taikuéra Composer rupive :

$ composer require twbs/bootstrap

Autoprefijador oñeikotevẽva Less/Sass-pe g̃uarã

Bootstrap oipuru Autoprefixer ombohovái hag̃ua CSS ñemuha ñepyrũrã . Emboheko ramo Bootstrap ifuente Less/Sass-gui ha ndereiporúi ore Gruntfile, tekotevẽta embojoaju Autoprefixer nde ñemopu’ã rembiaporãme ndete voi. Oipurúramo Bootstrap oñemboheko mboyvegua térã oipurúramo ore Gruntfile, natekotevẽi rejepy’apy ko mba’ére Autoprefixer oñembojoajúmagui ore Gruntfile-pe.

Mba'épa oike ipype

Bootstrap ojeguerukuaa mokõi hendáicha, ipype rejuhúta ko’ã kundaha ha vore, oñemboaty lógicamente umi recurso común ha ome’ẽva mokõive variación oñembyatýva ha oñemboguejýva.

Ñepyrũrã oñembosako’íva

Ojegueru rire, ojepeꞌa pe carpeta oñembohysýiva rehecha hag̃ua mbaꞌeichaitépa ojejapo (pe oñembohekopyréva) Bootstrap. Rehecháta peteĩ mbaʼe koʼãichagua:

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

Kóva haꞌehína Bootstrap rembiapokue tenondeguavéva: vore oñemboheko mboyveva ojepuru pyaꞌe hag̃ua haimete oimeraẽva proyecto web-pe. Rome’ẽ CSS ha JS oñembyatýva ( bootstrap.*), avei CSS ha JS ( bootstrap.min.*) oñembyatýva ha oñemboguejýva. Umi mapa fuente CSS rehegua ( bootstrap.*.map) ojeguereko ojepuru hag̃ua peteĩteĩva kundahára tembipururã moheñóiharakuéra ndive. Oñemoinge umi fuente Glyphicons-gui, haꞌeháicha pe tema opcional Bootstrap rehegua.

Código fuente de bootstrap rehegua

Pe Bootstrap código fuente ñemboguejy oguereko CSS, JavaScript ha letra mbaꞌekuaarã oñemboheko mboyvevaꞌekue, Less ypykue, JavaScript ha kuatiañeꞌepyre ndive. Oje’e porãve haĝua, oike ipype ko’ã mba’e ha hetave mba’e:

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

Umi less/, js/, ha fonts/haꞌehína kódigo fuente ñande CSS, JS ha icono fuente-kuérape g̃uarã (peteĩteĩ). Pe dist/carpeta oguereko opa mba’e oje’éva pe sección descarga precompilada-pe yvate. Pe docs/kundaha oguereko código fuente ñande kuatiañe’ẽme g̃uarã, ha examples/Bootstrap jepuru rehegua. Upéva ári, oimeraẽ ambue vore oikeva’ekue ome’ẽ pytyvõ paquete, licencia marandu ha ñemoheñóirã.

Oñembyatývo CSS ha JavaScript

Bootstrap oipuru Grunt isistema ñemopuꞌarã, oguerekóva método iporãva oñembaꞌapo hag̃ua framework ndive. Ha’e mba’éichapa ñambyaty ñande código, ñamongu’e umi prueba ha hetave mba’e.

Oñemoĩvo Grunt

Grunt emohenda hag̃ua, emboguejy ha emoĩ raẽ node.js (oikehápe npm). npm heꞌise umi módulo nodo oñembohysýiva rehegua ha haꞌehína peteĩ tape oñemboguata hag̃ua umi dependencia desarrollo rehegua node.js rupive.

1. Emoĩ grunt-cliglobalmente ndive npm install -g grunt-cli.
2. Eike kundaha ypykuépe /bootstrap/, upéi emongu’e npm install. npm ojesarekóta package.jsonvore rehe ha omoĩta ijeheguiete umi dependencia local oñeikotevẽva oñemboguapýva upépe.

Oñemohu’ãvo, ikatúta emongu’e opaichagua Grunt ñe’ẽmondo oñeme’ẽva ñe’ẽmondo rape guive.

Umi tembiapoukapy Grunt ojeguerekóva

grunt dist(Embohysýinte CSS ha JavaScript)

Omoheñói jey /dist/kundaha CSS ha JavaScript rembiapokue oñemboheko ha oñemboguejýva reheve. Bootstrap puruhára ramo, kóva haꞌe jepi tembiapoukapy reipotáva.

grunt watch(Reloj)

Ojesareko umi vore ypykue Sa’ive rehe ha ombojoaju jey ijeheguiete CSS-pe eñongatu jave peteĩ ñemoambue.

grunt test(Ojejapo umi prueba) .

Omombaꞌapo JSHint ha omombaꞌapo QUnit jesareko iñakã’ỹre PhantomJS -pe .

grunt docs(Emopu’ã & eñeha’ã umi docs mba’ekuaarã)

Omopu’ã ha oproba CSS, JavaScript ha ambue mba’ekuaarã ojeporúva oñemboguata jave kuatiañe’ẽ tendápe bundle exec jekyll serve.

grunt(Emopu’ã absolutamente opa mba’e ha emongu’e umi prueba)

Ombyaty ha omboguejy CSS ha JavaScript, omopuꞌa kuatiañeꞌepyre ñanduti renda, omombaꞌapo HTML5 jegueroviaukaha umi docs rehe, omoheñói jey Customizer mbaꞌekuaarã ha hetave mbaꞌe. Oikotevê Jekyll -pe . Jepivegua tekotevẽnte rejapo ramo hacke Bootstrap-pe voi.

Apañuãi ñemyatyrõ

Ejuhúramo apañuãi emohenda hag̃ua dependencia térã emongu’évo Grunt ñe’ẽmondo, embogue raẽ /node_modules/kundaha omoheñóiva npm. Upéi, emoñepyrũ jey npm install.

Plantilla básica rehegua

Eñepyrũ ko HTML plantilla básica reheve, térã emoambue ko’ã techapyrã . Roha’arõ remboheko ore plantilla ha techapyrã, remohenda hag̃ua ne remikotevẽme.

Emboguejy HTML iguýpe eñepyrũ hag̃ua embaꞌapo peteĩ kuatia Bootstrap michĩvéva reheve.

<!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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Tembiecharã

Emopuꞌa plantilla básica yvateguápe Bootstrap heta componente reheve. Romokyre’ỹ emohenda ha emohenda hag̃ua Bootstrap oñemohenda hag̃ua ne proyecto peteĩteĩva remikotevẽme.

Ehupyty código fuente opaite techapyrã iguýpe g̃uarã emboguejy rupi Bootstrap ryru . Techapyrã ikatu ojejuhu docs/examples/directorio-pe.

Oipurúvo pe marco

Plantilla de inicio

Mba’eve ndaha’éiramo umi mba’e iñimportantevéva: oñembosako’i CSS ha JavaScript peteĩ mba’e’oka ndive.

Tema de bootstrap rehegua

Ekarga pe tema opcional Bootstrap rehegua peteĩ jeikove ojehecharamóvape g̃uarã.

Rejillas rehegua

Heta techapyrã cuadrícula ñemohenda rehegua irundyve nivel reheve, anidación ha hetave mbaꞌe.

Jumbotrón rehegua

Emopuꞌa jumbotron jerére peteĩ navbar ha unos kuánto columna cuadrícula básica reheve.

Jumbotrón estrecho rehegua

Emopu’ã peteĩ páhina jeporupyrevéva emboguejy rupi mba’e’oka ha jumbotron ñepyrũrã.

Navbars en acción rehegua

Navbar rehegua

Plantilla súper básica oguerekóva navbar omoirûva algún contenido adicional.

Navbar yvategua estático

Plantilla súper básica orekóva navbar estático yvategua ndive algún contenido adicional.

Oñemohenda navbar

Plantilla súper básica orekóva navbar superior fijo omoirüva algunos contenido adicional.

Umi componente personalizado rehegua

Mo'ã

Peteĩ plantilla peteĩ página rehegua oñemopu’ã hag̃ua umi página de inicio simple ha iporãva.

Carrusel rehegua

Emohenda navbar ha carrusel, upéi emoĩve componente pyahu.

Blog rehegua

Disposición blog mokõi columna simple orekóva navegación personalizada, iñakãrapu’ã ha tipo.

Salpicadero rehegua

Estructura básica peteĩ panel admin rehegua orekóva barra lateral ha navbar fija.

Página de ingreso

Diseño ha diseño formulario personalizado peteĩ signo simple formulario-pe g̃uarã.

Ojehustifikáva nav

Ejapo peteĩ navbar personalizado umi enlace justificado reheve. ¡Akã yvate! Ndaha'éi Safari amistosoiterei.

Pegajoso py rehegua

Emoĩ peteĩ vore jehechaukaha guype pe contenido mbykyve jave chugui.

Pie pegajoso orekóva navbar

Embojoaju peteĩ vore jehechaukaha guy gotyo peteĩ navbar fijo reheve yvate gotyo.

Umi experimento ojejapóva

Bootstrap nombohováiva

Embogue pya’e Bootstrap ñembohovái ore docs rupive .

Fuera de lona rehegua

Emopu’ã peteĩ menú jeguatarã fuera de lona rehegua oñembohasáva ojepuru hag̃ua Bootstrap ndive.

Tembiporu

Botlint rehegua

Bootlint haꞌehína Bootstrap HTML linter tembipururã oficial. Ojesareko ijeheguiete heta HTML jejavy jepivegua umi página web-pe oipurúva hína Bootstrap peteĩ tape "vainilla"-pe. Vanilla Bootstrap componente/widget ojerure umi iparte DOM-pegua oñemohenda hag̃ua ciertas estructuras-pe. Bootlint ohecha umi instancia umi componente Bootstrap rehegua oguerekoha HTML oñemboheko porãva. Ejepy’amongeta emoĩve hag̃ua Bootlint nde Bootstrap tembipuru’i ñemoheñói web-pe ani hag̃ua ni peteĩ umi jejavy jepivegua ombovevýi ne proyecto ñemoheñói.

Avarekoha

Epyta ára ha ára Bootstrap ñemoheñói rehe ha eñemboja komunida-pe ko’ã mba’e oipytyvõva reheve.

• Emoñe’ẽ ha eñemboguapy The Official Bootstrap Blog -pe .
• Eñemongeta ne irũnguéra Bootstrapper ndive oipurúva IRC irc.freenode.netservidor-pe, ##bootstrap canal-pe .
• Oipytyvõ hag̃ua eipuru hag̃ua Bootstrap, ejerure StackOverflow-pe eipurúvo etiquetatwitter-bootstrap-3 .
• Umi moheñóiharakuéra oipuruvaꞌerã ñeꞌepykuaa bootstrapumi paquete omoambuéva térã omoĩva Bootstrap rembiaporãme omosarambívo npm térã mecanismo ñemeꞌe ojoguáva rupive ojejuhu hag̃ua máximo.
• Ejuhu techapyrã inspirador tapichakuéra omopu’ãva Bootstrap ndive Bootstrap Expo -pe .

Ikatu avei resegui @getbootstrap-pe Twitter -pe reikuaa haĝua umi chismo ipyahuvéva ha umi video musical iporãitereíva.

Omboguejývo ñembohovái

Bootstrap omohenda ijeheguiete ne página opaichagua pantalla tuichakuépe g̃uarã. Ko’ápe ojehecha mba’éichapa ikatu embogue ko mba’ekuaarã nde página omba’apo hag̃ua ko techapyrã nombohováivaicha .

Umi mba’e ojejapóva ojejoko hag̃ua página ñembohovái

1. Emboyke pe jehechaukaha <meta>oñeñe’ẽva CSS kuatiahaipyrépe
2. Embogue pe widthon the .containerpeteĩteĩva cuadrícula nivel-pe g̃uarã peteĩ ancho reheve, techapyrãramo width: 970px !important;Ejesareko kóva oúha Bootstrap CSS ñepyrũrã rire. Ikatu opcionalmente ejehekýi umi !importantconsulta medios rehegua ndive térã algún selector-fu.
3. Oipurúramo navbar, eipe’a opaite navbar ho’áva ha oñembotuicháva jepokuaa.
4. Umi cuadrícula ñemohendarã, eipuru .col-xs-*mboꞌepykuéra umi mediano/tuicháva ári, térã rendaguépe. Ani rejepy’apy, pe rejilla dispositivo extra-michĩva oescala opaite resolución-pe.

Reikotevẽta gueteri Respond.js IE8-pe g̃uarã (ore porandu medio rehegua oĩ gueteri ha tekotevẽgui oñemboguata). Kóva ombogue umi "sitio móvil" aspecto Bootstrap rehegua.

Plantilla bootstrap orekóva ñembohovái oñemboykéva

Ro’aplika ko’ã paso peteĩ techapyrãme. Emoñe’ẽ icódigo fuente rehecha hag̃ua umi ñemoambue específico oñemboguatáva.

Ehecha techapyrã nombohováiva

Navegador ha tembipuru pytyvõ

Bootstrap oñemopuꞌa ombaꞌapo porãve hag̃ua kundahára escritorio ha móvil ipyahuvévape, heꞌiséva umi kundahára itujavéva ikatu ohechauka iñambuéva estilo, jepémo ombaꞌapopaite, ñembohasa peteĩteĩva componente-kuéra rehegua.

Umi kundahára oipytyvõva

Específicamente, roipytyvõ umi versión ipyahuvéva ko’ã kundahára ha plataforma-pe.

Umi kundahára ambuéva oipurúva WebKit, Blink térã Gecko versión ipyahuvéva, tahaꞌe directamente térã plataforma web jehechauka API rupive, ndojeguerohorýi hesakã porãme. Ha katu, Bootstrap (hetavépe) ohechauka ha ombaꞌapo porãvaꞌerã koꞌã kundahárape avei. Oñeme’ẽve marandu pytyvõrã específicovéva ko’ápe.

Umi tembipuru móvil rehegua

En general, Bootstrap oipytyvõ umi versión ipyahuvéva peteĩteĩva plataforma tuichavéva navegador por defecto rehegua. Eñamindu’u umi kundahára proxy (ha’eháicha Opera Mini, Opera Mobile Turbo reko, UC Browser Mini, Amazon Silk) ndojeguerohorýi.

Umi kundahára escritorio rehegua

Upéicha avei, oñepytyvõ umi versión ipyahuvéva hetavéva kundahára escritorio rehegua.

Windows-pe, roipytyvõ Internet Explorer 8-11 .

Firefox-pe g̃uarã, además de la versión estable normal ipyahuvéva, avei roipytyvõ Firefox versión ipyahuvéva Extended Support Release (ESR) .

Oficialmente, Bootstrap ojesareko ha oñekomporta porãvaꞌerã Chromium ha Chrome Linux-pe g̃uarã, Firefox Linux-pe g̃uarã ha Internet Explorer 7-pe, ha avei Microsoft Edge-pe, jepémo ndojeguerohorýi oficialmente.

Peteĩ lista umi mba’e’oka kundahára rehegua Bootstrap oguerekóva ombohovái hag̃ua, ehecha ore Pared de bugs navegador rehegua .

Internet Explorer 8 ha 9 rehegua

Ojeguerohory avei Internet Explorer 8 ha 9, jepémo upéicha, eikuaa porãke oĩha CSS3 mbaꞌekuaarã ha HTML5 mbaꞌekuaarã ndojeguerohorýiva koꞌã kundahárape. Avei, Internet Explorer 8 ojerure ojepuru hag̃ua Respond.js ikatu hag̃uáicha oipytyvõ ñeporandu medio rehegua.

Eike Ikatu piko aiporu... reikuaa hag̃ua mba’éichapa oipytyvõ navegador CSS3 ha HTML5 mba’ekuaarã.

Internet Explorer 8 ha Respond.js rehegua

Eñangareko ko’ã ñe’ẽñemi rehe reipuru jave Respond.js ne ñemoheñói ha ñemoheñói rekohápe Internet Explorer 8-pe g̃uarã.

Respond.js ha CSS dominio kurusu rehegua

Eipuru Respond.js CSS ndive oñemboguapýva peteĩ (sub)dominio iñambuévape (techapyrã, peteĩ CDN-pe) oikotevẽ peteĩ ñembosako’i ambuéva. Ehecha Respond.js kuatiañe’ẽ rehegua umi mba’ekuaarã.

Ombohovái.js hafile://

Umi regla kundahára ñeñangareko rehegua rupi, Respond.js nombaꞌapói umi páhina ojehecháva file://protocolo rupive ndive (ojepeꞌa jave peteĩ HTML vore tendápe guáicha). Eñeha’ã hag̃ua mba’ekuaarã ombohováiva IE8-pe, ehecha ne página HTTP(S) rupive. Ehecha Respond.js kuatiañe’ẽ rehegua umi mba’ekuaarã.

Ombohovái.js ha@import

Respond.js ndoikói CSS ndive oñembohekopyréva rupive @import. En particular, ojekuaáva oĩha Drupal configuración oipuruha @import. Ehecha Respond.js kuatiañe’ẽ rehegua umi mba’ekuaarã.

Internet Explorer 8 ha ñembotuichaveha

IE8 ndoipytyvõi hekopete box-sizing: border-box;oñembojoajúramo min-width, max-width, min-height, térã max-height. Upévare, v3.0.1 guive, ndoroipuruvéima s max-width-pe ..container

Internet Explorer 8 ha @font-face rehegua

IE8 oguereko algunos problemas con @font-faceoñembojoajúramo :before. Bootstrap oipuru upe ñembojoaju iGlyphicons ndive. Peteĩ páhina oĩramo caché-pe, ha ojekargáramo mouse’ỹre ventána ári (he’iséva eity pe botón ombopyahu térã emboguejy peteĩ mba’e peteĩ iframe-pe) upéicharamo pe páhina oñembohasa oñembohasa mboyve pe letra. Ojepysóramo páhina ári (tete) ojehechaukáta peteĩva umi ikóna ha ojepysóramo umi ikóna hembýva ári ojehechaukáta umíva avei. Ehecha número #13863 umi detalle rehegua.

IE Modos de Compatibilidad rehegua

Bootstrap ndojeguerohorýi umi Internet Explorer joajuha reko tujápe. Ojeasegura hag̃ua reipuruha IE-pe g̃uarã pe modalidad de renderización ipyahuvéva, ehecha <meta>emoĩ hag̃ua etiqueta oñemohenda porãva nde página-kuérape:

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

Emoañete kuatia’atâ reko eipe’ávo tembipuru’i ñembohekorã: eity F12ha ehecha "Kuatia reko".

Ko etiqueta oike opaite Bootstrap kuatiañe’ẽ ha techapyrãme ikatu hag̃uáicha ojehechauka porãve peteĩteĩva Internet Explorer versión oipytyvõvape.

Ehecha ko porandu StackOverflow rehegua reikuaave hag̃ua.

Internet Explorer 10 oĩva Windows 8 ha Windows Phone 8-pe

Internet Explorer 10 ndojoavýi tembipuru’i ipekue jehechaukaha ipekuegui , ha upéicha rupi ndoiporúi hekopete umi porandu medio rehegua Bootstrap CSS-pe. Normalmente remoĩnteva’erãmo’ã peteĩ CSS pehẽngue pya’e remyatyrõ hag̃ua kóva:

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

Ha katu, kóva ndoikói umi tembipuru’i oipurúva Windows Phone 8 versión itujavéva Update 3-gui (oñehenóiva GDR3) , omoheñóigui ko’ãichagua tembipuru ohechauka hag̃ua peteĩ jehechauka hetave escritorio rehegua "teléfono" jehechauka mbyky rangue. Oñembohovái hag̃ua kóva, tekotevẽta emoinge ko’ã CSS ha JavaScript emba’apo hag̃ua mba’e’oka rehe .

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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)
}

Ojeikuaave hag̃ua ha mba’éichapa ojepurukuaa, emoñe’ẽ Windows Phone 8 ha Device-Width .

Peteĩ heads up ramo, romoinge kóva opaite Bootstrap kuatiañeꞌepyre ha techapyrãme jehechaukarãicha.

Safari porcentaje redondeo rehegua

Pe motor de renderización umi versión Safari rehegua v7.1 mboyve OS X-pe g̃uarã ha Safari iOS v8.0-pe g̃uarã oguereko peteĩ apañuãi michĩmi umi tenda decimal ojeporúva ñande .col-*-1clase de cuadrícula-pe. Upéicharamo, reguerekóramo 12 columna cuadrícula rehegua peteĩteĩva, rehechakuaáta osẽha mbykyha oñembojojávo ambue fila columna rehe. Safari/iOS ñembopyahu ykére, oguereko peteĩ jeporavorã ñemboguatarã:

• Emoĩ .pull-rightnde columna cuadrícula pahaitépe rehupyty hag̃ua alineación hard-right
• Embopyahu nde porcentaje manualmente rehupyty hag̃ua redondeo perfecto Safari-pe g̃uarã (hasyvéva peteĩha opción-gui)

Modal, navbar ha teclado virtual rehegua

Desbordamiento ha desplazamiento

Soporte para overflow: hiddenen el <body>elemento ha'e bastante limitado iOS ha Android-pe. Upevarã, redesplaza jave ohasávo peteĩ modal yvate térã iguy peteĩva umi tembipuru’i kundahárape, <body>oñepyrũta ojedesplaza pe contenido. Ehecha Chrome mba’e’oka #175502 (oñemyatyrõva Chrome v40-pe) ha WebKit mba’e’oka #153852 .

iOS jehaipyre tenda ha desplazamiento

iOS 9.3 guive, peteĩ modal ojepeꞌa aja, pe toque inicial peteĩ gesto de desplazamiento rehegua oĩramo peteĩ textual <input>térã peteĩ rembeꞌe ryepýpe <textarea>, pe <body>contenido oĩva modal guýpe ojedesplazáta pe modal rangue. Ehecha WebKit mba’e’oka #153856 .

Umi teclado virtual rehegua

Avei, eñatendéke reiporúramo peteĩ navbar fijo térã reiporúramo entrada peteĩ modal ryepýpe, iOS oguereko peteĩ mba’e’oka renderización rehegua nombopyahúiva elemento fijo ñemohenda oñemboguata jave teclado virtual. Mbovymi tembiaporã kóvape g̃uarã oike emoambue ne elementokuéra position: absolutetérã ehenói peteĩ temporizador enfoque-pe eñeha’ã hag̃ua emohenda manualmente ñemohenda. Kóva ndojejokói Bootstrap rupive, upévare nde pópe oĩ redesidi hag̃ua mba’e soluciónpa iporãvéta ne purupyrãme g̃uarã.

Navbar Ñemboguejyha

Pe .dropdown-backdropelemento ndojeporúi iOS-pe nav-pe pe complejidad orekóvare z-indexing. Péicha, oñemboty hag̃ua umi desplegable umi navbar-pe, eñemboguejyva’erã directamente elemento desplegable-pe (térã oimeraẽ ambue elemento odisparava’erã peteĩ evento clic iOS-pe ).

Navegador rehegua ñembotuichave

Pe página zoom opresenta katuete umi artefacto renderización rehegua amo componente-pe, mokõive Bootstrap-pe ha web hembývape. Odepende pe provlémare, ikatu ñamyatyrõ (jaheka raẽ ha upéi jaipeʼa peteĩ provléma tekotevẽramo). Ha katu, jaguereko tendencia ñamboykévo ko’ãva heta jey ndorekóigui solución directa ndaha’éiva umi solución hacky.

Pegajoso :hover/ :focusen móvil rehegua

Jepémo ndaikatúi ojejapo hovering añetegua hetavéva pantalla táctil-pe, hetavéva kundahára móvil oemula pytyvõ hovering rehegua ha ojapo :hover"pegajoso". Ambue ñe’ẽme, :hoverumi estilo oñepyrũ ojeporu ojepoko rire peteĩ elemento rehe ha ndojeporúi rire añoite puruhára oity rire ambue elemento. Kóva ikatu ojapo Bootstrap :hoverestado-kuéra "oñemboty" ndojeipotavéiva ko'ãichagua kundahárape. Oĩ avei navegador móvil ojapóva :focusupéicha avei pegajoso. Ko’áĝa ndaipóri solución simple ko’ã mba’épe g̃uarã ndaha’éiva ojeipe’apaite ko’ãichagua estilo.

Impresión rehegua

Oĩ navegador moderno-pe jepe, pe impresión ikatu ipy’aguapy.

En particular, Chrome v32 guive ha taha’e ha’éva margen ñemboheko, Chrome oipuru peteĩ jehechaukaha ipekue tuicha ijyvyku’ivéva kuatia físico tuichakuégui oñemyatyrõ jave umi porandu medio rehegua oñeimprimi jave peteĩ página web. Kóva ikatu osẽ Bootstrap cuadrícula extra-michĩva oñemboguata oñehaꞌarõꞌeỹre oñeimprimívo. Ehecha número #12078 ha Chrome mba’e’oka #273306 rehegua peteĩ detalle rehegua. Tembiaporã oñembohekopyréva:

• E’abraza pe cuadrícula extra-michĩva ha easegura nde página ojehecha aceptable iguype.
• Emohenda umi mbaꞌekuaarã @screen-*Saꞌivéva mbaꞌekuaarã ikatu hag̃uáicha ne kuatia impresora rehegua ojehecha tuichaveha michĩvévagui.
• Emoĩve umi consulta medio personalizado rehegua emoambue hag̃ua umi punto de ruptura cuadrícula tuichakue rehegua umi medio impresión rehegua añoite.

Avei, Safari v8.0 guive, s ancho fijo .containerikatu ojapo Safari oipuru hag̃ua peteĩ letra michĩ jepivegua’ỹva oñeimprimívo. Ehecha #14868 ha WebKit mba’e’oka #138192 -pe reikuaave hag̃ua. Peteĩ mba’e ikatúva ojejapo kóvape g̃uarã ha’e oñembojoapývo ko’ã CSS:

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

Android navegador de stock rehegua

Osẽvo caja-gui, Android 4.1 (ha jepe oĩ umi ñeguenohẽ pyahuvéva ojehechaháicha) oñemondo Navegador purupyrã ndive kundahára web por defecto ojeporavóva ramo (ojoavy Chrome-gui). Ñambyasy, pe Navegador purupyrã oguereko heta mba’e’oka ha ndojoajúiva CSS ndive en general.

Eiporavo umi menú

Umi <select>elemento rehe, Android stock navegador ndohechaukamo’ãi umi control lateral oĩramo peteĩ border-radiusha/térã borderojeporúva. (Ehecha ko porandu StackOverflow rehegua reikuaa hag̃ua mba’ekuaarã.) Eipuru pe kódigo pehẽngue iguýpe eipe’a hag̃ua CSS ofensivo ha <select>ehechauka pe elemento ndojejapóivaicha Android kundahára stock-pe. Pe puruhára agente ohetũva omboyke jejopy Chrome, Safari ha Mozilla kundahára ndive.

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

¿Rehechasépa peteĩ ehémplo? Ehecháke ko demostración JS Bin rehegua.

Umi omoañetéva

Oñeme’ẽ hag̃ua jeikove iporãvéva umi kundahára tuja ha mba’e’apo’ỹme, Bootstrap oipuru CSS kundahára hack heta hendápe ojepytaso hag̃ua CSS especial peteĩ kundahára versión rehe ikatu hag̃uáicha ombaꞌapo umi mbaꞌevai rehe umi kundahárape voi. Ko’ã hack entendiblemente omoheñói umi validador CSS-gua odenunsia haguã ndovaléiha. Peteĩ par hendápe, roipuru avei umi mba’ekuaarã CSS bleeding-edge ne’ĩrava gueteri oñemboheko porãva, ha katu ko’ãva ojepuru puramente oñembotuichave hag̃ua ohóvo.

Ko’ã advertencia validación rehegua noimportái práctica-pe pe porción ndaha’éiva hacky ñande CSS-pegua omoañete guive plenamente ha umi porción hacky ndojokói funcionamiento hekopete porción ndaha’éiva hacky, upégui mba’érepa romboyke deliberadamente ko’ã advertencia particular.

Ore HTML kuatiakuéra avei oguereko peteĩ HTML jegueroviapyrã ñe’ẽñemi mba’e’apo’ỹ ha ndoguerekóiva mba’e’apopyrã romoĩgui peteĩ tembiaporã peteĩ Firefox mba’e’oka rehegua .

Mbohapýha pytyvõ

Ndoroipytyvõiramo jepe oficialmente mba’eveichagua mbohapýha plugin térã add-ons, roikuave’ẽ peteĩ consejo útil roipytyvõ hag̃ua ani hag̃ua oiko umi mba’e ikatúva oiko nde proyecto-kuérape.

Caja-tamaño rehegua

Oĩ software mbohapýha, oikehápe Google Maps ha Google Custom Search Engine, ojoavy Bootstrap ndive * { box-sizing: border-box; }, peteĩ regla ojapóva upéicha paddingndoikói peteĩ elemento ancho computado paha. Eikuaave modelo caja ha tamaño rehegua CSS Tricks -pe .

Ojesarekóva contexto rehe, ikatu emboyke tekotevẽháicha (Opción 1) térã emoĩjey pe cuadro-tamaño región tuichakue rehegua (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();
}

Accesibilidad rehegua

Bootstrap osegi umi norma web jepivegua ha —mbovyve ñeha’ã extra reheve— ikatu ojepuru ojejapo hag̃ua umi tenda ojeikekuaahápe umi oipurúva AT .

Ojesalta pe navegación

Nde jeguata oguerekóramo heta joajuha ha oúva contenido principal mboyve DOM-pe, emoĩ peteĩ Skip to main contentjoajuha jeguata mboyve (peteĩ ñemyesakã ndahasýivape g̃uarã, ehecha ko artículo Proyecto A11Y rehegua ojesalta hag̃ua enlace navegación rehegua ). Oipurúramo .sr-onlymboꞌepy omokañýta jehechaukahápe pe joajuha ojesalta hag̃ua, ha .sr-only-focusablemboꞌepy oaseguravaꞌerã pe joajuha ojehecha hag̃ua peteĩ jey oñecentra rire (teclado puruhára ohechávape g̃uarã).

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

Umi rubro anidado rehegua

Oñemohenda jave iñakãrapu’ã ( <h1>- <h6>), ne kuatiahaipyre tenondegua ha’eva’erã peteĩ <h1>. Umi rubro oúva upe rire oipuruva’erã lógico <h2>- .<h6> ikatu hag̃uáicha umi pantalla moñe’ẽhára omopu’ã peteĩ cuadro de contenido nde página-kuérape g̃uarã.

Eikuaave HTML CodeSniffer ha Penn State AccessAbility -pe .

Contraste de color rehegua

Ko’áĝa, oĩ umi sa’y ñembojoaju ñepyrũrã ojeguerekóva Bootstrap-pe (ha’eháicha umi mbo’esyry botón rehegua oñembohekopyréva, oĩ umi sa’y omomba’eguasúva kódigo ojeporúva umi bloque kódigo básico- pe g̃uarã , mbo’esyry pytyvõhára .bg-primary tapykuehoha contextual rehegua , ha joajuha sa’yrã ñepyrũrã ojeporúramo peteĩ vore morotĩme) oguereko peteĩ relación de contraste michĩva (pe relación oñerrekomendáva 4,5:1 guýpe ). Péva ikatu omoheñói apañuãi umi oiporúvape ndohechaporãiva térã ndohecháiva color-pe. Ko’ã sa’y por defecto ikatu oikotevẽ oñemoambue oñembohetave hag̃ua ikontraste ha legibilidad.

Recurso adicional rehegua

• "HTML Codesniffer" kuatiañeꞌepyre ojehechakuaa hag̃ua mbaꞌekuaarã jeikekuaa rehegua
• Chrome Tembipururã Ñembohekorã Jeikerã ñembotuichave
• Analizador de Contraste de Color rehegua
• Pe Proyecto A11Y rehegua
• Kuatiakuéra jeikekuaarã MDN rehegua

Licencia rehegua FAQs

Bootstrap osẽ MIT licencia rupive ha ha'e derecho de autor 2016 Twitter. Oñembopupu umi pedazo michĩvévape, ikatu oñemombe u ko a condición reheve.

Ojerure ndéve rejapo hag̃ua:

• Eñongatu licencia ha copyright marandu oikeva’ekue Bootstrap CSS ha JavaScript rembiapokue ryepýpe eipuru jave ne rembiapokuérape

Opermiti ndéve rejapo hag̃ua:

• Emboguejy ha eipuru sãsõme Bootstrap, opaite térã peteĩ hendápe, mba’erã personal, privado, empresa interno térã comercial-pe g̃uarã
• Eipuru Bootstrap umi paquete térã distribución emoheñóivape
• Emoambue pe código fuente
• Eme’ẽ peteĩ sublicencia omoambue ha omosarambi hag̃ua Bootstrap mbohapýha tapicha ndoikéiva licencia-pe

Ombotove ndéve rejapo hag̃ua:

• Oguereko umi autor ha licencia jára responsable umi perjuicio rehe Bootstrap oñeme’ẽháicha garantía ÿme
• Emoĩ responsable umi apohare térã oguerekóva derecho de autor Bootstrap rehegua
• Emosarambi jey oimeraẽva Bootstrap pehẽngue atribución hekopete’ỹre
• Eipuru oimeraẽva marca Twitter mba’éva oimeraẽ mba’épe ikatúva he’i térã he’ise Twitter omoañeteha ne ñemyasãi
• Eipuru oimeraẽva marca Twitter mba’éva oimeraẽ mba’épe ikatúva he’i térã he’ise rejapo hague software Twitter oñeñe’ẽva rehe

Ndojeruréi ndéve rejapo hag̃ua:

• Emoĩ Bootstrap ypykue voi, térã oimeraẽ ñemoambue ikatúva rejapo hese, oimeraẽ redistribución ikatúva rembyaty oikehápe
• Emondo jey umi ñemoambue rejapova’ekue Bootstrap-pe Bootstrap rembiaporãme (jepémo oñemokyre’ỹ ko’ãichagua ñe’ẽñemi)

Bootstrap licencia henyhẽva oĩ proyecto ryrúpe ojeikuaave hag̃ua.

Umi traduksión

Umi komunida-gua ombohasa Bootstrap kuatiañe’ẽ opaichagua ñe’ẽme. Ndaipóri oipytyvõva oficialmente ha ikatu ndaha'éi siempre al día.

• Correa de botas 中文文档 (Chino) Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.
• Bootstrap 3 中文手冊 (Chino (Tradicional)) Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.
• Correa de botas på Dansk (danés) .
• Bootstrap en Français (francés) Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.
• Correa de botas auf Deutsch (alemán) .
• Correa de botas en Italiano (Italiano) .
• Correa de arranque 한국어 (coreano) .
• Bootstrap em Português do Brasil (Portugués Brasileño) .
• Correa de botas по-русски (ruso) Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.
• Bootstrap en Español (Español) .
• Türkçe Correa de Botas (Turco) .
• Correa de botas українською (Ucrania ñe'ẽme)
• Botstrap bằng tiếng Việt (Vietnam) Ñe'ẽpoty ha ñe'ẽpoty ñemohenda.

Ndoroipytyvõi romohenda térã romohenda hag̃ua umi traduksión, roñembojoaju rei hesekuéra.

¿Remohuʼãpa peteĩ traduksión pyahu térã iporãvéva? Eipe’a peteĩ pedido de tirar emoĩ hag̃ua ore lista-pe.