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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Askha componenteyku llamk'ananpaq JavaScript llamk'achiyta munanku. Específicamente, paykuna jQuery , Popper , chaymanta kikin JavaScript pluginsniykumanta mañakunku. jQuery kaqpa llañu ruwayninta llamk'achiyku , ichaqa hunt'asqa layapas yanapasqa kachkan.

Huknin kay qatiq <script>s p'anqaykip tukukuynin qayllapi churay, wichq'ana etiqueta ñawpaqninpi , </body>chaykunata atichinapaq. jQuery ñawpaqta hamunan tiyan, chaymanta Popper, chaymanta JavaScript pluginsniyku.

Qipi

Sapa Bootstrap JavaScript plugin huk iskay paqueteykumanta churay. Iskayninku bootstrap.bundle.jschaymanta bootstrap.bundle.min.jsPopper yanapakuyniykupaq chaymanta popoversniykupaq, ichaqa mana jQuery . Ñawpaqta jQueryta churay, chaymanta huk Bootstrap JavaScript huñuta. Aswan willakuypaq imakuna Bootstrap kaqpi churasqa, ama hina kaspa qhaway imayna kanankuna t'aqaykupi.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Componentes nisqakuna

Curioso mayqin componentes explícitamente jQuery, JavaScriptniyku, chaymanta Popper mañanku? Uraypi componentekuna rikuchiy t'inkipi ñit'iy. Sichus mana segurochu kanki p'anqap ruwayninmanta, ñawirispallapuni huk rikch'ana 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
Scrollspy kuyuchina ruwaypaq chaymanta puriy musuqyachiykunapaq
Hiranakuna yuyaychaykuna chaymanta popovers rikuchinapaq chaymanta churanapaq (Poppertapas munan )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

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

CSPs y SVGs embebidos

Askha Bootstrap componentekuna SVGkuna churasqa CSSniykupi churanku componentekuna sapa kuti chaymanta mana sasachu tukuy maskaqkuna chaymanta dispositivokuna estilopaq. Aswan sinchi CSP ruwanakunayuq organizacionkunapaq , llapa instanciakuna SVGkunayku churasqaykumanta qillqayku (llapanku background-image) kaqnintakama ruwasqayku chaymanta aswan allinta akllanakunayki qhawayta atikunki.

Botón de cerrar (usado en alertas y modales) .
Cajas de verificación personalizadas y botones de radio
Interruptores de forma
Formulario validación nisqa iconokuna
Menús de selección personalizadas
Controles de carrusel
Navbar nisqapi ñit’inakuna

Based on community conversation , wakin akllanakuna kayta kikin codebase kaqpi allichaypaq URLkuna kitipi qusqa kaqwan tikray, siq'ikunata hurquy chaymanta chiru ukhupi siq'ikuna llamk'achiy (mana llapa componentes kaqpi atikunchu), chaymanta CSP kaqniyki tikray. Yuyaychayniykuqa kikiyki waqaychasqa kamachiyniykikunata allinta qhaway chaymanta huk aswan allin ñan ñawpaqman tanteay, necesario kaqtin.