Rhagymadrodd

Dechreuwch gyda Bootstrap, fframwaith mwyaf poblogaidd y byd ar gyfer adeiladu gwefannau ymatebol, symudol-gyntaf, gyda jsDelivr a thempled o dudalen gychwynnol.

Ar y dudalen hon

Cychwyn cyflym

Eisiau ychwanegu Bootstrap at eich prosiect yn gyflym? Defnyddiwch jsDelivr, CDN ffynhonnell agored am ddim. Defnyddio rheolwr pecyn neu angen lawrlwytho'r ffeiliau ffynhonnell? Ewch i'r dudalen lawrlwytho .

CSS

Copïwch-gludwch y ddalen arddull <link>i mewn i'ch <head>cyn pob dalen arddull arall i lwytho ein CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

Mae angen defnyddio JavaScript i weithio ar lawer o'n cydrannau. Yn benodol, mae angen ein ategion JavaScript a Popper ein hunain arnynt . Rhowch un o'r <script>s canlynol yn agos at ddiwedd eich tudalennau, yn union cyn y </body>tag cau, i'w galluogi.

Bwndel

Cynhwyswch bob ategyn Bootstrap JavaScript a dibyniaeth gydag un o'n dau fwndel. Mae'r ddau bootstrap.bundle.jsac yn bootstrap.bundle.min.jscynnwys Popper ar gyfer ein cynghorion offer a popovers. I gael rhagor o wybodaeth am yr hyn sydd wedi'i gynnwys yn Bootstrap, gweler ein hadran gynnwys .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Ar wahân

Os penderfynwch fynd gyda'r datrysiad sgriptiau ar wahân, rhaid i Popper ddod yn gyntaf (os ydych chi'n defnyddio cynghorion offer neu popovers), ac yna ein ategion 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>

Modiwlau

Os ydych yn defnyddio <script type="module">, cyfeiriwch at ein hadran defnyddio Bootstrap fel modiwl .

Cydrannau

Yn chwilfrydig pa gydrannau sydd angen ein JavaScript a'n Popper yn benodol? Cliciwch ar y ddolen cydrannau sioe isod. Os ydych chi'n ansicr o gwbl am strwythur cyffredinol y dudalen, daliwch ati i ddarllen am dempled tudalen enghreifftiol.

Dangos cydrannau sydd angen JavaScript

Rhybuddion am ddiswyddo
Botymau ar gyfer toglo cyflyrau ac ymarferoldeb blwch ticio/radio
Carwsél ar gyfer pob ymddygiad sleidiau, rheolyddion a dangosyddion
Cwymp ar gyfer toglo gwelededd cynnwys
Cwympiadau ar gyfer arddangos a lleoli (mae angen Popper hefyd )
Moddau ar gyfer arddangos, lleoli, ac ymddygiad sgrolio
Navbar ar gyfer ymestyn ein ategyn Collapse i weithredu ymddygiad ymatebol
Tostau i'w harddangos a'u diystyru
Awgrymiadau offer a popovers ar gyfer arddangos a lleoli (mae angen Popper hefyd )
Scrollspy ar gyfer ymddygiad sgrolio a diweddariadau llywio

Templed cychwynnol

Gwnewch yn siŵr bod eich tudalennau wedi'u gosod gyda'r safonau dylunio a datblygu diweddaraf. Mae hynny'n golygu defnyddio doctype HTML5 a chynnwys meta-tag golygfan ar gyfer ymddygiadau ymatebol priodol. Rhowch y cyfan at ei gilydd a dylai eich tudalennau edrych fel hyn:

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

Am y camau nesaf, ewch i'r dogfennau Layout neu ein henghreifftiau swyddogol i ddechrau gosod cynnwys a chydrannau eich gwefan.

Byd-eang pwysig

Mae Bootstrap yn defnyddio llond llaw o arddulliau a gosodiadau byd-eang pwysig y bydd angen i chi fod yn ymwybodol ohonynt wrth ei ddefnyddio, ac mae pob un ohonynt bron yn gyfan gwbl wedi'u hanelu at normaleiddio arddulliau trawsborwyr. Gadewch i ni blymio i mewn.

Docteip HTML5

Mae Bootstrap yn gofyn am ddefnyddio'r doctype HTML5. Hebddo, fe welwch rai steilio anghyflawn ffynci, ond ni ddylai ei gynnwys achosi unrhyw anawsterau sylweddol.

<!doctype html>
<html lang="en">
  ...
</html>

Tag meta ymatebol

Datblygir Bootstrap symudol yn gyntaf , strategaeth lle rydym yn optimeiddio cod ar gyfer dyfeisiau symudol yn gyntaf ac yna'n cynyddu cydrannau yn ôl yr angen gan ddefnyddio ymholiadau cyfryngau CSS. Er mwyn sicrhau rendro a chwyddo cyffyrddiad priodol ar gyfer pob dyfais, ychwanegwch y tag meta golygfan ymatebol at eich ffeil <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Gallwch weld enghraifft o hyn ar waith yn y templed cychwyn .

Blwch-sizing

I gael maint mwy syml yn CSS, rydym yn newid y box-sizinggwerth byd-eang content-boxo border-box. Mae hyn yn sicrhau paddingnad yw'n effeithio ar led cyfrifedig terfynol elfen, ond gall achosi problemau gyda rhai meddalwedd trydydd parti fel Google Maps a Google Custom Search Engine.

Ar yr achlysuron prin y mae angen i chi ei ddiystyru, defnyddiwch rywbeth fel y canlynol:

.selector-for-some-widget {
  box-sizing: content-box;
}

Gyda'r pyt uchod, bydd elfennau nythu - gan gynnwys cynnwys a gynhyrchir trwy ::beforea ::after- i gyd yn etifeddu'r hyn a nodir box-sizingar gyfer hynny .selector-for-some-widget.

Dysgwch fwy am fodel blwch a maint yn CSS Tricks .

Ailgychwyn

Ar gyfer gwell rendro traws-borwr, rydym yn defnyddio Reboot i gywiro anghysondebau ar draws porwyr a dyfeisiau tra'n darparu ailosodiadau ychydig yn fwy barn i elfennau HTML cyffredin.

Cymuned

Sicrhewch y wybodaeth ddiweddaraf am ddatblygiad Bootstrap ac estyn allan i'r gymuned gyda'r adnoddau defnyddiol hyn.

Darllenwch a thanysgrifiwch i'r Blog Bootstrap Swyddogol .
Sgwrsiwch gyda chyd-Botstrappers yn IRC. Ar y irc.libera.chatgweinydd, yn y #bootstrapsianel.
Gellir dod o hyd i gymorth gweithredu yn Stack Overflow (tagged bootstrap-5).
Dylai datblygwyr ddefnyddio'r allweddair bootstrapar becynnau sy'n addasu neu'n ychwanegu at ymarferoldeb Bootstrap wrth ddosbarthu trwy npm neu fecanweithiau dosbarthu tebyg ar gyfer y darganfyddiad mwyaf posibl.

Gallwch hefyd ddilyn @getbootstrap ar Twitter i gael y clecs diweddaraf a fideos cerddoriaeth anhygoel.