Pauna
Mangrugi babaen ti Bootstrap, ti kalatakan a balangkas iti lubong para iti panagbangon kadagiti makasungbat, mobile-umuna a site, babaen ti jsDelivr ken ti panid ti pangrugian ti plantilia.
Napartak a panangrugi
Agsapsapulka kadi iti napardas a pananginayon iti Bootstrap iti proyektom? Usaren ti jsDelivr, ti libre a silulukat a taudan a CDN. Usarem ti package manager wenno kasapulam nga i-download dagiti taudan a file? Agturong iti panid dagiti downloads .
CSS nga
Kopia-i-paste ti stylesheet <link>
iti <head>
sakbay amin a dadduma nga stylesheet tapno maikarga ti CSS-tayo.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
JS nga
Adu kadagiti pasettayo ti agkasapulan iti panagusar iti JavaScript tapno makapagandar. Espesipiko, kasapulanda dagiti bukodtayo a plugin ti JavaScript ken Popper . Ikabil ti maysa kadagiti sumaganad <script>
nga s iti asideg ti ngudo dagiti panidmo, sakbay a mismo ti pangserra nga </body>
etiketa, tapno mapalubosan dagitoy.
Reppet
Iraman ti tunggal Bootstrap JavaScript plugin ken panagpannuray iti maysa kadagiti dua a bundlemi. Agpada bootstrap.bundle.js
ken bootstrap.bundle.min.js
iraman ni Popper para kadagiti tooltips ken popovers-tayo. Para iti ad-adu pay nga impormasion maipapan iti no ania ti nairaman iti Bootstrap, pangngaasim ta kitaem ti bennegmi a linaon .
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Naisina
No ikeddengmo ti mapan a kadua ti naisina a solusion dagiti iskrip, masapul nga umuna ti Popper (no agus-usar ka kadagiti tooltip wenno popovers), ken kalpasanna dagiti pluginmi iti JavaScript.
<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>
Dagiti Modulo
No usarem ti <script type="module">
, pangngaasim ta kitaem ti panagusarmi iti Bootstrap a kas maysa a benneg ti modulo .
Dagiti paset
Usioso kadi no ania dagiti paset a nalawag a kasapulan ti JavaScript ken Popper-tayo? I-click ti link ti show components iti baba. No saanka a pulos a sigurado maipapan ti sapasap nga estruktura ti panid, itultuloymo ti agbasa para iti pagarigan a plantilia ti panid.
Ipakita dagiti paset a kasapulan ti JavaScript
- Alerto para iti pannakaikkat iti trabaho
- Dagiti buton para kadagiti estado ti panagbalbaliw ken ti kahon ti tsek/panagpaandar ti radio
- Carousel para kadagiti amin a kababalin ti slide, dagiti kontrol, ken dagiti mangipakita
- I-collapse para iti panag-toggling ti pannakakita ti linaon
- Dagiti dropdown para iti panangiparang ken panangiposision (kasapulan pay ti Popper ) .
- Dagiti modal para iti panangiparang, panangiposision, ken kababalin ti panag-scroll
- Navbar para iti panangipalawa ti pluginmi a Collapse tapno maipatungpal ti makasungbat a kababalin
- Toasts para iti pannakaiparang ken pannakaidismis
- Tooltips ken popovers para iti panangiparang ken panangiposision (kasapulan met ti Popper ) .
- Scrollspy para iti kababalin ti scroll ken dagiti panagpabaro ti nabigasion
Plantilia ti pangrugian
Siguraduenyo a naipasdek dagiti panidyo kadagiti kaudian a pagalagadan ti disenio ken panagrang-ay. Kayatna a sawen ti panagusar ti HTML5 a doctype ken panangiraman ti viewport meta tag para kadagiti umno a sumungbat a kababalin. Pagtitiponem amin ket kastoy koma ti langa dagiti panidmo:
<!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>
Para kadagiti sumaganad nga addang, bisitaen dagiti dok ti Layout wenno dagiti opisial a pagariganmi tapno rugian nga iplastar ti linaon ken paset ti site-mo.
Napateg a global
Ti Bootstrap ket agus-usar ti sumagmamano a napateg a sangalubongan nga estilo ken dagiti panagitunos a kasapulam nga ammo no usarem daytoy, amin dagitoy ket gangani nga eksklusibo a naiturong iti normalisasion dagiti estilo ti krus a browser. Agdive tayo iti uneg.
Tipo ti dokto ti HTML5
Ti Bootstrap ket agkasapulan ti panagusar ti HTML5 a doctype. No awan dayta, makitam ti sumagmamano a funky a di kompleto nga estilo, ngem ti panangiraman iti dayta ket saan koma a mangpataud iti aniaman a dakkel a hiccups.
<!doctype html>
<html lang="en">
...
</html>
Sungsungbatan nga meta tag
Bootstrap is developed mobile first , maysa nga estratehia a daytoy ket mang-optimize ti kodigo para kadagiti mobile nga alikamen nga umuna ken kalpasanna ket mang-scal up kadagiti paset no kasapulan babaen ti panagusar kadagiti panagsaludsod ti media ti CSS. Tapno masigurado ti umno a panagiparang ken panag-touch zooming para kadagiti amin nga alikamen, inayon ti makasungbat a meta tag ti viewport iti <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Mabalinmo a makita ti pagarigan daytoy nga agtigtignay iti plantilia ti pangrugian .
Panagdakkel ti kahon
Para iti ad-adu a diretso a panagdakkel iti CSS, baliwanmi ti sangalubongan a box-sizing
pateg manipud content-box
iti aginggana iti border-box
. Daytoy ket mangsigurado padding
a saan a mangapektar ti maudi a nakumpirma a kalawa ti maysa nga elemento, ngem daytoy ket mabalin a mangpataud kadagiti parikut kadagiti sumagmamano a maikatlo a partido a software a kas ti Google Maps ken Google Custom Search Engine.
Iti manmano nga okasion a kasapulam a baliwan dayta, usarem ti maysa a banag a kas iti sumaganad:
.selector-for-some-widget {
box-sizing: content-box;
}
Babaen ti snippet iti ngato, dagiti naisanglad nga elemento—a mairaman ti napataud a linaon babaen ti ::before
ken ::after
—ket tawidenda amin ti naikeddeng box-sizing
para iti dayta .selector-for-some-widget
.
Ammuen ti ad-adu pay maipapan iti modelo ti kahon ken panagdakkel iti CSS Tricks .
I-reboot nga i-reboot
Para iti napasayaat a panagiparang ti krus-browser, usarenmi ti Reboot tapno mailinteg dagiti saan a panagtutunos iti ballasiw dagiti browser ken dagiti alikamen bayat a mangipaay kadagiti bassit nga ad-adu nga opinionado a panagisubli kadagiti gagangay nga elemento ti HTML.
Komunidad
Agtalinaedka a nabarbaro iti pannakapataud ti Bootstrap ken makadanon iti komunidad babaen kadagitoy a makatulong a rekurso.
- Basaen ken agsuskribir iti Ti Opisial a Bootstrap Blog .
- Chat kadagiti padam a Bootstrappers iti IRC. Iti
irc.libera.chat
server, iti#bootstrap
channel. - Mabalin a masarakan ti tulong iti pannakaipatungpal iti Stack Overflow (naimarka
bootstrap-5
). - Dagiti agparparang-ay ket rumbeng nga agusar ti nasken a balikas
bootstrap
kadagiti pakete a mangbalbaliw wenno mangnayon ti panagusar ti Bootstrap no agiwaras babaen ti npm wenno dagiti kapada a mekanismo ti panagited para iti kangatuan a pannakaduktal.
Mabalinmo pay a suroten ti @getbootstrap iti Twitter para kadagiti kaudian a tsismis ken nakaam-amak a music video.