Sveiki, mieli tinklaraščio svetainės skaitytojai. Pirmoje straipsnio dalyje apie susipažinome su šio karkaso galimybėmis, sužinojome, kas yra responsive dizainas ir kodėl jis toks svarbus mūsų sparčiai augančio įvairių mobiliųjų programėlių populiarumo eroje. Ten taip pat išsamiai apsvarstėme „Bootstrap“ prijungimo prie HTML puslapio (stilių failų, scenarijų ir „jQuery“ bibliotekos prijungimo) problemas.
Šios dienos straipsnis yra apie „Bootstrap 3“ naudojamą tinklelio sistemą. Sužinosite, kokius tinklelio dydžius galima pritaikyti, kaip jie elgsis įrenginiuose su skirtingų dydžių ekranais ir kaip patiems kurti eilutes ir langelius pagal vieną ar daugiau tinklelių. Visa tai bus paaiškinta pavyzdžiais, kurie, tikiuosi, pagerins suvokimą.
Kaip tinklelio sistema veikia „Bootstrap 3“.
„Bootstrap 3“ pateikiamas kartu dvylikos stulpelių tinklelio sistema, kuris daugiausia skirtas mobiliesiems įrenginiams. Tie. jis sukurtas pirmiausia žiūrint į mažus ekranus, antra – į plačiuosius ekranus. Naujoji šios sistemos versija turi keturis tinklelio dydžius. Visą šią informaciją galite išsamiai ištirti oficialioje svetainėje GetBootstrap.com, viršutiniame meniu eidami į skirtuką „CSS“ ir dešiniajame pasirinkę elementą „Grid system“.
Ten gausite išsamų sistemos veikimo paaiškinimą, susijusias žiniasklaidos užklausas ir pan. Html elementų eilutę (pavyzdžiui, straipsnių skelbimus pagrindiniame puslapyje), kurią norite išdėstyti tinklelyje, turės supti konteineris (pavyzdžiui, įtrauktas į Div žymas) ir priskirti klasę .row. prie jo (šiuo atveju pradinė žyma atrodys taip
Na, o elementus eilutės viduje galite paskirstyti vienu ar kelių tipų tinkleliais, nustatydami klasės atributą su reikšme, pavyzdžiui, .col-xs-number (šiuo atveju naudojamas tik itin mažas tinklelis ).
Pavyzdžiui, jei norite gauti tris vienodo dydžio stulpelius, turite padalyti 12 (tinklelio dydis Bootstrap 3) iš 3 (reikiamas stulpelių skaičius). Tai reiškia, kad kiekvienam eilutės viduje esančiam HTML elementui (vėlgi tai gali būti Div konteineriai) turėsite užregistruoti tas pačias klases -
Šiek tiek žemiau skiltyje „Tinklelio parinktys“ rasite aukščiau paminėtų dalykų paaiškinimą keturių akių dydžių modernus bootstrap.
- Pirmiausia pateikiamas labai mažas tinklelis (stulpelyje „Ypač maži įrenginiai“), skirtas mobiliesiems įrenginiams, kurių ekrano dydis yra mažesnis nei 768 pikseliai (skaitykite nuorodą toliau). Jis visada bus horizontalus bet kokio dydžio ekrane, o kas tai yra, pabandysiu paaiškinti toliau. Atminkite, kad šio tinklelio tipo klasės priešdėlis bus tiesiog col-xs, kaip aukščiau pateiktame pavyzdyje.
- Jei įrenginio ekrano dydis svyruoja tarp 768 ir 992 pikselių (dabar dažniausiai tai būna planšetės), tai jiems tinka Bootstrap tinklelis, skirtas mažiems įrenginiams. Jis vadinamas mažu, o jai nurodyti naudojami klasės priešdėliai. pulk-sm.
- Įrenginiams, kurių ekrano dydis didesnis nei 992, bet mažesnis nei 1200 (dažniausiai stalinių ar nešiojamųjų kompiuterių monitoriai), yra tinklelis, skirtas vidutiniams įrenginiams. Jis vadinamas vidutiniu ir turi klasės priešdėlį col-md.
- Na, o monitoriams, kurių plotis didesnis nei 1200 pikselių, yra didžiausias tinklelis su klasės priešdėliu kol-lg.
Paskutiniai trys tinkleliai bus horizontalūs tik tuo atveju, jei ekrano dydis yra didesnis nei taškas, kuriame įvyksta žlugimas. Pavyzdžiui, dideliame tinklelyje mažesniuose nei 1200 pikselių ekranuose jis nebebus horizontalus ir taps vertikalus. Oficialios svetainės GetBootstrap.com puslapyje, kurį šiuo metu peržiūrime, yra pavyzdžių ir paaiškinimų apie tai. Tačiau, mano nuomone, viskas yra šiek tiek painu ir sudėtinga.
Bootstrap 3 tinklelio sistemos pavyzdys skirtingiems ekrano pločiams
Pabandysiu visa tai paaiškinti paruoštu pavyzdžiu. Jums tereikia nukopijuoti failą setka.html(norėdami tai padaryti, kontekstiniame meniu pasirinkite elementą „Išsaugoti naudojant nuorodą kaip ...“). Jei tiesiogiai atidarysite šį failą naršyklėje (paspaudę nurodytą nuorodą kairiuoju pelės mygtuku), tada niekas neveiks, nes Bootstrap karkasas neprisijungs.
Įdėkite atsisiųstą setka.html failą į Bootstrap aplanką, apie kurį kalbėjome . Jis turėtų būti tokio paties lygio kaip anksčiau sukurtas failas index.html.
Dabar atidarykite šį setka.html failą bet kurioje pasirinktoje naršyklėje ir eksperimentuokite su naršyklės lango dydžiu, kad pamatytumėte „Bootstrap 3“ veikimą ir suprastumėte, kaip veikia tinklelio sistema. Kurie? Dabar paaiškinsiu.
Mano monitoriaus ekrano skiriamoji geba yra 1280 pikselių pločio, o tai yra daugiau nei 1200 pikselių lūžio taškas, nustatytas dideliam tinkleliui. Ką matome kaip rezultatą? Kažkas panašaus į šį paveikslėlį:
Pateikiame penkis svetainių išdėstymo pavyzdžius, sukurtus naudojant skirtingų tipų tinklelius:
- Pirmoji eilutė aprašyta naudojant visas keturias šiuo metu „Bootstrap“ prieinamas tinklelio sistemas. Priklausomai nuo įrenginio, kuriame matomas maketas, ekrano skiriamosios gebos, ten bus rodomas kiekviename langelyje naudojamo tinklelio pavadinimas (dabar virš pirmos eilutės parašyta, kad naudojamas didelis tinklelis, o langeliuose „cl-lg“ – didelis tinklelio klasės priešdėlis). Kai ekrano plotis mažėja, šios etiketės pasikeis.
- Likusiose toliau pateiktose eilutėse naudojama tik vieno tinklelio dydžio sistema – labai mažas, mažas, vidutinis ir didelis (tokia tvarka).
Taip galime pamatyti ir palyginti, kaip šie „Bootstrap 3“ arsenalo tinkleliai veikia kartu ir kaip veikia atskirai (kai naudojamas tik vienas tipas). Nes Kadangi mano naršyklė buvo išplėsta iki viso ekrano (didesnė nei 1200 pikselių pločio), kai dariau ankstesnę ekrano kopiją, visi šie penki svetainės išdėstymo pavyzdžiai yra išplėsti horizontaliai (stulpeliai yra vienas šalia kito per visą ekrano plotį).
Dabar šiek tiek susiaurinkime naršyklės lango dydį, kad matytume žlugimą.
Virš viršutinės eilutės tekstas ir klasių priešdėliai jo langeliuose pasikeitė (tam buvo naudojamos matomumo klasės, apie kurias kalbėsime vėliau). Dabar naudojamas vidurinis tinklelis ir vis dar rodomas horizontaliai. Tuo pačiu metu apatinė eilutė (kuri iliustruoja tik naudojimą grubus tinklelis) sulenktas vertikaliai, t.y. kaimyniniai blokai dabar rodomi ne vienas šalia kito pločio, o vienas po kito (aukštyje).
Pasirodo, kad didelis tinklelis, nesant jokios išorinės įtakos, elgiasi taip - jis yra sulankstytas vertikaliai visuose įrenginiuose, kurių ekrano dydis yra mažesnis nei 1200 pikselių. Šiuo atveju visi kiti, naudojami tinklelio pavyzdyje, rodomi horizontaliai. Pirmoje eilėje naudojamas tinklelių derinys, todėl dabar ją valdo vidutinė tinklelio sistema (didelė sistema nebeturi įtakos).
Dar kartą sumažinkime naršyklės lango dydį, kad jis taptų. Bus dar viena avarija:
Dabar (remiantis ekrano dydžiu) dirbame su mažu tinkleliu. Atitinkamai vertikaliai išsivystė ne tik didelis, bet ir vidutinis tinklelis. Na, o pirmoje eilėje, kur naudojamas tinklelių derinys, dabar viską valdo Bootstrap mažų tinklelių sistema. Tuo pačiu metu setka.html faile stulpelių pasiskirstymas šioje pirmoje eilutėje taip pat keičiasi, o tai visai nebūtina, tačiau tai visiškai įmanoma padaryti, kad patenkintumėte kai kuriuos jūsų poreikius dėl išdėstymo (be to , „vienas ar du“, be jokių problemų).
Mes ir toliau mažiname naršyklės lango plotį iki verčių. Įvyksta dar viena avarija:
Dėl to ne tik dideli ir vidutiniai tinkleliai eina vertikaliai per puslapį, bet ir mažasis yra sujungtas. vienintelis labai mažas tinklelis liko horizontalus, kuris toks išlieka (kaip ką tik matėme) bet kokiomis aplinkybėmis. Net jei susiaurinsite puslapį iki itin mažo pločio, itin mažas tinklelis nepavirs vertikaliu tinkleliu (net jei turinys netelpa į langelius).
Šis pavyzdys (failas setka.html) pagamintas tiksliai. Apie tai, kaip ten viskas sutvarkyta, pakalbėsime vėliau. Tačiau kol kas noriu atkreipti jūsų dėmesį tik į kai kuriuos niuansus, kuriuos galite pastebėti setka.html failo šaltinio kode.
Mūsų pavyzdžio šaltinio kodo paaiškinimai
Viršuje su pagalba pridedami maketų vizualinio dizaino stiliai (įtraukos, tinklelio spalvos ir kt.), kurie neturi ypatingo semantinio krūvio. Jei slinksite šaltinio kodu žemyn, pastebėsite šį bloką:
lg Didesniems nei 1200 piks. pločio ekranams naudojamas grubus tinklelis.
md Naudoja vidutinį tinklelį mažesniems nei 1200, bet didesniems nei 992 pikselių ekranams.
sm Mažesniems nei 992, bet didesniems nei 768 pikselių ekranams naudojamas mažas tinklelis.
xs Naudoja ypač mažą tinklelį, skirtą mažesniems nei 768 pikselių ekranams, kurie visada išlieka horizontalūs.
Yra keturi konteineriai, kuriems priskirtos skirtingos klasės (skaitykite apie tai). Jie leidžia rodyti konkretų turinį pagal medijos užklausas, atitinkančias skirtingus tinklelio dydžius. Kaip tai veikia? Visi keturi pavadinimai įkeliami į naršyklę (jei žiūrite į šaltinio kodą), tačiau rodomas tik vienas pavadinimas, atsižvelgiant į esamą ekrano skiriamąją gebą arba naršyklės lango dydį.
tai pagrindinis tinklelis, kur sujungtos visos keturios tinklelio sistemos (tai galite pamatyti pagal langelio atributus, pvz., class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , kuriame pateikiami visų keturių klasių priešdėliai tinkleliai). Pati eilutė, kaip minėta pirmiau, apibrėžiama įdedant visus jos elementus į konteinerį su class="row" (mūsų pavyzdyje, sudėtinis rodinys, pagrįstas div).
Atkreipkite dėmesį, kad mūsų pagrindinį tinklelį sudaro trys langeliai (stulpeliai) ir jei sudėsite visus kiekvienam stulpeliui priskirtus skaičius, pvz., Bootstrap itin mažiems tinklelio priešdams (col-xs), gausite iš viso 12. Tada tas pats bus ir su skaičiais po visų kitų sistemų priešdėlių. Tai suprantama, nes šis karkasas, kaip minėta aukščiau, turi 12 stulpelių struktūrą, t.y. horizontaliai visa išdėstymui skirta erdvė yra padalinta į dvylika vienodo pločio stulpelių(svetainėje nesimato – jie kaip langeliai mokykliniuose sąsiuviniuose).
Na, o naudodami skaičius po klasės priešdėlių, jūs tiesiog nustatote kiekvieno išdėstymo langelio (tikrųjų stulpelių) proporcijas. Tie. Proporcijos gali būti, pavyzdžiui:
Apskritai, Galima naudoti vieną, dvi, tris arba visas keturias tinklelio sistemas viename išdėstyme (eilėje). Viskas priklauso nuo jūsų dizaino pageidavimų ir nuo to, ką bandote pasiekti iš savo tinklalapio (kaip jis turėtų atrodyti skirtingų dydžių ekranuose). Oficialioje svetainėje pateikiamas pavyzdys:
Eilučių (eilių) ir langelių kūrimas naudojant Bootstrap klases
Kad geriau suprastume, sukurkime HTML puslapį, kuris šiek tiek primena tikras tinklalapis(su antrašte, teksto ir vaizdo turiniu bei porašte) ir išdėstykite ją naudodami Bootstrap 3 tinklelio sistemą.
Tiksliau, aš pats sukursiu ruošinį ir tik pasiūlysiu jums, analogiškai su ankstesniu pavyzdžiu, atsisiųsti failą svetainė.html(norėdami tai padaryti, kontekstiniame meniu pasirinkite elementą „Išsaugoti kaip...“), kad vėliau kartu prie šios „žuvelės“ galėtumėte pridėti reikiamas įkrovos klases. Jį taip pat reikės įdėti į Bootstrap aplanką tame pačiame lygyje kaip ir failas index.html, kurį sukūrėme pirmame straipsnyje (ir failas setka.html, su kuriuo dirbome aukščiau).
Jei pažvelgsite į sait.html failo šaltinio kodą, pamatysite, kad jame jau yra Bootstrap ir jquery, o buvo pridėtas turinys, imituojantis vidutinio tinklalapio išvaizdą. Taip, jums taip pat reikės aplanko su šiame puslapyje naudojamais vaizdais. Galite atsisiųsti iš čia - img.zip. Tiesiog išpakuokite archyvą ir įdėkite aplanką img (įsitikinkite, kad jame yra vaizdo failai, o ne kitas img aplankas) į Bootstrap aplanką, tame pačiame lygyje kaip ir sait.html failas. Struktūra atrodys taip:
Dabar (iš aplanko Bootstrap) naršyklėje pamatysite tinklalapį, kurį naudojau kaip pavyzdį. Stebina tai, kad visi blokai puslapyje yra vienas po kito, o tai labai trukdo teisingai vizualiai suvokti informaciją. Būtų logiška juos išdėstyti stulpeliais ir taip, kad sumažėjus ekrano dydžiui, „dizainas“ į tai reaguotų, keisdamas stulpelių skaičių, kad būtų patogu žiūrėti įrenginiuose, kurių matomos srities plotis skiriasi.
Sait.html failo šaltinio HTML kode rodžiau mano numatytų eilučių (eilučių) ribas, kurioms pritaikysime stulpelių rodymą naudodami tam tikras Bootstrap tinklelio sistemas. Yra tik keturios eilutės (jos sunumeruotos aukščiau esančioje ekrano kopijoje) - antraštė (antraštė su svetainės pavadinimu ir logotipu), puslapio pavadinimas ir aprašymas, turinio dalis (pagrindinis turinys, kurį sudaro keturių straipsnių skelbimai) ir poraštė.
Dabar prie sait.html failo turėsime pridėti Bootstrap žymėjimą, kuris. Norėdami sukurti eilutes, kaip prisimenate, pakaks visą jos turinį sudėti į konteinerį (dažniausiai tai yra Div žymos, nors gali būti ir kitų) ir jame parašyti klasę. class="row". Pirmoje eilutėje jis atrodys taip:
Interneto svetainė
Tą patį reikia padaryti ir visoms kitoms eilutėms (eilutėms) – įdėkite pradžios žymą
Skirtingų tinklelių naudojimas kuriant skirtingo ekrano pločio stulpelius su turiniu
Dabar tegul suformuokime ląsteles tose eilutėse (eilutėse), kur tikslinga tai daryti. Visai logiška būtų straipsnių skelbimus (nuo trečios eilutės) sutalpinti į keturis stulpelius, o sumažėjus ekrano pločiui, tegu šie keturi stulpeliai paverčiami dviem. Kaip tai padaryti? Pažiūrėkime.
Taigi, „Bootstrap 3“ yra 12 stulpelių tinklelis, apie kurį kalbėjome aukščiau. Kadangi nusprendėme sudaryti keturias stulpelius su pranešimais, būtų logiška juos padaryti vienodo pločio, o tai reiškia, kad kiekvienas iš stulpelių bus trijų langelių (celių) pločio mūsų nematomo tinklelio sistemoje (nepriklausomai nuo to, kokį tinklelį pasirinksime - ultra) - mažas, mažas, vidutinis arba didelis).
Kokį tinklą pasirinkti darbui? Paimkime vidurkį pradžiai, kaip kompromisą. Tokiu atveju turėsite pridėti klasę „col-md-3“ prie visų keturių langelių konteinerių -
Išsaugoję atliktus pakeitimus pamatysite, kad mūsų puslapis jau įgavo daug patogesnę išvaizdą:
Tiesa, naršyklės langą sumažinus iki mažesnio lūžio taško pločio (mūsų naudojamo vidutinio tinklelio atveju tai bus 992 pikseliai), visi pranešimai vėl išsirikiuos į stulpelį, o tai nėra gerai, nes Naudojamumas šiuo atveju sumažėja (beveik 1000 pikselių skiriamoji geba leidžia tankiau išdėstyti informaciją). Norėdami ištaisyti šią situaciją, galite pridėkite kitą tinklelį iš „Bootstrap“ arsenalo, skirto tiems patiems skelbimų laukams. Kaip tai padaryti? Pažiūrėkime.
Kiekviename skelbimo langelyje naudokime klasės pavadinimo priešdėlius „col-xs-6“ (rezultatas bus sudėtinė klasė class="col-md-3 col-sm-6"). Tai atrodys taip (pavyzdžiui, naudojant vieną langelį):
Google AdWords – grupių kūrimas
Skelbimo tekstas.
Kaip matote, čia pažeidėme neseniai paskelbtą taisyklę, kad skaičiai po vieno tinklelio priešdėliais visuose langeliuose turi būti 12. Gavome 24 (keturis kartus šešis). Bet mes tai padarėme tyčia, kad pasiektume norimą rezultatą – vietoj keturių gauname du stulpelius, kai praeiname vidutinės Bootstrap tinklelio sistemos lūžio tašką (tai 992 pikseliai). Tie. langeliai bus išdėstyti dviejose eilėse, po dvi kiekvienoje:
Nes Kadangi pasirinkome itin mažą tinklelio sistemą, tai toliau mažėjant naršyklės lango pločiui, blokų su pranešimais vienas po kito vertikalus išdėstymas (talpinimas viename stulpelyje) neatsiras, nes ši sistema visada išlieka horizontali. .
Jei norite, kad keturi stulpeliai, sumažėjus ekrano pločiui, virstų dviem stulpeliais, o tada vienu stulpeliu, tuomet turėtumėte naudoti mažą tinklelio sistemą, o ne „col-xs-6“ "col-sm-6":
„Yandex Direct“ – kampanijos kūrimo pagrindai
Tada, kai naršyklės lango plotis bus sumažintas žemiau 768 pikselių, pamatysite iškarpą, kurioje du stulpeliai su pranešimais konvertuojami į vieną. Tiesiog eksperimentuokite ir pajuskite skirtumą.
Tinklalapio antraštės tinkinimas naudojant Bootstrap 3
Eksperimentuokime ir bandykime dar kartą, kur iš esmės yra dvi potencialios ląstelės – svetainės pavadinimas su aprašymu ir logotipas. Tiesą sakant, mes juos išdėstysime. Šį kartą naudokime didesnę tinklelį "col-lg-6" gauti du vienodus stulpelius.
Interneto svetainė
Viskas apie svetainių, tinklaraščių, forumų, internetinių parduotuvių kūrimą, jų reklamavimą paieškos sistemose ir pinigų uždirbimą svetainėje
Tiesa, naudojant didelį tinklelį, iškritimas vyksta esant gana didelėms ekrano raiškoms (mūsų atveju naršyklės langai, nes ten imituojame skirtingo ekrano pločio įrenginius). Po to ląstelės sulankstomos vertikaliai. Norėdami to išvengti, mes pirmai eilutei pridėkite kitą „Bootstrap 3“ tinklelį. Manau, tiks nedidelė tinklelio sistema (klasės priešdėlis col-sm). Tada kodas atrodys maždaug taip:
Interneto svetainė
Viskas apie svetainių, tinklaraščių, forumų, internetinių parduotuvių kūrimą, jų reklamavimą paieškos sistemose ir pinigų uždirbimą svetainėje
Tačiau langelių su svetainės pavadinimu ir logotipu nesudariau vienodų mažam tinkleliui, nes logotipas iš esmės yra siauresnis (tam tikra prasme siauresnis) nuo pavadinimo su aprašymu. Esant mažesniam ekrano plotiui, nebūtų logiška jiems skirti vienodas langelius. Štai kodėl pirmą stulpelį sukūriau su svetainės pavadinimu ir aprašymu, kai Bootstrap small grid sistema suaktyvinama dvigubai didesne už logotipo stulpelį.
Dėl to, sumažinus naršyklės langą, šie langeliai susilies iki mažos „Bootstrap“ tinklelio sistemos pertraukos momento, kuris įvyksta esant mažesniam nei 768 pikselių pločiui, ir tada abu langeliai bus išdėstyti vienas po kito.
Galbūt pastebėjote, kad tekstas puslapyje užkliūna į kairįjį ekrano kraštą, todėl atsiranda . Galite pridėti, kad ištaisytumėte šią situaciją, į kūno žymą, kuri leis. Ir jūs galite viską išspręsti naudodami standartinius „Bootstrap 3“ įrankius.
Norėdami tai padaryti, turėsite apvynioti visą tinklalapio turinį (viską, kas yra „Body“ žymose) į „Div“ konteinerį su to paties pavadinimo klase - Taip pat galite matyti, kad peržiūros vaizdai persidengia vienas su kitu, kai ekrano plotis mažėja. Faktas yra tas, kad jie vis dar „nereaguoja“, bet mes juos tokius pateiksime kituose šios rubrikos straipsniuose. Taip pat toliau analizuosime darbą su Bootstrap 3 tinklelio sistema, mokysimės kurti mygtukus, lenteles, HTML formas, kurti išskleidžiamuosius meniu, navigaciją ir dar daugiau. Todėl nepersijunkite ir laukite naujų leidinių. Tęsinys >>> (Galite užsiprenumeruoti naujienlaiškį, kad nepraleistumėte) Ir štai tęsinys: (bet vis tiek užsiprenumeruok – bus dar daug įdomių ir naudingų dalykų). „Twitter Bootstrap 3“ tinklelio sistema yra greitas ir paprastas būdas sukurti svetainės maketą. Bootstrap tinkleliai naudojami kuriant tinklalapių maketus ir kuriant blokų maketus, kuriuose būtina užtikrinti teisingą elementų išdėstymą. Tinklelio projektavimas prasideda nuo konteinerio, kurio plotis yra fiksuotas arba slankiojantis. Fiksuoto pločio konteineris ( Plaukiojančio pločio konteineris ( Kitas žingsnis – eilutes (divs su .row klase) sudėti į konteinerį. Eilutės plotis ( Eilutės viduje dedami blokai su klase col-*-* , kurių viduje dedamas turinys ar kitos eilutės. Blokų su klase col-*-* plotis nustatomas santykine forma, nurodant Bootstrap stulpelių skaičių. Kadangi Bootstrap eilutėje pagal numatytuosius nustatymus yra 12 stulpelių, minimalus col-*-* bloko plotis yra vienas Bootstrap stulpelis, o didžiausias col-*-* bloko plotis yra 12 Bootstrap stulpelių. Pavyzdžiui, jei norime sukurti 3 tokio paties pločio blokus iš eilės, turime nustatyti šių blokų plotį į 4 Bootstrap stulpelius ( Pavyzdžiui: bloko plotį pikseliais galite apskaičiuoti taip: [Bootstrap stulpelio plotis] = 970 / 12 = 81 piks. Norėdami sukurti tinklalapių maketus įvairiems įrenginiams (išmaniesiems telefonams, planšetiniams kompiuteriams, nešiojamiesiems kompiuteriams ir asmeniniams kompiuteriams), turite naudoti iš anksto nustatytas Twitter Bootstrap 3 tinklelio klases. Pavyzdžiui, galite naudoti klasę .col-xs-*, kad sukurtumėte tinklelį mažo ekrano įrenginiams, pvz., išmaniesiems telefonams. Lygiai ta pati klasė. col-sm-* – mažo ekrano įrenginiams, pvz., planšetiniams kompiuteriams, klasė .col-md-* – vidutinio dydžio įrenginiams, pvz., asmeniniams ir nešiojamiesiems kompiuteriams, taip pat .col-lg-* klasė – didelio ekrano įrenginiams . Šioje lentelėje apibendrinamos kai kurios pagrindinės naujosios „Bootstrap 3“ tinklelio sistemos funkcijos. Pastaba: Jei blokui pritaikysite klasę .col-sm-*, tai turės įtakos ne tik mažo ekrano įrenginių (planšetinių kompiuterių), bet ir vidutinio bei didelio ekrano įrenginių žymėjimui, jei nenurodysite .col-md-klasių. * ir .col-lg-* . Panašiai .col-md-* klasė paveiks žymėjimą ne tik vidutinio ekrano įrenginiams, bet ir didelio ekrano įrenginiams, jei .col-lg-* klasė nenurodyta. Naudodami naują „Twitter Bootstrap 3“ tinklelio sistemą galite lengvai valdyti savo svetainės išdėstymą skirtinguose įrenginiuose, kurių ekrano plotis yra skirtingas. Kaip pavyzdį apsvarstykite svetainės maketo kūrimo procesą, kurį sudaro 3 blokai visiems įrenginiams. Sukurtas išdėstymas skirtinguose įrenginiuose (išmaniuosiuose telefonuose, planšetiniuose kompiuteriuose, nešiojamuosiuose kompiuteriuose, asmeniniuose kompiuteriuose) atrodys kitaip. Pavyzdžiui, išmaniuosiuose telefonuose šie blokeliai išdėstyti vertikaliai, o dideliame asmeninio kompiuterio ekrane – horizontaliai. Tai reiškia, kad pasiekus naršyklės lango pločio ribas, mūsų išdėstymas automatiškai pasikeis. Įrenginio su dideliu ekranu (plotis >=1200px) svetainės išdėstymas susideda iš trijų horizontaliai išdėstytų blokų, kurie užima visą konteinerio plotį. Pirmasis langelis yra pusė konteinerio pločio (col-lg-6), antrasis langelis yra ketvirtadalis konteinerio pločio (col-lg-3), o trečiasis langelis yra ketvirtadalis konteinerio pločio. konteineris (col-lg-3). Vidutinio ekrano įrenginio svetainės išdėstymas (plotis >=992 piks. ir<1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12). „Twitter Bootstrap 3 Grid System“ aprašymas
Fiksuoto pločio konteineris
plaukiojančio pločio konteineris
Eilių išdėstymas konteinerio viduje
Blokų dėjimas įkrovos eilučių viduje
Bloko pločio skaičiavimas
[Bloko plotis] = [Bootstrap stulpelio plotis]*[Stulpelių, iš kurių susideda blokas, skaičius],
kur: [Bootstrap stulpelio plotis] = [Eilutės plotis (eilutė)] / 12.
[bloko plotis] = 81 * 4 = 324 pikseliai.Tinklelio sistema įvairiems įrenginiams
„Bootstrap 3 Grid System“ ypatybės
Mažas ekrano plotis
Išmanieji telefonai
(<768px)
Mažas ekrano plotis
Tabletės
(≥ 768 piks. ir<992)
Vidutinis ekrano plotis
nešiojamieji kompiuteriai
(≥ 992 piks. ir<1200px)
Didelis ekrano plotis
Kompiuteriai
(≥ 1200 piks.)Konteinerio plotis
fiksuotas
išdėstymas
(.konteineris)
750 taškų
970 pikselių
1170 taškų
Skysčio išdėstymo talpyklos plotis (.container-fluid)
Lygus naršyklės kliento lango pločiui
klasės priešdėlis
.col-xs-
.col-sm-
.col-md-
.col-lg-
Didžiausias fiksuoto pločio sudėtinio rodinio įkrovos plotis (.container)
~62px (750px / 12)
~81px (970px / 12)
~97px (1170px / 12)
Didžiausias įkrovos stulpelio plotis slankiajam konteineriui (.container-fluid)
Naršyklės lango darbo srities plotis / 12
Turinio blokų, sudarytų iš įkrovos stulpelių, užpildymas
15 pikselių iš kairės ir dešinės bloko pusių
Svetainės maketo kūrimas naudojant „Twitter Bootstrap 3 Grid System“.
Sukurkite didelio ekrano įrenginio išdėstymą
Vidutinio ekrano įrenginio išdėstymo nustatymas
Mažų ir mažų dydžių įrenginių išdėstymo koregavimas
Taip pat nustatykite kitų įrenginių išdėstymą. Svetainės išdėstymas mažo ekrano įrenginiui (plotis >=768 piks. ir<992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.
<div class="container"> <div class="row"> <div class="col-lg-6 col-md-8" style= "aukštis: 300 taškų; fonas: žalias;"> Blokas Nr.1div > <div class="col-lg-3 col-md-4" style= "aukštis: 100 taškų; fonas: oranžinis;"> 2 blokasdiv > <div class ="išvalyti matomas-md-blokas" >Svetainės išdėstymas įrenginiui su mažu ekranu (plotis<768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.
<div class="container"> <div class="row"> <div klasė = "col-lg-6 col-md-8 col-sm-12 col-xs-12" stilius = "aukštis: 300 taškų; fonas: žalias;">Blokas Nr.1div > <div klasė = "col-lg-3 col-md-4 col-sm-6 col-xs-12" stilius = "aukštis: 100 taškų; fonas: oranžinis;">
2 blokasdiv > <div class ="išvalyti matomas-md-blokas" >
3 blokasdiv > div > div >
Pastaba: Įrenginiams, kurių ekrano plotis labai mažas (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.
<div class="container"> <div class="row"> <div class="col-lg-6 col-md-8 col-sm-12" style= "aukštis: 300 taškų; fonas: žalias;"> Blokas Nr.1div > <div class="col-lg-3 col-md-4 col-sm-6" style= "aukštis: 100 taškų; fonas: oranžinis;"> 2 blokas
div > <div class ="išvalyti matomas-md-blokas" >
div > div > div >
Reaktyvios „Twitter Bootstrap“ paslaugų klasės, skirtos elementams rodyti ir paslėpti
„Twitter Bootstrap 3“ turi reaguojančių paslaugų klases, kurios leidžia įjungti elementus rodyti tik tam tikruose įrenginiuose, kurių ekrano dydžiai patenka į atitinkamą diapazoną.
„Twitter Bootstrap 3.2“ pridėjo CSS rodymo nuosavybės palaikymą .visible klasėje. Nauja funkcija leidžia nustatyti elementų, pvz., įterptųjų , blokų ir eilutinio blokavimo, matomumą skirtinguose ekranuose. Pavyzdžiui, klasė .visible-md-block įgalina elemento matomumą, jei jis yra blokinis elementas ir dabartinis naršyklės lango kliento srities plotis atitinka md diapazoną (plotis >=992 piks. ir<1200px).
| apibūdinimas | |
|---|---|
| .visible-xs-* | Padaro elementą matomą tik labai mažo ekrano įrenginiuose, kurių ekrano plotis mažesnis nei 768 pikseliai. Kituose įrenginiuose šie elementai nematomi. |
| .visible-sm-* | Padaro elementą matomą tik įrenginiuose, kurių ekrano plotis yra didesnis nei 768 pikseliai (t. y. ≥ 768 pikseliai) ir mažesnis nei 992 pikseliai. Kituose įrenginiuose šie elementai nematomi. |
| .visible-md-* | Padaro elementą matomą tik įrenginiuose, kurių ekrano plotis didesnis arba lygus 992 piks. (t. y. ≥ 992 piks.) ir mažesnis nei 1 200 pikselių. Kituose įrenginiuose šie elementai nematomi. |
| .visible-lg-* | Padaro elementą matomą tik įrenginiuose, kurių ekrano plotis yra didesnis nei 1 200 pikselių (t. y. ≥ 1 200 pikselių). Kituose įrenginiuose šie elementai nematomi. |
Pastaba: taip pat galite bendrinti šias klases, kad elementai būtų matomi keliuose įrenginiuose. Pavyzdžiui, bet kuriam blokui galite pritaikyti klases .visible-xs-* ir .visible-md-*, kad jis būtų matomas tiek labai mažo, tiek vidutinio ekrano įrenginiuose.
Panašiai galite naudoti toliau pateiktas paslaugų klases, kad paslėptumėte elementus, kad jie nebūtų rodomi tam tikruose įrenginiuose.
Patarimas: taip pat galite bendrinti šias klases, kad blokai nebūtų matomi keliuose įrenginiuose. Pavyzdžiui, galite pritaikyti .hidden-xs ir .hidden-md klases tinklalapio blokui, kad blokas būtų nematomas labai mažo ir vidutinio ekrano įrenginiuose.
<p class="visible-xs-block">Ši pastraipa bus matoma tik išmaniuosiuose telefonuose.p > <p class ="matomas-sm-blokas" >Ši pastraipa bus matoma tik planšetiniuose kompiuteriuose.p > <p class="visible-md-block">Ši pastraipa bus matoma tik įrenginiuose su vidutinio dydžio ekranu.p > <p class="visible-lg-block">Ši pastraipa bus matoma tik didelio ekrano įrenginiuose.p >Panašiai kaip įprastos „Twitter Bootstrap 3“ reaguojančios klasės, šios naudingumo klasės gali būti naudojamos norint parodyti arba paslėpti konkrečius blokus spausdinant tinklalapius.
Galinga lanksti tinklelio sistema, teikianti naudą mobiliųjų įrenginių naudotojams dėl lengvo visų tipų ir dydžių elementų išdėstymo ir išdėstymo. Jame naudojama „12 stulpelių“, 5 prisitaikančių pakopų, „Sass“ išankstinių procesorių ir iš anksto nustatytų klasių sistema.
Kaip tai veikia
„Bootstrap 4“ tinklelio sistema naudoja konteinerius, eilutes ir stulpelius, kad būtų patogu tvarkyti turinį. Bootstrap įdiegtas naudojant „flexbox“ ir visiškai reaguoja. Žemiau pateikiamas pavyzdys ir nuodugnus akių sujungimo pavyzdys.
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Šiame pavyzdyje 3 vienodo pločio stulpeliai buvo sukurti naudojant iš anksto nustatytas tinklelio klases mažiems, vidutiniams ir dideliems įrenginiams. Šie stulpeliai sulygiuoti naudojant pirminę klasę .container.
Štai nedidelis Bootstrap 4 veikimo paaiškinimas:
Tinklelio parinktys
„Bootstrap“ naudoja em ir rem daugeliui dydžių, o px pikselius tinklelio „lūžio taškams“ ir konteinerio pločiui. Taip yra todėl, kad peržiūros srities plotis kiekviename įrenginyje matuojamas pikseliais ir nesikeičia atsižvelgiant į šrifto dydį.
Pažiūrėkime, kaip kai kurie „Bootstrap“ tinklelio sistemos aspektai veikia skirtinguose „rankiniuose“ įrenginiuose.
 mažas ≥576 piks |
 ≥768 piks |
 didelis ≥ 992 piks |
 ≥ 1200 piks |
||
|---|---|---|---|---|---|
| Maksimalus konteinerio plotis |
Nėra (automatinis) | 540 pikselių | 720 taškų | 960 taškų | 1140 taškų |
| klasės priešdėlis | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| Stulpelių skaičius | 12 | ||||
| Įtraukos plotis | 30 piks. (15 piks. kiekvienoje stulpelio pusėje) | ||||
| Galima įdėti į lizdą | Taip | ||||
| Stulpelių užsakymas | Taip | ||||
Automatinis išdėstymas naudojant stulpelius
Naudokite stulpelių klases su specialiais lūžio taškais (pvz., .col-sm-6), kad galėtumėte lengvai išdėstyti stulpelius nenaudodami aiškių klasių numerių.
Vienodo pločio
Pavyzdžiui, čia matome du tinklelius, kurie tiks bet kokiam įrenginiui ir peržiūros zonai, nuo xs iki xl . Pridėkite bet kokį skaičių paprastų klasių prie kiekvieno lūžio taško ir kiekvienas stulpelis bus tokio paties pločio.
Vienodo pločio stulpelius galima pavaizduoti kaip eilutes, tačiau tai gali būti klaida, dėl kurios reikia pridėti flex-basis arba border atributą. Mūsų pavyzdys veikia dėl sienos vertės; galite padaryti tą patį: .col ( kraštinė: 1px solid skaidri; ) . Yra ir kitas būdas: prie stulpelio pločio galite pridėti flex-bais, t.y. .col ( flex: 1 0 50%; ) .
Vieno stulpelio pločio nustatymas
Automatinis stulpelių išdėstymas lanksčiojo dėžutės tinklelyje taip pat suteikia galimybę nustatyti vieno stulpelio plotį, o likusių stulpelių dydis bus automatiškai pakeistas aplink jį. Galite naudoti iš anksto nustatytas tinklelio klases (kaip parodyta toliau), mišinius arba eilutinius plotius. Atminkite, kad kitų stulpelių dydis bus pakeistas neatsižvelgiant į centrinio stulpelio plotį.
2 iš 3 (platus)
2 iš 3 (platus)
Reaktyvaus pločio turinys
Naudokite col-(breakpoint)-auto klases, kad sukurtumėte stulpelius, kurie keičia savo plotį, kad atitiktų turinio plotį.
Reaktyvaus pločio turinys
Reaktyvaus pločio turinys
To paties pločio kelių eilių
Kurkite vieno pločio stulpelius, apimančius kelias eilutes, pridėdami .w-100, kur norite perkelti naują eilutę. Padarykite juos jautrius naudodami .w-100 kartu su kai kuriomis reaguojančiomis ekrano programomis.
Atsakingos klasės
„Bootstrap“ tinklelis apima 5 „pakopas“ iš anksto nustatytų klasių, naudojamų kuriant sudėtingą reaguojantį turinį. Pritaikykite stulpelių dydį, kad jie būtų tinkamai rodomi visų tipų ir dydžių įrenginiuose.
Visi lūžio taškai
Jei tinkleliai atrodo ir tinka vienodai visuose bet kokio dydžio įrenginiuose, naudokite klases .col ir .col-*. Apibrėžkite pavadintą klasę su skaičiumi, kai jums reikia konkretaus dydžio stulpelio, kitu atveju naudokite .col .
Horizontaliai
Naudodami vieną .col-sm-* klasių rinkinį, galite sukurti pagrindinį tinklelį, kuris pirmiausia sukrautas vertikaliai, o tada jo stulpeliai tampa horizontalūs (ypač mažuose įrenginiuose).
Ieškokite ir kurkite tai, ko jums reikia
Nenorite, kad jūsų stulpeliai būtų ta pačia tvarka? Kiekvienai pakopai naudokite skirtingų klasių derinį. Žiūrėkite pavyzdį žemiau.
Col-12 .col-md-8
Col-6 .col-md-4
Col-6 .col-md-4
Col-6 .col-md-4
Col-6 .col-md-4
lygiavimas
Vertikaliam ir horizontaliam kolonų centravimui naudokite lanksčias centravimo priemones.
Vertikalus lygiavimas
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Viena iš trijų stulpelių
Horizontalus lygiavimas
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Vienas iš dviejų stulpelių
Tarp stulpelių nėra tarpų
Tarpus tarp stulpelių mūsų iš anksto nustatytose klasėse galima pašalinti naudojant .no-gutters klasę, kuri pašalina neigiamą paraštę iš .row ir horizontalų užpildą iš visų stulpelių.
Čia yra šių stilių kūrimo šaltinio kodas. Atminkite, kad stulpelių nepaisymas veikia tik pirmuosius paveldėtus stulpelius ir yra apibrėžiamas naudojant atributų parinkiklį. Šis metodas sukuria išsamesnį parinkiklį, o stulpelio užpildymą galima pakeisti naudojant tarpų priemones.
Reikia sukurti dizainą nuo krašto iki krašto (turinys puikiai priglunda prie įrenginio kraštų)? Pašalinkite pirminę klasę .container arba .container-fluid.
.no-gutters ( margin-right : 0 ; margin-left : 0 ; > .col , > [ class *= "col-" ] ( padding-right : 0 ; padding-left : 0 ; ) )Štai kaip tai veikia praktiškai. Atminkite, kad galite ir toliau tai naudoti su visomis kitomis iš anksto nustatytomis tinklelio klasėmis (įskaitant stulpelių plotį, reaguojančius lygius, nepaisymus ir kt.).
Col-12 .col-sm-6 .col-md-8
Col-6 .col-md-4
Stulpelio apvyniojimas
Jei vienoje eilutėje yra daugiau nei 12 stulpelių, kiekvienas papildomas stulpelis bus perkeltas į naują eilutę.
Col-4
Kadangi 9 + 4 = 13 > 12, šis 4 stulpelių pločio dalinys bus „įvyniotas“ į naują eilutę kaip gretimas vienetas.
Col-6
Tolesni stulpeliai tęsiasi pagal naują eilutę.
Kadangi 9 + 4 = 13 > 12, šis 4 stulpelių pločio dalinys bus „įvyniotas“ į naują eilutę kaip gretimas vienetas.
Tolesni stulpeliai tęsiasi pagal naują eilutę.
Stulpelių pertraukos
Norėdami perkelti stulpelius į naują lanksčiojo sudėtinio rodinio eilutę, atlikite šiuos veiksmus: pridėkite elementą, kurio plotis: 100 %, kur norite apvilkti stulpelius nauja linija. Paprastai tai pasiekiama naudojant multiple.row s, bet ne kiekvienas vykdymo metodas gali tai palaikyti.
Col-6 .col-sm-3
Col-6 .col-sm-3
Col-6 .col-sm-3
Col-6 .col-sm-3
Col-6 .col-sm-4
Col-6 .col-sm-4
Col-6 .col-sm-4
Col-6 .col-sm-4
Elementų tvarkos keitimas
„Lankstus“ užsakymas
Valdymui naudokite .order- - klases vizualinė tvarka savo turinį. Šios klasės yra „atsakomosios“, todėl tvarką galite nustatyti naudodami užsakymo lūžio tašką (pvz., .order-1.order-md-2). Jis palaiko nuo 1 iki 12 per visas 5 pakopas.
Pirmas, bet netvarkingas
Antras, bet paskutinis
trečias, bet pirmas
Taip pat yra reaguojanti .order-first klasė, kuri greitai pertvarko vieną elementą taikydama tvarką: -1 nuosavybė. Šią klasę taip pat galima naudoti su užsakymo* numeruotomis klasėmis.
Pirmas, bet netvarkingas
Antras, bet netvarkingas
trečias, bet pirmas
Stulpelių perkėlimas
Tinklelio stulpelius galite perstumti dviem būdais: naudodami reaguojančias .offset klases ir mūsų maržos įrankius. Tinklelio klasės sukurtos taip, kad atitiktų stulpelius, o paraštės yra patogesnės norint greitai išdėstyti elementus, kur poslinkio plotis nėra pastovus.
Klasių keitimas
Perkelkite stulpelius į dešinę naudodami .offset-md-* klases. Jie padidina kairiojo stulpelio paraštę * stulpeliais. Pavyzdžiui, klasė .offset-md-4 perkelia .col-md-4 4 stulpeliais.
Col-md-4 .offset-md-4
Col-md-3 .offset-md-3
Col-md-3 .offset-md-3
Col-md-6 .offset-md-3
Col-sm-5 .col-md-6
Col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
Col.col-sm-6.col-md-5.col-lg-6
col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Atstumti garsiakalbius
BS4, palyginti su BS3, nebėra poslinkio klasių v3. Vietoj to naudokite paraštės priemones, pvz., .mr-auto, kad priverstumėte antrinius stulpelius atitolti vienas nuo kito.
