Bootstrap

Pastoliai

„Bootstrap“ sukurtas ant jautraus 12 stulpelių tinklelio. Taip pat įtraukėme fiksuoto ir sklandaus pločio išdėstymus, pagrįstus ta sistema.

Visuotiniai CSS nustatymo iš naujo, tipografijos ir nuorodų stiliai

Reikia HTML5 doctype

„Bootstrap“ naudoja HTML elementus ir CSS ypatybes, kurioms reikia naudoti HTML5 dokumento tipą. Būtinai įtraukite jį į kiekvieno projekto „Bootstrapped“ puslapio pradžią.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tipografija ir nuorodos

Scaffolding.less faile nustatome pagrindinius visuotinius rodymo, tipografijos ir nuorodų stilius. Tiksliau, mes:

  • Nuimkite kraštą ant kūno
  • Nustatykite background-color: white;antbody
  • Naudokite atributus @baseFontFamily, @baseFontSize, ir @baseLineHeightkaip tipografinę bazę
  • Nustatykite visuotinės nuorodos spalvą @linkColorir pritaikykite tik nuorodos pabraukimus:hover

Iš naujo nustatykite per Normalize

Pradėjus naudoti „Bootstrap 2“, tradicinis CSS nustatymas iš naujo buvo pakeistas, kad būtų naudojami elementai iš Normalize.css , Nicolas Gallagher projekto, kuris taip pat maitina HTML5 Boilerplate .

Naują nustatymą iš naujo vis dar galima rasti reset.less , tačiau daugelis elementų buvo pašalinti dėl trumpumo ir tikslumo.

Numatytoji tinklelio sistema 12 stulpelių su reaguojančiu posūkiu

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Numatytoji tinklelio sistema, pateikiama kaip „Bootstrap“ dalis, yra 940 pikselių pločio, 12 stulpelių tinklelis .

Jame taip pat yra keturi jautrūs įvairių įrenginių ir skiriamųjų gebų variantai: telefonas, planšetinio kompiuterio portretas, planšetinio kompiuterio kraštovaizdis ir maži staliniai kompiuteriai bei dideli plačiaekraniai staliniai kompiuteriai.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Kaip parodyta čia, galima sukurti pagrindinį išdėstymą su dviem „stulpeliais“, kurių kiekvienas apima 12 pagrindinių stulpelių, kuriuos apibrėžėme kaip savo tinklelio sistemos dalį.


Stulpelių užskaitymas

4
4 poslinkis 4
3 poslinkis 3
3 poslinkis 3
8 poslinkis 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Įdėti stulpelius

Naudojant statinę (ne skystą) tinklelio sistemą „Bootstrap“, įdėti lizdus yra paprasta. Norėdami sudėti turinį, tiesiog pridėkite naują ir esamame stulpelyje .rowrinkinį stulpelių..span*.span*

Pavyzdys

Įdėtose eilutėse turėtų būti stulpelių rinkinys, kuris sudaro pirminio stulpelių skaičių. Pavyzdžiui, du įdėtieji .span3stulpeliai turėtų būti dedami į .span6.

1 stulpelio lygis
2 lygis
2 lygis 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     1 stulpelio lygis
  4.     <div class = "row" > 
  5.       <div class = "span6" > 2 lygis </div> 
  6.       <div class = "span6" > 2 lygis </div> 
  7.     </div>
  8.   </div>
  9. </div>

Skysčio tinklelio sistema 12 reaguojančių, procentais pagrįstų stulpelių

Skysčių kolonėlės

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Procentai, o ne pikseliai

Skysčiojo tinklelio sistemoje vietoj fiksuotų pikselių naudojami procentai stulpelių pločiui. Jis taip pat turi tokius pat jautrius variantus kaip ir mūsų fiksuoto tinklelio sistema, užtikrinanti tinkamas pagrindinių ekrano skiriamųjų gebų ir įrenginių proporcijas.

Skysčių eilutės

Paverskite bet kurią eilutę sklandžią tiesiog pakeisdami .rowį .row-fluid. Stulpeliai išlieka tokie patys, todėl labai paprasta perjungti fiksuotą ir sklandų išdėstymą.

Žymėjimas

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Skysčių lizdas

Įdėjimas naudojant sklandžius tinklelius yra šiek tiek kitoks: įdėtųjų stulpelių skaičius neturi atitikti pirminio. Vietoj to, jūsų stulpeliai kiekviename lygyje nustatomi iš naujo, nes kiekviena eilutė užima 100 % pirminio stulpelio.

Skystis 12
Skystis 6
Skystis 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     1 stulpelio lygis
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 2 lygis </div> 
  6.       <div class = "span6" > 2 lygis </div> 
  7.     </div>
  8.   </div>
  9. </div>

Tinklelio pritaikymas

Kintamasis Numatytoji reikšmė apibūdinimas
@gridColumns 12 Stulpelių skaičius
@gridColumnWidth 60 piks Kiekvieno stulpelio plotis
@gridGutterWidth 20 piks Neigiamas tarpas tarp stulpelių

Kintamieji LESS

„Bootstrap“ yra keletas kintamųjų, skirtų tinkinti numatytąją 940 pikselių tinklelio sistemą, aprašyta aukščiau. Visi tinklelio kintamieji saugomi kintamuosiuose.mažiau.

Kaip pritaikyti

Keičiant tinklelį reikia pakeisti tris @grid*kintamuosius ir iš naujo kompiliuoti „Bootstrap“. Pakeiskite tinklelio kintamuosius kintamieji.less ir naudokite vieną iš keturių dokumentuose nurodytų būdų perkompiliuoti . Jei pridedate daugiau stulpelių, būtinai pridėkite CSS tiems, kurie yra grid.less.

Išlikti reaguoti

Tinklelio tinkinimas veikia tik numatytuoju lygiu, 940 pikselių tinkleliu. Kad išlaikytumėte reaguojančius „Bootstrap“ aspektus, taip pat turėsite tinkinti tinklelius responsive.less.

Maketai Pagrindiniai šablonai tinklalapiams kurti

Fiksuotas išdėstymas

Numatytasis ir paprastas 940 pikselių pločio, centre išdėstytas išdėstymas beveik bet kuriai svetainei ar puslapiui, kurį teikia vienas <div class="container">.

  1. <kūnas>
  2.   <div class = "konteineris" > 
  3.     ...
  4.   </div>
  5. </body>

Skysčių išdėstymas

<div class="container-fluid">suteikia lanksčią puslapio struktūrą, minimalų ir didžiausią plotį bei kairiąją šoninę juostą. Tai puikiai tinka programoms ir dokumentams.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Šoninės juostos turinys-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Kūno turinys-->
  8.     </div>
  9.   </div>
  10. </div>

Reaktyvus dizainas Medijos užklausos įvairiems įrenginiams ir skyroms

Reaguojantys įrenginiai

Ką jie daro

Medijos užklausos leidžia tinkinti CSS, atsižvelgiant į daugybę sąlygų – santykį, plotį, rodymo tipą ir t. t., tačiau dažniausiai dėmesys sutelkiamas į min-widthir max-width.

  • Pakeiskite stulpelio plotį mūsų tinklelyje
  • Kur reikia, sudėkite elementus, o ne plūduriuokite
  • Pakeiskite antraščių ir teksto dydį, kad jie labiau tiktų įrenginiams

Naudokite žiniasklaidos užklausas atsakingai ir tik kaip savo mobiliųjų auditorijų pradžią. Didesniuose projektuose apsvarstykite specialias kodų bazes, o ne medijos užklausų sluoksnius.

Palaikomi įrenginiai

„Bootstrap“ palaiko keletą medijos užklausų viename faile, kad jūsų projektai būtų tinkamesni skirtinguose įrenginiuose ir ekrano skyra. Štai kas įtraukta:

Etiketė Išdėstymo plotis Stulpelio plotis Latakų plotis
Išmanieji telefonai 480 pikselių ir mažiau Skysčių kolonėlės, nėra fiksuoto pločio
Išmaniųjų telefonų į planšetinį kompiuterį 767px ir mažiau Skysčių kolonėlės, nėra fiksuoto pločio
Portretinės tabletės 768px ir daugiau 42 piks 20 piks
Numatytas 980 taškų ir daugiau 60 piks 20 piks
Didelis ekranas 1200 taškų ir daugiau 70 piks 30 piks

Reikalinga metažyma

Norėdami užtikrinti, kad įrenginiai tinkamai rodytų interaktyvius puslapius, įtraukite peržiūros srities metažymą.

  1. <meta name = "viewport" content = "width=device-width, original-scale = 1.0" >

Naudojant žiniasklaidos užklausas

„Bootstrap“ automatiškai neįtraukia šių medijos užklausų, tačiau jas suprasti ir pridėti yra labai paprasta ir reikia minimalios sąrankos. Turite keletą parinkčių, kaip įtraukti reaguojančias „Bootstrap“ funkcijas:

  1. Naudokite sukompiliuotą interaktyvią versiją bootstrap-responsive.css
  2. Pridėkite @import „responsive.less“ ir iš naujo sukompiliuokite „Bootstrap“.
  3. Modifikuokite ir perkompiliuokite responsive.less kaip atskirą failą

Kodėl jo tiesiog neįtraukus? Tiesą pasakius, ne į viską reikia reaguoti. Užuot skatinę kūrėjus pašalinti šią funkciją, manome, kad geriausia ją įjungti.

  1.   // Kraštovaizdžio telefonai ir žemyn
  2.   @media ( maksimalus plotis : 480 piks . ) { ... }     
  3.  
  4.   // Iš telefono kraštovaizdžio į stačią planšetinį kompiuterį
  5.   @media ( maksimalus plotis : 767px ) { ... } _     
  6.  
  7.   // Stačias planšetinis kompiuteris į gulsčią ir darbalaukį
  8.   @media ( min . plotis : 768 pikseliai ) ir ( maksimalus plotis : 979 pikseliai ) { ... }        
  9.  
  10.   // Didelis darbalaukis
  11.   @media ( min . plotis : 1200 piks . ) { ... }

Atsakingos komunalinių paslaugų klasės

Kas jie tokie

Jei norite greičiau kurti, pritaikytą mobiliesiems, naudokite šias pagrindines paslaugų klases turiniui pagal įrenginį rodyti ir slėpti.

Kada naudoti

Naudokite ribotai ir nekurkite visiškai skirtingų tos pačios svetainės versijų. Vietoj to naudokite juos, kad papildytumėte kiekvieno įrenginio pristatymą.

Pavyzdžiui, galite rodyti <select>navigacijos elementą mobiliuosiuose maketuose, bet ne planšetiniuose ar staliniuose kompiuteriuose.

Palaikymo klasės

Čia parodyta mūsų palaikomų klasių lentelė ir jų poveikis tam tikram medijos užklausos išdėstymui (pažymėtas pagal įrenginį). Juos galima rasti responsive.less.

Klasė Telefonai480 pikselių ir mažiau Tabletės767px ir mažiau Staliniai kompiuteriai768px ir daugiau
.visible-phone Matomas
.visible-tablet Matomas
.visible-desktop Matomas
.hidden-phone Matomas Matomas
.hidden-tablet Matomas Matomas
.hidden-desktop Matomas Matomas

Bandomasis atvejis

Pakeiskite naršyklės dydį arba įkelkite į skirtingus įrenginius, kad patikrintumėte aukščiau nurodytas klases.

Matoma...

Žalios varnelės rodo, kad klasė matoma dabartinėje peržiūros srityje.

  • Telefonas✔ Telefonas
  • Tablėtė✔ Planšetė
  • Darbalaukis✔ Darbalaukis

Paslėpta ant...

Čia žalios varnelės rodo, kad klasė paslėpta dabartinėje peržiūros srityje.

  • Telefonas✔ Telefonas
  • Tablėtė✔ Planšetė
  • Darbalaukis✔ Darbalaukis