in English

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

JS nga

Adu kadagiti pasettayo ti agkasapulan iti panagusar iti JavaScript tapno makapagandar. Espesipiko, kasapulanda ti jQuery , Popper , ken dagiti bukodtayo a plugin ti JavaScript. Usarenmi ti slim build ti jQuery , ngem ti naan-anay a bersion ket nasuportaran met.

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. Masapul nga umuna ti jQuery, kalpasanna ti Popper, ken kalpasanna dagiti plugintayo iti JavaScript.

Reppet

Iraman ti tunggal Bootstrap JavaScript plugin iti maysa kadagiti dua a bundlemi. Agpada bootstrap.bundle.jsken bootstrap.bundle.min.jsiramanna ti Popper para kadagiti tooltip ken popovers-tayo, ngem saan a jQuery . Iraman nga umuna ti jQuery, kalpasanna ti Bootstrap JavaScript bundle. 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/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>

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/[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>

Dagiti paset

Usioso kadi no ania dagiti paset a nalawag a kasapulan ti jQuery, ti JavaScript-tayo, ken Popper? I-click ti link ti show components iti baba. No saanmo a sigurado ti 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
  • Scrollspy para iti kababalin ti scroll ken dagiti panagpabaro ti nabigasion
  • Tooltips ken popovers para iti panangiparang ken panangiposision (kasapulan met ti Popper ) .

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, 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>

Dayta laeng ti kasapulam para kadagiti pakabuklan a kasapulan ti panid. 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, shrink-to-fit=no">

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-sizingpateg manipud content-boxiti aginggana iti border-box. Daytoy ket mangsigurado paddinga 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 ::beforeken ::after—ket tawidenda amin ti naikeddeng box-sizingpara 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.chatserver, iti #bootstrapchannel.
  • Mabalin a masarakan ti tulong iti pannakaipatungpal iti Stack Overflow (naimarka bootstrap-4).
  • Dagiti agparparang-ay ket rumbeng nga agusar ti nasken a balikas bootstrapkadagiti 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.

Dagiti CSP ken dagiti naikabil nga SVG

Sumagmamano a paset ti Bootstrap ket mangiraman kadagiti naikabil nga SVG iti CSSmi tapno estilo dagiti paset a kanayon ken nalaka iti ballasiw dagiti browser ken alikamen. Para kadagiti organisasion nga addaan kadagiti ad-adu a nainget a panagisaad ti CSP , indokumentomi amin nga instansia dagiti naikabil nga SVGmi (amin dagitoy ket naipakat babaen ti background-image) tapno ad-adda a naan-anay a mabalinmo a repasuen dagiti pagpiliam.

Maibatay iti saritaan ti komunidad , dagiti sumagmamano a pagpilian para iti panangtaming iti daytoy iti bukodmo a codebase ket mairaman ti panangsukat kadagiti URL kadagiti lokal a naisangayan a sanikua, panangikkat kadagiti ladawan ken panagusar kadagiti inline a ladawan (saan a mabalin kadagiti amin a paset), ken panangbalbaliw iti CSP-mo. Ti rekomendasionmi ket repasuem a naimbag dagiti bukodmo a pagalagadan iti seguridad ken mangikeddeng iti kasayaatan a dalan nga agturong iti sango, no kasapulan.