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 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.js
chaymanta bootstrap.bundle.min.js
Popper 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-sizing
chanita content-box
kayman tikrayku border-box
. Kayqa padding
mana 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 ::before
chaymanta ::after
—llapanku box-sizing
chaypaq 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
,#bootstrap
kanalpi. - Ruway yanapakuyqa tarikunmanmi kaypi Pila Desbordamiento (etiquetado
bootstrap-5
). - Ruwaqkuna llalliq simita
bootstrap
paquetes 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.