Dechrau arni

Trosolwg o'r prosiect, ei gynnwys, a sut i ddechrau gyda thempled syml.

Pennau i fyny! Mae'r dogfennau hyn ar gyfer v2.3.2, nad yw bellach yn cael ei gefnogi'n swyddogol. Edrychwch ar y fersiwn diweddaraf o Bootstrap!

Cyn ei lawrlwytho, gwnewch yn siŵr bod gennych olygydd cod (rydym yn argymell Sublime Text 2 ) a rhywfaint o wybodaeth ymarferol o HTML a CSS. Ni fyddwn yn cerdded trwy'r ffeiliau ffynhonnell yma, ond maent ar gael i'w lawrlwytho. Byddwn yn canolbwyntio ar ddechrau gyda'r ffeiliau Bootstrap a luniwyd.

Lawrlwytho wedi'i lunio

Y ffordd gyflymaf i gychwyn arni: gwnewch y fersiynau cryno a manwl o'n CSS, JS, a delweddau. Dim dogfennau na ffeiliau ffynhonnell wreiddiol.

Lawrlwythwch Bootstrap

Ffynhonnell lawrlwytho

Sicrhewch y ffeiliau gwreiddiol ar gyfer pob CSS a JavaScript, ynghyd â chopi lleol o'r dogfennau trwy lawrlwytho'r fersiwn ddiweddaraf yn uniongyrchol o GitHub.

Lawrlwythwch ffynhonnell Bootstrap

O fewn y lawrlwythiad fe welwch y strwythur ffeil a'r cynnwys canlynol, gan grwpio asedau cyffredin yn rhesymegol a darparu amrywiadau wedi'u crynhoi a'u minimeiddio.

Ar ôl ei lawrlwytho, dadsipio'r ffolder cywasgedig i weld strwythur (y llun) Bootstrap. Fe welwch rywbeth fel hyn:

strap boot /   ├── css / ├── bootstrap . css
   ├── bootstrap . min . css
   ├── js / ├── bootstrap . js
   ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - gwyn . png
  
        
        
      

Dyma'r ffurf fwyaf sylfaenol o Bootstrap: ffeiliau wedi'u llunio i'w defnyddio'n gyflym mewn unrhyw brosiect gwe bron. Rydym yn darparu CSS a JS ( bootstrap.*) , yn ogystal â CSS a JS ( bootstrap.min.*). Mae'r ffeiliau delwedd yn cael eu cywasgu gan ddefnyddio ImageOptim , ap Mac ar gyfer cywasgu PNGs.

Sylwch fod angen cynnwys jQuery ar bob ategyn JavaScript.

Mae gan Bootstrap HTML, CSS, a JS ar gyfer pob math o bethau, ond gellir eu crynhoi gyda llond llaw o gategorïau i'w gweld ar frig dogfennaeth Bootstrap .

Adrannau Docs

Sgaffaldiau

Arddulliau byd-eang i'r corff ailosod math a chefndir, arddulliau cyswllt, system grid, a dau gynllun syml.

CSS sylfaenol

Arddulliau ar gyfer elfennau HTML cyffredin fel teipograffeg, cod, tablau, ffurflenni a botymau. Mae hefyd yn cynnwys Glyphicons , set eicon fach wych.

Cydrannau

Arddulliau sylfaenol ar gyfer cydrannau rhyngwyneb cyffredin fel tabiau a tabledi, bar llywio, rhybuddion, penawdau tudalennau, a mwy.

Ategion JavaScript

Yn debyg i Gydrannau, mae'r ategion JavaScript hyn yn gydrannau rhyngweithiol ar gyfer pethau fel awgrymiadau offer, popovers, moddau, a mwy.

Rhestr o gydrannau

Gyda'i gilydd, mae'r adrannau Cydrannau ac ategion JavaScript yn darparu'r elfennau rhyngwyneb canlynol:

  • Grwpiau botwm
  • Cwympiadau botwm
  • Tabiau llywio, pils, a rhestrau
  • Navbar
  • Labelau
  • Bathodynnau
  • Penawdau tudalennau ac uned arwyr
  • Mân-luniau
  • Rhybuddion
  • Bariau cynnydd
  • moddau
  • Cwympiadau
  • Cynghorion offer
  • Popovers
  • Acordion
  • Carwsél
  • Teipiwch ymlaen

Mewn canllawiau yn y dyfodol, efallai y byddwn yn cerdded trwy'r cydrannau hyn yn unigol yn fwy manwl. Tan hynny, edrychwch am bob un o'r rhain yn y ddogfennaeth am wybodaeth ar sut i'w defnyddio a'u haddasu.

Gyda chyflwyniad byr i'r cynnwys allan o'r ffordd, gallwn ganolbwyntio ar roi Bootstrap i'w ddefnyddio. I wneud hynny, byddwn yn defnyddio templed HTML sylfaenol sy'n cynnwys popeth a grybwyllwyd gennym yn strwythur Ffeil .

Nawr, dyma gip ar ffeil HTML nodweddiadol :

  1. <!DOCTYPE html>
  2. <html>
  3. <pen>
  4. <title> Templed Bootstrap 101 </title>
  5. <meta name = "viewport" content = "lled=lled-dyfais, cychwynnol-graddfa=1.0" >
  6. </pen>
  7. <corff>
  8. <h1> Helo, fyd! </h1>
  9. <script src = "https://code.jquery.com/jquery.js" ></script>
  10. </corff>
  11. </html>

I wneud hwn yn dempled Bootstrapped , cynhwyswch y ffeiliau CSS a JS priodol yn unig:

  1. <!DOCTYPE html>
  2. <html>
  3. <pen>
  4. <title> Templed Bootstrap 101 </title>
  5. <meta name = "viewport" content = "lled=lled-dyfais, cychwynnol-graddfa=1.0" >
  6. <!-- Bootstrap -->
  7. <link href = " css/bootstrap.min.css" rel = "ddalen arddull" media = "sgrin" >
  8. </pen>
  9. <corff>
  10. <h1> Helo, fyd! </h1>
  11. <script src = "https://code.jquery.com/jquery.js" ></script>
  12. <script src = "js/bootstrap.min.js" ></script>
  13. </corff>
  14. </html>

Ac rydych chi wedi setio! Gyda'r ddwy ffeil hynny wedi'u hychwanegu, gallwch chi ddechrau datblygu unrhyw wefan neu raglen gyda Bootstrap.

Symudwch y tu hwnt i'r templed sylfaen gydag ychydig o gynlluniau enghreifftiol. Rydym yn annog pobl i ailadrodd yr enghreifftiau hyn ac nid yn unig yn eu defnyddio fel canlyniad terfynol.

  • Templed cychwynnol

    Dogfen HTML esgyrnnoeth gyda'r holl Bootstrap CSS a JavaScript wedi'i chynnwys.

  • Safle marchnata sylfaenol

    Yn cynnwys uned arwr ar gyfer neges gynradd a thair elfen ategol.

  • Gosodiad hylif

    Yn defnyddio ein system grid hylif ymatebol newydd i greu cynllun hylif di-dor.

  • Marchnata cul

    Templed marchnata main, ysgafn ar gyfer prosiectau neu dimau bach.

  • Nav cyfiawn

    Tudalen farchnata gyda dolenni llywio lled cyfartal mewn bar llywio wedi'i addasu.

  • Mewngofnodi

    Mae Barebones yn arwyddo ffurf gyda rheolyddion ffurf mwy o faint wedi'u teilwra a chynllun hyblyg.

  • Troedyn gludiog

    Piniwch droedyn uchder sefydlog i waelod porth gwylio'r defnyddiwr.

  • jumbotron carwsél

    riff mwy rhyngweithiol ar y safle marchnata sylfaenol yn cynnwys carwsél amlwg.

Ewch i'r dogfennau am wybodaeth, enghreifftiau, a phytiau cod, neu cymerwch y naid nesaf ac addaswch Bootstrap ar gyfer unrhyw brosiect sydd ar ddod.

Ewch i'r dogfennau Bootstrap Addasu Bootstrap