Source

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, a ddarperir am ddim gan y bobl yn jsDelivr. 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

Mae angen defnyddio JavaScript i weithio ar lawer o'n cydrannau. Yn benodol, mae angen jQuery , Popper.js , a'n ategion JavaScript ein hunain arnynt. Rhowch y <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.js, ac yna ein ategion JavaScript.

Rydym yn defnyddio adeiladwaith main jQuery , ond cefnogir y fersiwn lawn hefyd.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Rhyfedd pa gydrannau sydd angen jQuery, ein JS, a Popper.js 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.

Mae ein bootstrap.bundle.jsac yn bootstrap.bundle.min.jscynnwys Popper , ond nid jQuery . I gael rhagor o wybodaeth am yr hyn sydd wedi'i gynnwys yn Bootstrap, gweler ein hadran cynnwys .

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.js hefyd )
  • Moddau ar gyfer arddangos, lleoli, ac ymddygiad sgrolio
  • Navbar ar gyfer ymestyn ein ategyn Collapse i weithredu ymddygiad ymatebol
  • Awgrymiadau offer a popovers ar gyfer arddangos a lleoli (hefyd angen Popper.js )
  • 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, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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 cywir a chwyddo cyffyrddiad ar gyfer pob dyfais, ychwanegwch y tag meta golygfan ymatebol i'ch 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.

  • Dilynwch @getbootstrap ar Twitter .
  • Darllenwch a thanysgrifiwch i'r Blog Bootstrap Swyddogol .
  • Sgwrsiwch gyda chyd-Botstrappers yn IRC. Ar y irc.freenode.netgweinydd, 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.