Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
Check
in English

Mangrugi iti Bootstrap

Ti bootstrap ket nabileg, feature-packed a frontend toolkit. Mangbangon iti aniaman—manipud prototype agingga iti produksion—iti sumagmamano a minuto.

Iti daytoy a panid

Napartak a panangrugi

Mangrugi babaen ti panangiraman ti Bootstrap a nakasagana a produksion a CSS ken JavaScript babaen ti CDN nga awan ti kasapulan ti ania man nga addang ti panagbangon. Kitaen daytoy iti praktis babaen daytoy a Bootstrap CodePen demo .


  1. Mangaramid ti baro a index.htmlfile iti ramut ti proyektom. Iraman ti <meta name="viewport">tag kasta met para iti umno a panagsungbat a kababalin kadagiti mobile device.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. Iraman ti CSS ken JS ti Bootstrap. Ikabil ti <link>tag iti <head>para iti CSS-tayo, ken ti <script>tag para iti JavaScript bundletayo (a mairaman ti Popper para iti panagposision kadagiti dropdown, poppers, ken tooltips) sakbay ti panagserra </body>. Ammuem ti ad-adu pay maipapan kadagiti silpomi iti CDN .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    Mabalin met nga iraman ti Popper ken ti JS mi nga agsina. No dika plano ti agusar kadagiti dropdown, popovers, wenno tooltips, makasalbarka iti sumagmamano a kilobyte babaen ti saanmo a panangiraman iti Popper.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. Hello, lubong! Luktam ti panid iti browser a piliem tapno makitam ti panidmo a Bootstrapped. Ita mabalinmon a rugian ti panagbangon babaen ti Bootstrap babaen ti panagpartuat ti bukodmo a layout , pananginayon kadagiti pinulpullo a paset , ken panagusar kadagiti opisial a pagariganmi .

Kas reperensia, ditoy dagiti kangrunaan a silpotayo iti CDN.

Panangiladawan URL nga
CSS nga https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS nga https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Mabalinmo pay nga usaren ti CDN tapno mangala ti ania man kadagiti kanayonan a panagbangonmi a nailista iti panid ti Linaon .

Sumaruno nga addang

Dagiti paset ti JS

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 kadagiti pluginmi iti Collapse ken Offcanvas tapno maipatungpal dagiti makasungbat a kababalin
  • Navs nga addaan ti Tab plugin para iti panag-toggle kadagiti linaon a pane
  • Dagiti offcanvases para iti panangiparang, panangiposision, ken kababalin ti panag-scroll
  • Scrollspy para iti kababalin ti scroll ken dagiti panagpabaro ti nabigasion
  • Toasts para iti pannakaiparang ken pannakaidismis
  • Tooltips ken popovers para iti panangiparang ken panangiposision (kasapulan met ti Popper ) .

Napateg a global

Ti Bootstrap ket agus-usar kadagiti sumagmamano a napateg a sangalubongan nga estilo ken dagiti panagitunos, 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 ken di kompleto nga estilo.

<!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 napardas a panangrugi .

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 .
  • Saludsodem ken sukimaten dagiti Panaglilinnawagmi iti GitHub .
  • 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-5).
  • 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.