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.
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.
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.js
ac yn bootstrap.bundle.min.js
cynnwys Popper , ond nid jQuery . I gael rhagor o wybodaeth am yr hyn sydd wedi'i gynnwys yn Bootstrap, gweler ein hadran gynnwys .
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:
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.
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>
.
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-sizing
gwerth byd-eang content-box
o border-box
. Mae hyn yn sicrhau padding
nad 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:
Gyda'r pyt uchod, bydd elfennau nythu - gan gynnwys cynnwys a gynhyrchir trwy ::before
a ::after
- i gyd yn etifeddu'r hyn a nodir box-sizing
ar 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.net
gweinydd, yn y##bootstrap
sianel. - Gellir dod o hyd i gymorth gweithredu yn Stack Overflow (tagged
bootstrap-4
). - Dylai datblygwyr ddefnyddio'r allweddair
bootstrap
ar 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.