Pārskats par projektu, tā saturu un to, kā sākt ar vienkāršu veidni.
Pirms lejupielādes pārliecinieties, ka jums ir koda redaktors (ieteicam Sublime Text 2 ) un dažas darba zināšanas par HTML un CSS. Mēs šeit neapskatīsim avota failus, taču tie ir pieejami lejupielādei. Mēs pievērsīsimies tam, lai sāktu darbu ar mūsu apkopotajiem Bootstrap failiem.
Ātrākais veids, kā sākt: iegūstiet mūsu CSS, JS un attēlu apkopotās un samazinātās versijas. Nav dokumentu vai oriģinālo avota failu.
Iegūstiet visu CSS un Javasript oriģinālos failus, kā arī vietējo dokumentu kopiju, lejupielādējot jaunāko versiju tieši no GitHub.
Lejupielādē jūs atradīsiet šādu faila struktūru un saturu, kas loģiski grupē kopējos līdzekļus un nodrošina gan kompilētus, gan samazinātus variantus.
Pēc lejupielādes izpakojiet saspiesto mapi, lai redzētu (kompilētās) Bootstrap struktūru. Jūs redzēsit kaut ko līdzīgu:
bootstrap / ├── css / │ ├── bootstrap . css │ ├── bootstrap . min . css ├── js / │ ├── bootstrap . js │ ├── bootstrap . min . js ├── img / │ ├── glyphicons - puslings . png │ ├── glifikoni - pusmēneši - balts . png └── README . md
Šī ir visvienkāršākā Bootstrap forma: apkopoti faili ātrai lietošanai gandrīz jebkurā tīmekļa projektā. Mēs piedāvājam kompilētu CSS un JS ( bootstrap.*
), kā arī apkopotu un samazinātu CSS un JS ( bootstrap.min.*
). Attēlu faili tiek saspiesti, izmantojot ImageOptim — Mac lietotni PNG saspiešanai.
Globālie stili pamattekstam, lai atiestatītu veidu un fonu, saišu stili, režģa sistēma un divi vienkārši izkārtojumi.
Stili izplatītiem HTML elementiem, piemēram, tipogrāfijai, kodam, tabulām, veidlapām un pogām. Ietver arī Glyphicons — lielisku mazo ikonu komplektu.
Pamatstili tādiem izplatītiem saskarnes komponentiem kā cilnes un tabletes, navigācijas josla, brīdinājumi, lapu galvenes un citi.
Līdzīgi kā komponenti, šie Javascript spraudņi ir interaktīvi komponenti tādām lietām kā rīka padomi, uznirstošie elementi, modāli un citi.
Sadaļas Komponenti un Javascript spraudņi kopā nodrošina šādus interfeisa elementus:
Nākamajos ceļvežos mēs varam detalizētāk aplūkot šos komponentus atsevišķi. Līdz tam meklējiet katru no tiem dokumentācijā, lai iegūtu informāciju par to izmantošanu un pielāgošanu.
Īsi ievadot saturu, mēs varam koncentrēties uz Bootstrap izmantošanu. Lai to izdarītu, mēs izmantosim pamata HTML veidni, kas ietver visu, ko minējām faila struktūrā .
Tagad apskatiet tipisku HTML failu :
- <html>
- <galva>
- <title> Bootstrap 101 veidne </title>
- </head>
- <body>
- <h1> Sveika, pasaule! </h1>
- </body>
- </html>
Lai padarītu to par Bootstrapped veidni , vienkārši iekļaujiet atbilstošos CSS un JS failus:
- <html>
- <galva>
- <title> Bootstrap 101 veidne </title>
- <!-- Bootstrap -->
- <link href = "css/bootstrap.min.css" rel = "stila lapa" >
- </head>
- <body>
- <h1> Sveika, pasaule! </h1>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
Un esat gatavs! Pievienojot šos divus failus, varat sākt izstrādāt jebkuru vietni vai lietojumprogrammu, izmantojot Bootstrap.
Pārejiet tālāk par pamata veidni, izmantojot dažus izkārtojumu piemērus. Mēs mudinām cilvēkus atkārtot šos piemērus, nevis vienkārši izmantot tos kā gala rezultātu.
Dodieties uz dokumentiem, lai iegūtu informāciju, piemērus un koda fragmentus, vai veiciet nākamo soli un pielāgojiet Bootstrap jebkuram gaidāmajam projektam.
Apmeklējiet Bootstrap dokumentus Pielāgojiet Bootstrap