Qallariy

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

Kay p'anqapi

Utqaylla qallariy

¿Buscando rápidamente añadir Bootstrap a tu proyecto? jsDelivr llamk'achiy, huk mana qullqiyuq kichasqa CDN. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Askha componenteyku llamk'ananpaq JavaScript llamk'achiyta munanku. Específicamente, paykuna kikin JavaScript pluginsniyku chaymanta Popper mañanku . Huknin kay qatiq <script>s p'anqaykip tukukuynin qayllapi churay, wichq'ana etiqueta ñawpaqninpi , </body>chaykunata atichinapaq.

Qipi

Sapa Bootstrap JavaScript plugin chaymanta dependenciata huk iskay paqueteykumanta churay. Iskayninku bootstrap.bundle.jschaymanta bootstrap.bundle.min.jsPopper yanapakuyniykupaq chaymanta popoversniykupaq . Aswan willakuypaq imakuna Bootstrap kaqpi churasqa, ama hina kaspa qhaway imayna kanankuna t'aqaykupi.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Rakisqa

Sichus sapaq scriptkuna allichaywan riyta tanteanki, Popper ñawpaqta hamunan tiyan (sichus yanapakuykuna utaq popovers llamk'achkanki), chaymanta JavaScript pluginsniyku.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Módulos

Sichus llamk'achkanki <script type="module">, ama hina kaspa qhaway ñuqaykupaq llamk'achiyta Bootstrap huk módulo t'aqa hina.

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 pluginniyku mast'ariypaq kutichiq ruwayta ruwanapaq
Brindis para exhibir y despedir
Hiranakuna yuyaychaykuna chaymanta popovers rikuchinapaq chaymanta churanapaq (Poppertapas 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">

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Qatiq ruwanakuna kaqpaq, 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">

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.

Ñawinchay hinaspa qillqakuy The Official Bootstrap Blog nisqaman .
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.