Įvadas
Pradėkite nuo „Bootstrap“ – populiariausios pasaulyje sistemos, skirtos kurti interaktyvias svetaines, pirmiausia mobiliesiems, su „jsDelivr“ ir šablono pradžios puslapiu.
Norite greitai pridėti „Bootstrap“ prie savo projekto? Naudokite jsDelivr, kurį nemokamai teikia jsDelivr žmonės. Naudojate paketų tvarkyklę ar reikia atsisiųsti šaltinio failus? Eikite į atsisiuntimų puslapį.
Nukopijuokite ir įklijuokite stiliaus lapą <link>
į savo <head>
prieš visus kitus stilių lapus, kad įkeltumėte CSS.
Kad veiktų daugelis mūsų komponentų, reikia naudoti JavaScript. Tiksliau, jiems reikia jQuery , Popper.js ir mūsų pačių JavaScript papildinių. Įdėkite šiuos <script>
s netoli savo puslapių pabaigos, prieš pat baigiamąją </body>
žymą, kad juos įgalintumėte. Pirmiausia turi būti „jQuery“, tada „Popper.js“, o tada „JavaScript“ papildiniai.
Naudojame ploną jQuery versiją, tačiau palaikoma ir visa versija.
Įdomu, kuriems komponentams aiškiai reikia „jQuery“, mūsų JS ir Popper.js? Spustelėkite toliau pateiktą nuorodą Rodyti komponentus. Jei visai nesate tikri dėl bendros puslapio struktūros, toliau skaitykite puslapio šablono pavyzdį.
Mūsų bootstrap.bundle.js
ir bootstrap.bundle.min.js
apima Popper , bet ne jQuery . Norėdami gauti daugiau informacijos apie tai, kas įtraukta į „Bootstrap“, žr. mūsų turinio skyrių.
Rodyti komponentus, kuriems reikalingas „JavaScript“.
- Įspėjimai dėl atleidimo
- Mygtukai, skirti perjungti būsenas ir žymimąjį laukelį / radijo funkciją
- Karuselė, skirta visoms skaidrėms, valdikliams ir indikatoriams
- Sutraukti, kad perjungtumėte turinio matomumą
- Išskleidžiamieji meniu rodymui ir padėties nustatymui (taip pat reikalingas Popper.js )
- Rodymo, padėties nustatymo ir slinkimo režimai
- Naršymo juosta, skirta išplėsti sutraukimo papildinį, kad būtų įdiegtas reaguojantis elgesys
- Patarimai ir iššokantys langai, skirti rodyti ir nustatyti (taip pat reikia Popper.js )
- Scrollspy slinkimo elgsenai ir naršymo naujinimams
Būtinai nustatykite savo puslapius pagal naujausius dizaino ir kūrimo standartus. Tai reiškia, kad reikia naudoti HTML5 dokumento tipą ir įtraukti peržiūros srities metažymą, kad būtų tinkamai reaguojama. Sudėkite viską ir jūsų puslapiai turėtų atrodyti taip:
Tai viskas, ko jums reikia bendriems puslapio reikalavimams. Apsilankykite maketavimo dokumentuose arba oficialiuose pavyzdžiuose , kad pradėtumėte dėlioti savo svetainės turinį ir komponentus.
„Bootstrap“ naudoja keletą svarbių pasaulinių stilių ir nustatymų, kuriuos turėsite žinoti naudodami jį. Visi jie yra beveik išimtinai skirti kelių naršyklių stilių normalizavimui . Pasinerkime.
„Bootstrap“ reikalauja naudoti HTML5 dokumento tipą. Be jo pamatysite keistą nebaigtą stilių, tačiau įtraukus jį neturėtų kilti didelių kliūčių.
„Bootstrap“ pirmiausia sukurta mobiliesiems , tai strategija, pagal kurią pirmiausia optimizuojame kodą mobiliesiems įrenginiams, o tada prireikus padidiname komponentus naudodami CSS medijos užklausas. Norėdami užtikrinti tinkamą visų įrenginių atvaizdavimą ir mastelio keitimą liečiant, pridėkite interaktyvią peržiūros srities metažymą prie savo <head>
.
Pavyzdį, kaip tai veikia, galite pamatyti starterio šablone .
Kad būtų paprasčiau nustatyti dydį CSS, pakeičiame visuotinę box-sizing
reikšmę iš content-box
į border-box
. Tai užtikrina padding
, kad tai neturės įtakos galutiniam apskaičiuotam elemento pločiui, bet gali sukelti problemų su kai kurios trečiosios šalies programine įranga, pvz., „Google“ žemėlapiais ir „Google“ tinkintos paieškos programa.
Retais atvejais reikia nepaisyti, naudokite kažką panašaus į šiuos:
Naudojant aukščiau pateiktą fragmentą, įdėtieji elementai, įskaitant sugeneruotą turinį per ::before
ir, ::after
paveldės tam nurodytus box-sizing
elementus .selector-for-some-widget
.
Sužinokite daugiau apie dėžutės modelį ir dydį apsilankę CSS Tricks .
Siekdami patobulinti kelių naršyklių atvaizdavimą, naudojame perkrovimą , kad ištaisytume naršyklių ir įrenginių neatitikimus, o įprastų HTML elementų atstatymas būtų šiek tiek labiau pagrįstas.
Gaukite naujausią informaciją apie „Bootstrap“ kūrimą ir susisiekite su bendruomene naudodami šiuos naudingus išteklius.
- Stebėkite @getbootstrap „Twitter“ .
- Skaitykite ir užsiprenumeruokite oficialų „Bootstrap“ tinklaraštį .
- Kalbėkitės su kolegomis Bootstrappers IRC. Serveryje
irc.freenode.net
,##bootstrap
kanale. - Diegimo pagalbos galite rasti Stack Overflow (pažymėta
bootstrap-4
). - Kūrėjai turėtų naudoti raktinį žodį
bootstrap
paketuose, kurie modifikuoja arba papildo „Bootstrap“ funkcijas platindami per npm ar panašius pristatymo mechanizmus, kad būtų galima maksimaliai aptikti.
Taip pat galite sekti @getbootstrap „Twitter “, kad gautumėte naujausių paskalų ir nuostabių muzikinių vaizdo įrašų.