Dechreuwch gyda Bootstrap

Mae Bootstrap yn becyn cymorth blaen blaen pwerus, llawn nodweddion. Adeiladwch unrhyw beth - o'r prototeip i'r cynhyrchiad - mewn munudau.

Ar y dudalen hon

Cychwyn cyflym

Dechreuwch trwy gynnwys CSS a JavaScript parod Bootstrap trwy CDN heb fod angen unrhyw gamau adeiladu. Ei weld yn ymarferol gyda'r demo Bootstrap CodePen hwn .

Creu index.htmlffeil newydd yng ngwraidd eich prosiect. Cynhwyswch y <meta name="viewport">tag hefyd ar gyfer ymddygiad ymatebol priodol mewn dyfeisiau symudol.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Cynhwyswch CSS a JS Bootstrap. Rhowch y <link>tag yn y <head>ar gyfer ein CSS, a'r <script>tag ar gyfer ein bwndel JavaScript (gan gynnwys Popper ar gyfer lleoli cwymplenni, popwyr a chynghorion offer) cyn y cau </body>. Dysgwch fwy am ein cysylltiadau CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Gallwch hefyd gynnwys Popper a'n JS ar wahân. Os nad ydych chi'n bwriadu defnyddio cwymplenni, popovers, neu awgrymiadau offer, arbedwch rai kilobytes trwy beidio â chynnwys Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Helo Byd! Agorwch y dudalen yn eich porwr o ddewis i weld eich tudalen Bootstrapped. Nawr gallwch chi ddechrau adeiladu gyda Bootstrap trwy greu eich cynllun eich hun , ychwanegu dwsinau o gydrannau , a defnyddio ein henghreifftiau swyddogol .

Cysylltiadau CDN

Fel cyfeiriad, dyma ein prif ddolenni CDN.

Disgrifiad	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Gallwch hefyd ddefnyddio'r CDN i nôl unrhyw rai o'n hadeiladau ychwanegol a restrir yn y dudalen Cynnwys .

Camau nesaf

Darllenwch ychydig mwy am rai gosodiadau amgylchedd byd-eang pwysig y mae Bootstrap yn eu defnyddio.
Darllenwch am yr hyn sydd wedi'i gynnwys yn Bootstrap yn ein hadran gynnwys a'r rhestr o gydrannau sydd angen JavaScript isod.
Angen ychydig mwy o bŵer? Ystyriwch adeiladu gyda Bootstrap trwy gynnwys y ffeiliau ffynhonnell trwy'r rheolwr pecyn .
Edrych i ddefnyddio Bootstrap fel modiwl gyda <script type="module">? Cyfeiriwch at ein hadran defnyddio Bootstrap fel modiwl .

Cydrannau JS

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 ehangu ein ategion Collapse ac Offcanvas i weithredu ymddygiadau ymatebol
Navs gyda'r ategyn Tab ar gyfer toglo cwareli cynnwys
Offcanvases ar gyfer arddangos, lleoli, ac ymddygiad sgrolio
Scrollspy ar gyfer ymddygiad sgrolio a diweddariadau llywio
Tostau i'w harddangos a'u diystyru
Awgrymiadau offer a popovers ar gyfer arddangos a lleoli (mae angen Popper hefyd )

Byd-eang pwysig

Mae Bootstrap yn defnyddio llond llaw o arddulliau a gosodiadau byd-eang pwysig, ac mae pob un ohonynt bron yn gyfan gwbl wedi'u hanelu at normaleiddio arddulliau trawsborwr. Gadewch i ni blymio i mewn.

Docteip HTML5

Mae Bootstrap yn gofyn am ddefnyddio'r doctype HTML5. Hebddo, fe welwch rai steilio ffynci ac anghyflawn.

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

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

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

Cadwch 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 .
Gofynnwch ac archwiliwch ein Trafodaethau GitHub .
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.