in English

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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. 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.js, ac yna ein ategion JavaScript.

Bwndel

Cynhwyswch bopeth sydd ei angen arnoch mewn un sgript gyda'n bwndel. 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 .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Ar wahân

Os penderfynwch fynd gyda'r datrysiad sgriptiau ar wahân, rhaid i Popper.js ddod yn gyntaf, ac yna ein ategion JavaScript.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Cydrannau

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 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
  • Gostyngiadau 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
  • Tostau i'w harddangos a'u diystyru
  • 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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.