Yleiskatsaus projektista, sen sisällöstä ja yksinkertaisen mallin käytön aloittamisesta.
Ennen kuin lataat, varmista, että sinulla on koodieditori (suosittelemme Sublime Text 2 ) ja jonkin verran HTML- ja CSS-taitoja. Emme käy tässä läpi lähdetiedostoja, mutta ne ovat ladattavissa. Keskitymme käännettyjen Bootstrap-tiedostojemme aloittamiseen.
Nopein tapa aloittaa: hanki käännetyt ja pienennetyt versiot CSS:stä, JS:stä ja kuvista. Ei asiakirjoja tai alkuperäisiä lähdetiedostoja.
Hanki alkuperäiset tiedostot kaikille CSS- ja Javasript-tiedostoille sekä paikallinen kopio asiakirjoista lataamalla uusin versio suoraan GitHubista.
Latauksesta löydät seuraavan tiedostorakenteen ja sisällön, jotka ryhmittelevät loogisesti yhteiset resurssit ja tarjoavat sekä käännettyjä että minimoituja muunnelmia.
Kun olet ladannut, pura pakattu kansio nähdäksesi (käännetyn) Bootstrapin rakenteen. Näet jotain tällaista:
bootstrap / ├── css / │ ├── bootstrap . css │ ├── bootstrap . min . css ├── js / │ ├── bootstrap . js │ ├── bootstrap . min . js ├── img / │ ├── glyfikonit - puoliskoiset . png │ ├── glyfikonit - puoliskoiset - valkoinen . png └── README . md
Tämä on Bootstrapin yksinkertaisin muoto: käännetyt tiedostot nopeaa käyttöönottoa varten lähes kaikissa verkkoprojekteissa. Tarjoamme käännettyä CSS:ää ja JS:ää ( bootstrap.*
) sekä käännettyä ja minimoitua CSS:ää ja JS:ää ( bootstrap.min.*
). Kuvatiedostot pakataan ImageOptimilla , Mac-sovelluksella PNG-tiedostojen pakkaamiseen.
Bootstrap on varustettu HTML:llä, CSS:llä ja JS:llä kaikenlaisia asioita varten, mutta ne voidaan tiivistää kouralliseen luokkiin, jotka näkyvät Bootstrap-dokumentaation yläosassa .
Yleiset tyylit rungon tyypin ja taustan nollaamiseen, linkityylit, ruudukkojärjestelmä ja kaksi yksinkertaista asettelua.
Tyylit yleisille HTML-elementeille, kuten typografia, koodi, taulukot, lomakkeet ja painikkeet. Sisältää myös Glyphiconit , hienon pienen kuvakesarjan.
Perustyylejä yleisille käyttöliittymäkomponenteille, kuten välilehdille ja pillereille, navigointipalkkiin, hälytyksille, sivujen otsikoille ja muille.
Samoin kuin komponentit, nämä Javascript-laajennukset ovat interaktiivisia komponentteja esimerkiksi työkaluvihjeille, ponnahdusikkunille, modaaleille ja muille.
Yhdessä Komponentit- ja Javascript-laajennukset -osat tarjoavat seuraavat käyttöliittymäelementit:
Tulevissa oppaissa saatamme käydä näitä komponentteja yksitellen läpi yksityiskohtaisemmin. Siihen asti etsi jokaista näistä asiakirjoista saadaksesi tietoja niiden hyödyntämisestä ja mukauttamisesta.
Lyhyen johdannon sisältöön voimme keskittyä Bootstrapin käyttöön. Tätä varten käytämme HTML-perusmallia, joka sisältää kaiken, mitä mainitsimme tiedostorakenteessa .
Tässä on katsaus tyypilliseen HTML-tiedostoon :
- <html>
- <pää>
- <title> Bootstrap 101 -malli </title>
- </head>
- <body>
- <h1> Hei maailma! </h1>
- </body>
- </html>
Jos haluat tehdä tästä Bootstrapped-mallin , lisää vain sopivat CSS- ja JS-tiedostot:
- <html>
- <pää>
- <title> Bootstrap 101 -malli </title>
- <!-- Bootstrap -->
- <link href = "css/bootstrap.min.css" rel = "tyylitaulukko" >
- </head>
- <body>
- <h1> Hei maailma! </h1>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
Ja olet valmis! Kun nämä kaksi tiedostoa on lisätty, voit aloittaa minkä tahansa sivuston tai sovelluksen kehittämisen Bootstrapin avulla.
Siirry perusmallin ulkopuolelle muutamalla esimerkkiasettelulla. Kannustamme ihmisiä toistamaan näitä esimerkkejä eikä vain käyttämään niitä lopputuloksena.
Sisältää sankariyksikön ensisijaiselle viestille ja kolme tukielementtiä.
Käyttää uutta reagoivaa, nestemäistä ruudukkojärjestelmäämme saumattoman nesteasetelman luomiseen.
Barebone-HTML-dokumentti, joka sisältää kaikki Bootstrap CSS:n ja javascriptin.
Siirry asiakirjoihin saadaksesi tietoja, esimerkkejä ja koodinpätkiä, tai ota seuraava harppaus ja mukauta Bootstrap mitä tahansa tulevaa projektia varten.
Käy Bootstrap-dokumenteissa Mukauta Bootstrap