Rhagymadrodd

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

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

JS

Mae angen defnyddio JavaScript i weithio ar lawer o'n cydrannau. Yn benodol, mae angen jQuery , Popper , a'n ategion JavaScript ein hunain arnynt. Rydym yn defnyddio adeiladwaith main jQuery , ond cefnogir y fersiwn lawn hefyd.

Rhowch un o'r <script>s canlynol yn agos at ddiwedd eich tudalennau, yn union cyn y </body>tag cau, i'w galluogi. Rhaid i jQuery ddod yn gyntaf, yna Popper, ac yna ein ategion JavaScript.

Bwndel

Cynhwyswch bob ategyn JavaScript Bootstrap gydag un o'n dau fwndel. Mae'r ddau bootstrap.bundle.jsac yn bootstrap.bundle.min.jscynnwys Popper ar gyfer ein cynghorion offer a'n popovers, ond nid jQuery . Cynhwyswch jQuery yn gyntaf, yna bwndel JavaScript Bootstrap. 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/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>

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

Cydrannau

Yn chwilfrydig pa gydrannau sydd angen jQuery, ein JavaScript, a Popper yn benodol? Cliciwch ar y ddolen cydrannau sioe isod. Os ydych chi'n ansicr am strwythur 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
Scrollspy ar gyfer ymddygiad sgrolio a diweddariadau llywio
Awgrymiadau offer a popovers ar gyfer arddangos a lleoli (mae angen Popper hefyd )

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

Dyna'r cyfan sydd ei angen arnoch ar gyfer gofynion cyffredinol y dudalen. 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, shrink-to-fit=no">

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-4).
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.

Partneriaethau Diogelwch Cymunedol a SVGs sefydledig

Mae sawl cydran Bootstrap yn cynnwys SVGs wedi'u mewnosod yn ein CSS i arddullio cydrannau'n gyson ac yn hawdd ar draws porwyr a dyfeisiau. Ar gyfer sefydliadau sydd â chyfluniadau PDC mwy llym , rydym wedi dogfennu pob achos o'n SVGs wedi'u mewnosod (pob un ohonynt yn cael eu cymhwyso trwy background-image) fel y gallwch adolygu'ch opsiynau yn fwy trylwyr.

Botwm cau (a ddefnyddir mewn rhybuddion a moddau)
Blychau ticio personol a botymau radio
Ffurf switshis
Ffurfio eiconau dilysu
Dewislenni dewis personol
Rheolaethau carwsél
Navbar toglo botymau

Yn seiliedig ar sgwrs gymunedol , mae rhai opsiynau ar gyfer mynd i'r afael â hyn yn eich sylfaen cod eich hun yn cynnwys disodli'r URLs ag asedau a gynhelir yn lleol, tynnu'r delweddau a defnyddio delweddau mewnol (ddim yn bosibl ym mhob cydran), ac addasu eich PDC. Ein hargymhelliad yw adolygu eich polisïau diogelwch eich hun yn ofalus a phenderfynu ar y llwybr gorau ymlaen, os oes angen.