Saltar al contenido principal Salta a docs navegación
Check
in English

Bootstrap nisqawan qallariy

Bootstrap huk kallpasapa, ruwanakuna hunt'asqa ñawpaqninpi yanapakuypa yanapakuyninmi. Imatapas ruway —prototipomanta ruwaykama— minutollapi.

Kay p'anqapi

Utqaylla qallariy

Qallariy Bootstrap ruwanapaq wakichisqa CSS chaymanta JavaScript CDN kaqninta mana ima ruwana ruwanakuna necesidadniyuq kaqwan. Kay Bootstrap CodePen rikuchiywan ruwaypi qhaway .


  1. Musuq index.htmlwillañiqita ruway llamk'apuy saphiykipi. Etiqueta <meta name="viewport">hinallataq allin kutichiy ruwaypaq dispositivokuna apaykachanakunapi churay.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Incluye el CSS y JS de Bootstrap. <link>Etiquetata churay kay <head>CSSniykupaq, chaymanta <script>etiquetata JavaScript paqueteykupaq (Popper kaqwan ima, urayk'aqkuna, poppers chaymanta yanapakuykuna churanapaq) manaraq wichq'akuchkaptin </body>. CDN t'inkiykumanta astawan yachay .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Poppertapas JSniykutapas sapankama churayta atinki . Sichus mana urmachiykunata, popovers utaq yanapakuypa yanapakuyninkunata llamk'achiyta yuyankichu, wakin kilobytekunata waqaychay mana Popper kaqwan.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Allin p'unchaw, pacha! Akllasqayki maskaqpi p'anqata kichay Bootstrapped p'anqaykita qhawanaykipaq. Kunanqa Bootstrap kaqwan ruwayta qallariyta atikunki kikiyki ruwanayki ruwaspa , chunkakuna componentekuna yapaspa chaymanta oficial ejemploykuta llamk'achispa .

Referencia hina, kaypi CDN ñawpaq t'inkikunayku kachkan.

Willay URL nisqa
CSS nisqa https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

CDN kaqwanpas llamk'achiy atikunki mayqin yapasqa ruwasqaykutapas apamunaykipaq mayqinchus Contenido p'anqapi listasqa kachkan .

Qatiqnin ruwaykuna

JS componentes nisqakuna

Curioso mayqin componentes explícitamente JavaScript chaymanta Popperniykumanta necesitanku? 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 ( Poppertapas munanmi )
  • Modalkuna rikuchinapaq, churanapaq, chaymanta kuyuy ruwaypaq
  • Navbar Collapse chaymanta Offcanvas pluginsniyku mast'ariypaq kutichiq ruwaykunata ruwanapaq
  • Navs kaqwan Tab plugin kaqwan contenido paneles kaqmanta tikraypaq
  • Mana lonakuna qhawaypaq, churanapaq, chaymanta kuyuy ruwaypaq
  • Scrollspy kuyuchina ruwaypaq chaymanta puriy musuqyachiykunapaq
  • Brindis para exhibir y despedir
  • Hiranakuna yuyaychaykuna chaymanta popovers rikuchinapaq chaymanta churanapaq (Poppertapas munan )

Importante globales nisqakuna

Bootstrap huk maki importante global estilokuna chaymanta churanakuna llamk'achin, tukuyninku yaqa sapallamanta ruwasqa kanku normalización cruzada navegador estilokuna kaqman. Chayman challpukusun.

HTML5 nisqa doctipo nisqa

Bootstrap nisqaqa HTML5 doctype nisqap llamk'aynintam munan. Mana chaywanqa, wakin funky chaymanta mana hunt'asqa estilokunata rikunki.

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

Kaymanta huk rikch'anata ruwaypi utqaylla qallariypi rikunki .

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.

  • Ñawinchay hinaspa qillqakuy The Official Bootstrap Blog nisqaman .
  • GitHub Rimanakuyniykumanta tapuy chaymanta maskay .
  • IRC nisqapi Bootstrappers masikunawan rimanakuy. Servidorpi irc.libera.chat, #bootstrapkanalpi.
  • Ruway yanapakuyqa tarikunmanmi kaypi Pila Desbordamiento (etiquetado bootstrap-5).
  • 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.