Source

Qallariy

Bootstrap kaqwan qallariy, kay pachamanta aswan riqsisqa marco kutichiq, movil-primer sitiokuna ruwanapaq, jsDelivr kaqwan chaymanta huk plantilla qallariy p'anqawan.

Utqaylla qallariy

¿Buscando rápidamente añadir Bootstrap a tu proyecto? jsDelivr llamk'achiy, jsDelivr kaqpi runakunap mana qullqipaq qusqan. Huk paquete kamachiqta llamk'achkanki icha pukyuta willañiqikunata uraykachinaykichu tiyan? Umachay uraykachiykuna nisqa p’anqaman.

CSS nisqa

Copia-pegar estilo raphita <link>qampaq <head>ñawpaq llapa wak estilo raphikuna CSSniyku karganapaq.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Askha componenteyku llamk'ananpaq JavaScript llamk'achiyta munanku. Específicamente, paykuna jQuery , Popper.js , chaymanta kikin JavaScript pluginsniyku necesitanku. Kay qatiq <script>s nisqakunata churay p'anqaykikunap tukukuynin qayllapi, manaraq wichq'ana </body>etiqueta kachkaptin, chaykunata atichinaykipaq. jQuery ñawpaqta hamunan tiyan, chaymanta Popper.js, chaymanta JavaScript pluginsniyku.

jQuery kaqpa llañu ruwayninta llamk'achiyku , ichaqa hunt'asqa layapas yanapasqa kachkan.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Curioso mayqin componentes explícitamente jQuery, ñuqayku JS, chaymanta Popper.js mañanku? Uraypi componentekuna rikuchiy t'inkipi ñit'iy. Sichus mana imapipas segurochu kanki general p'anqa estructuramanta, ñawiriytapuni huk ejemplo p'anqa plantillapaq.

JavaScript mañaq componentekunata rikuchiy
  • Despido nisqamanta alertas
  • Estadokuna tikraypaq botonkuna chaymanta qhaway qutu/radio ruwanakuna
  • Carrusel llapa diapositiva ruwaykunapaq, kamachiykunapaq, rikuchiqkunapaq ima
  • Contenidopa rikuyninta tikranapaq llalliy
  • Qawachinapaq chaymanta churanapaq urayk'aqkuna ( Popper.js kaqtapas munan )
  • Modalkuna rikuchinapaq, churanapaq, chaymanta kuyuy ruwaypaq
  • Navbar Collapse pluginniyku mast'ariypaq kutichiq ruwayta ruwanapaq
  • Llamkanakuna chaymanta popovers rikuchiypaq chaymanta churanapaq ( Popper.js kaqtapas munan )
  • Scrollspy kuyuchina ruwaypaq chaymanta puriy musuqyachiykunapaq

Plantilla de inicio

Aswan allinta qhaway p'anqaykikuna qhipa ruwaywan chaymanta wiñachiy kamachiykunawan churasqa. Chayqa huk HTML5 doctype llamk'achiyta chaymanta huk qhaway punku meta etiquetata allin kutichiy ruwaykunapaq churayta niyta munan. Tukuy chayta huñuy chaymanta p'anqaykikuna kayhina kanan tiyan:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Chaylla tukuy p'anqa mañakuykunapaq necesitanki. Watukuy Layout docs utaq oficial ejemploykuta qallariypaq churayta sitioykipa contenido kaqninta chaymanta componentes kaqninta.

Importante globales nisqakuna

Bootstrap huk maki importante global estilokuna chaymanta churanakuna llamk'achin chaymanta chayta llamk'achkaspa yachanayki tiyan, tukuyninku yaqa sapalla normalización cruzada navegador estilokuna kaqman dirigisqa kanku. Chayman challpukusun.

HTML5 nisqa doctipo nisqa

Bootstrap nisqaqa HTML5 doctype nisqap llamk'aynintam munan. Mana chaywanqa, wakin funky mana hunt'asqa estilota rikunki, ichaqa chaymanta mana ima considerable hipotapas ruwananchu tiyan.

<!doctype html>
<html lang="en">
  ...
</html>

Etiqueta meta respuesta

Bootstrap ruwasqa kachkan kuyuchina ñawpaqta , huk estrategia mayqinpichus ñawpaqta kuyuchina dispositivokunapaq código allinchayku chaymanta componentekuna necesario hina CSS willay tapuykunata llamk'achispa hatunyachiyku. Allin ruway chaymanta llachpanapaq hatunyachiy llapa dispositivokuna kaqpaq, kutichiq qhaway punku meta etiquetata yapay qampaq <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Kaymanta huk rikch'anata ruwaypi qallariy plantilla nisqapi qhawayta atinki .

Caja-tamaño

CSS kaqpi aswan chiqan sayaypaq, tukuypaq box-sizingchanita content-boxkayman tikrayku border-box. Kayqa paddingmana huk elementomanta qhipa yupasqa anchota afectanchu, ichaqa wakin kimsa kaq software kaqwan sasachakuykunata ruwayta atin Google Maps hina chaymanta Google Custom Search Engine kaqwan.

Mana ancha rikusqa kutipi chayta chinkachinayki tiyan, kayhinata llamk'achiy:

.selector-for-some-widget {
  box-sizing: content-box;
}

Hawa fragmentowan, anidado elementokuna —kayhina chaymanta ruwasqa imayna kanankuna ::beforechaymanta ::after—llapanku box-sizingchaypaq nisqata herenciata chaskinqaku .selector-for-some-widget.

Aswan yachay caja modelomanta chaymanta sayachiymanta CSS Tricks kaqpi .

Reboot

Allinchasqa chakana maskaq ruwanapaq, Reboot llamk'achiyku mana tupaqkunata allichaypaq tukuy maskaqkuna chaymanta dispositivokuna kaqpi chaymanta aswan pisi aswan yuyayniyuq kutichiykunata común HTML elementokunaman quyku.

Ayllu

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

  • Twitter nisqapi @getbootstrap nisqa qillqata qatipay .
  • Ñawinchay hinaspa qillqakuy The Official Bootstrap Blog nisqaman .
  • IRC nisqapi Bootstrappers masikunawan rimanakuy. Servidorpi irc.freenode.net, ##bootstrapkanalpi.
  • Ruway yanapakuyqa tarikunmanmi kaypi Pila Desbordamiento (etiquetado bootstrap-4).
  • 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.

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