Chlapci, myslím si, že Bootstrap je skvelá vec. Prečo je to tak, sa pokúsim vysvetliť v tomto článku. No poďme.Hneď sa ospravedlňujem za to, že skoro celá prvá polovica článku bola napísaná bez obrázkov, je tam len teória, vysvetlenie ako mriežka funguje. Ale toto je veľmi dôležité! Kto z vás to potrebuje, ten to vezme do rúk, prečíta si to a dúfam, že pochopí. Druhá polovica článku je už vnímaná jednoduchšie, je tam viac príkladov so screenshotmi.
Bootstrap - čo to je?
Začnime teda dôležitou otázkou. Bootstrap je rámec css a js, v skutočnosti je to sada súborov s pripraveným kódom. Cieľom vývojárov takmer akéhokoľvek frameworku je zjednodušiť vývoj stránky pre seba a ostatných, ktorí budú mať k nástroju prístup. V prípade Bootstrapu je úplne zadarmo, takže ho môžete použiť akýmkoľvek spôsobom, upravovať zdroj a ako chcete prerobiť rámec pre seba. Je to perfektné.
Inštalácia Bootstrap
Ak potrebujete len prepojiť súbory frameworku s html dokumentom (napríklad pre precvičenie), stačí si stiahnuť framework z oficiálnej stránky getbootstrap.com , skopírovať jeho súbory do projektu a zahrnúť tie, ktoré potrebujete. urobím krátka recenzia tieto súbory:
- bootstrap.css a bootstrap.min.css sú nekomprimované a komprimované verzie kódu frameworku css. Odporúča sa pripojiť k pracovnému projektu komprimovaný súbor, čím mierne zvýšite rýchlosť sťahovania. Ak však plánujete zobraziť kód v súbore, zahrňte nekomprimovanú verziu.
- bootstrap.js a bootstrap.min.js - súbor skriptu
- priečinok fonts a súbory glyphicons v ňom sú písmo ikony Bootstrap. Obsahuje asi 200 ikon. Vo väčšine prípadov vám budú stačiť, niekedy potrebujete pripojiť ďalšie. O fontoch ikon si povieme viac neskôr.
Toto je štandardná sada rámca. V skutočnosti si ho môžete ľahko prispôsobiť a zmeniť pre seba. Napríklad nepoužívajte skripty vôbec alebo pripojte iba jednu mriežku. Vo všeobecnosti budeme hovoriť aj o tom.
Bootstrap ruskej dokumentácie
Chystáte sa getbootstrap Pravdepodobne ste si všimli, že tu je všetko v angličtine. Na frameworku by sme potrebovali aj ruskú pomoc. Nájsť ju je ľahké. Ak to chcete urobiť, prejdite z hlavnej stránky do sekcie Začíname. Prejdite úplne dole, bude tam odkaz na preklady. Vyhľadajte tam ruštinu a kliknite na ňu. To je všetko, teraz ste na ruskej verzii stránky. Pravda, nie všetko tu bolo preložené, ale niekde okolo 70-80% je presných, takže všetko pochopíte.
Bootstrap sieťka
Či sa vám to páči alebo nie, hlavným prvkom Bootstrapu je citlivá mriežka. Vo všeobecnosti by bez neho framework stratil takmer všetku svoju hodnotu, pretože práve vďaka mriežke môžete rýchlo vytvárať adaptívne šablóny. Zároveň možno vôbec nepoznáte mediálne dopyty, nepotrebujete ich, pretože framework preberá implementáciu prispôsobivosti, stačí len nastaviť správne triedy pre bloky.
Čo sú tieto triedy? Ideme do dokumentácie, veľmi nám to pomôže. Prejdite do sekcie CSS - Grid System. Všeobecné pravidlá pre prácu s mriežkou sú jednoduché, teraz ich uvediem.
Ako pracovať s mriežkou?
Predstavte si to ako html tabuľku. Ak ste niekedy písali html kód pre tabuľky, tak viete, že všetok obsah je umiestnený v tagu table, jeden riadok je umiestnený v tagu tr a v ňom sú už umiestnené bunky - td .
Takže v sieti je všetko rovnaké. Trieda kontajnera slúži ako všeobecný kontajner pre mriežku. Existujú 2 možnosti mriežky bootstrapu - úplne gumená a stále s konečnou maximálnou šírkou. Takže, keď sa pýtali spoločný blok kontajnerovej triedy, bude mať stránka maximálnu šírku 1170 pixelov. Nebude sa ďalej rozširovať. Prirodzene, obsah bude vycentrovaný.
Ak nastavíte triedu nádoby-kvapalina, potom bude sieťka úplne gumená, to znamená, že nebudú existovať žiadne obmedzenia veľkosti. Ak napríklad osoba otvorí webovú stránku na monitore so šírkou 1920 pixelov, uvidí ju v celej šírke.
V súlade s tým je prvá vec pri vývoji stránky, musíte sa rozhodnúť, aká bude šablóna - úplne gumená alebo jej šírka musí byť stále obmedzená.
Skvelé, do kontajnerového bloku by ste mali umiestniť rad mriežky. Do nej musíte vložiť všetky bloky, ktoré sú na rovnakom riadku. To znamená, že ak vezmeme najtypickejšiu šablónu: hlavička, telo, pravý stĺpec a päta, potom existujú 3 stĺpce. Prvý bude mať iba hlavičku, druhý bude mať obsah a bočný panel a posledný bude mať pätu. Označenie takejto lokality by bolo približne takéto:
Zatiaľ je to však nesprávne označenie, pretože chýba ... čo? Presne tak, bunky! V prípade Bootstrapu sa nazývajú aj stĺpce. Bootstrap mriežka pozostáva z 12 stĺpcov. Môže byť vložený do ľubovoľného bloku ľubovoľnej šírky, najmenej 1200 pixelov, najmenej 100. To všetko preto, že šírka stĺpcov nie je nastavená v pixeloch, ale v percentách.
Ako tento 12-stĺpcový systém funguje?
Dostávame sa teda k najdôležitejšej otázke súvisiacej s rámcom. Verte mi, ak tomu rozumiete, všetko ostatné je nezmysel. Hlavná vec je pochopiť, ako mriežka funguje, a cesta k rýchlemu adaptívnemu rozloženiu sa vám otvorí.
Ak to chcete urobiť, prejdite dokumentáciou nižšie, nájdete tam tabuľku, ktorá obsahuje dôležité vlastnosti mriežky.
Mimochodom, samotné stĺpce sú v Bootstrape označené triedou col-, ale toto je zložená trieda, takže len col- sa nikdy nepíše. Bootstrap má 4 špeciálne triedy, ktoré sú určené na kontrolu veľkosti blokov pri rôznych šírkach, tu sú:
- ld - pre veľké obrazovky so šírkou viac ako 1200 pixelov (stolné počítače);
- md - pre stredné obrazovky, šírka od 992 do 1199 (počítače, netbooky);
- sm - pre malé obrazovky, šírka od 768 do 991 pixelov (tablety);
- xs – extra malé obrazovky so šírkou menšou ako 768 pixelov.
Tu sú 4 triedy, ale na kontrolu veľkosti prvkov sa používajú čísla od 1 do 12, pretože, ako si pamätáte, v mriežke je presne 12 stĺpcov.
Pochopiť to je celkom jednoduché. V prvom rade si vytvoríme hlavičku, tá sa vôbec nedá umiestniť do mriežky, keďže aj tak zaberie 100% šírky (zvyčajne). Ale aj tak to vložíme. Čo je to za triedu col-md-12? Ako som vám už povedal, nikto nepíše len col-, s touto triedou v skutočnosti hovoríme prehliadaču:
Toto je bunka | stĺpec
Na stredných zariadeniach (trieda md) by jej šírka mala byť 12 stĺpcov z 12, to znamená 100 % šírky riadku (riadku).
Ale čo šírka na iných zariadeniach? Na veľkých (lg) obrazovkách to bude tiež 100 %, pretože hodnoty pre veľké obrazovky sa dedia, ale nie pre menšie. Je to jednoduché: ak by ste napísali col-xs-4 , šírka stĺpca by bola 33 % na všetkých zariadeniach a ak col-lg-4 , tak iba na veľkých. Tu je funkcia, zapamätajte si ju.
No, ak sa hodnota šírky neuloží na menších obrazovkách, čo sa stane? Vyhodí sa. Tu je postup:
col-sm-4 - na malých obrazovkách bude blok zaberať 33% šírky, na obrazovkách md a lg to bude rovnaké, ale na xs, teda najmenších, sa šírka prestaví na 100% . Zapamätajte si teda ešte jedno jednoduché pravidlo: Ak nie je nič nastavené pre menšie obrazovky, blok sa na nich zobrazí v 100% šírke.
V podstate hovoríme prehliadaču:
Nech je blok obsahu široký 8 z 12 stĺpcov a táto situácia bude na malých, stredných a veľké obrazovky(stačí zadať pre malé obrazovky, pre veľké obrazovky, ako si pamätáte, sa hodnota zdedí). Ale na najmenších obrazovkách bude blok obsadený na 100%. To je pravda, zvyčajne mobilné zariadenia Stránky sa zobrazujú presne v 1 stĺpci.
Nech je bočný stĺpec jednou tretinou šírky riadku na všetkých rovnakých malých, stredných a veľkých obrazovkách. No, na najmenšom, ako ste už pochopili, je jeho šírka tiež nastavená na 100%. Je to také jednoduché.
No s pätou nie je čo riešiť. no, základné princípy Analyzovali sme prácu siete, ale stále musíme vidieť, ako funguje ...
Bootstrap Nested Grid
Faktom je, že teraz sme šablónu rozbili iba na hlavné bloky, ale môžu mať aj rozdelenie na stĺpce vo vnútri. Obsah môže napríklad zobrazovať produkty vo viacerých stĺpcoch. Ako byť? Veľmi jednoduché – vnútri vytvoríme presne rovnakú mriežku. Bude vnorený, ale obsahuje aj 12 stĺpcov. Ak to všetko zhrnieme, dospejeme k tomuto záveru:
V rámci každého bloku môže byť neobmedzený počet mriežok. Napríklad v bloku s produktmi, mriežkou na oddelenie tovaru, v bloku s jedným produktom samotným môžete vytvoriť ďalšiu mriežku, napríklad na oddelenie cien, informácií o dostupnosti a doplnkových informácií. informácie.
Teraz sa pokúsime vytvoriť ďalšiu mriežku vo vnútri bloku s obsahom, aby sme produkty usporiadali do 3 stĺpcov. Takže vezmeme blok, v ktorom máme obsah:
A píšeme mu:
Meno Produktu
Popis produktu
Ako vidíte, vo vnútri obsahu sme vytvorili novú mriežku - dovnútra sme vložili riadok a v rade už budú 3 bloky s produktmi. Stačí skopírovať blok col-sm-4 s kartou produktu a prilepiť ho ešte 2-krát, bude to vyzerať takto (môžete si odfotiť akýkoľvek produkt, ja som to urobil super):
Chýba mi ďalší dôležitý bod, aby sa obrázky prispôsobili blokom, v ktorých sa nachádzajú, každému z nich treba priradiť triedu reagujúcu na img. Ja, ak si ako ja myslíte, že je to nepohodlné, napíšte to vo svojom vlastnom style.css takto:
Img( max-width: 100%; height: auto; display: block; )
To je všetko, uložte tento kód a zahrňte svoj súbor css do projektu. Teraz budú obrázky predvolene reagovať.
No dopadlo to celkom hladko? Áno, a bez bootstrapu by ste museli trpieť dlhšie. Jediná vec je, že pri vytváraní mriežky vo vnútri akéhokoľvek bloku už nemusíte vytvárať blok s triedou kontajnera. Prečo to nie je potrebné? Áno, pretože blok, v ktorom je vytvorená mriežka, slúži ako kontajner.
V ľubovoľnom bloku teda môžete vytvoriť toľko stĺpcov, koľko chcete, a vytvoriť šablónu ľubovoľnej zložitosti. A to všetko je oveľa rýchlejšie ako bez Bootstrapu, pretože musíte písať všetky css od začiatku.
Responzívne nástroje
Toto je ďalšia skvelá vlastnosť bootstrapu. Spočíva v tom, že môžete skryť alebo zviditeľniť akékoľvek bloky v šírke, ktorú potrebujete. Napríklad úplne skryť bočný panel na úzkych obrazovkách, pridať nejaké nové prvky na mobilných zariadeniach, pridať stĺpec na širokouhlých obrazovkách atď.
Existuje veľa možností aplikácie, ale nepovedal som vám o najdôležitejšej veci, ako tieto nástroje používať? Ak to chcete urobiť, stačí pridať triedy do požadovaného bloku. Ak ho potrebujete skryť, stačí zadať nasledujúcu triedu:
Čo urobí trieda hidden-xs v tomto prípade? Na extra malých zariadeniach skryje pätu. Na všetkých ostatných bude blok viditeľný.
Ak ho naopak potrebujete zobraziť len na tých najmenších obrazovkách, musíte použiť triedu viditeľný-xs-block. V tomto prípade bude blok skrytý na všetkých obrazovkách okrem najužších. Takže triedy adaptívnych nástrojov sú napísané takto:
- Slovo skryté alebo viditeľné, podľa toho, čo potrebujete
- Skratka xs, sm, md alebo lg, ktorá určuje, na ktorých obrazovkách sa má blok skryť alebo zobraziť.
- Pre viditeľné je tiež potrebné pridať jednu z troch hodnôt: block - zobrazí prvok ako blok, inline-block - ako inline-block, inline - inline.
No, pár príkladov, aby to bolo jasné:
- hidden-xs hidden-lg - skryje prvok na najmenšej a najväčšej obrazovke. Ako vidíte, môžete zadať viacero tried oddelených medzerami.
- viditeľný-xs-inline viditeľný-md-blok — prvok sa na malých a veľkých obrazovkách vôbec nezobrazí. Na extra-malých to bude malé písmeno a na strednom to bude blok.
- viditeľný-lg-blok - prvok bude viditeľný len na najväčších obrazovkách, na všetkých ostatných bude skrytý
Takto to celé funguje. Presne takto a nič iné. Dúfam, že chápete. Uveďme to do praxe. Máme skúšobnú šablónu, aj keď veľmi primitívnu.
Úloha: aby bočný panel zmizol na malých obrazovkách a ešte jeden produkt na najmenších obrazovkách. A to tak, že na xs-zariadeniach bol tovar už v 2 stĺpcoch a nie v 3.
Skúste to urobiť sami úpravou iba html kódu. Čo je potrebné urobiť? Najprv sa poďme zaoberať stĺpcom, aby sme ho skryli na sm-obrazovkách, stačí k nemu pridať skrytú triedu sm.
Skvelé, teraz musíme do tretieho produktu pridať triedu hidden-xs a na najmenších obrazovkách zmizne. Triedy zvyšných dvoch tovarov budú nasledovné:
To znamená, že na stredných zariadeniach bude blok zaberať 4 stĺpce z 12, čo sa dá preložiť na 33,33% šírky, a na extra malých zariadeniach - 50%. A keďže jeden produktový blok pri tejto šírke zmizne, oba produktové bloky sa úhľadne zmestia do 1 radu, takto:
Skvelé! Keď to pochopíte, môžete už s blokmi na webovej stránke manipulovať takmer akýmkoľvek spôsobom. Skúste si vymyslieť úlohy pre seba a zrealizovať ich.
Presuňte ma úplne
Ďalej ukážem ešte 1 veľmi dobrý trik – možnosť posunúť blok doprava alebo doľava. Povedzme, že nemáme 3 produkty za sebou, ale 1. A nezaberá celú šírku. A vašou úlohou je zarovnať ho do stredu. Je to jednoduché, ak máte na pamäti, že pracujete s 12-stĺpcovým systémom.
Nechajme jeden blok s produktom:
Stačí urobiť jednoduché výpočty, aby ste pochopili, o koľko musíte blok posunúť, aby ste ho vycentrovali. Na stredných a veľkých obrazovkách ho treba posunúť o 4 stĺpce doľava a na malých o 3 stĺpce. Takto to vyzerá:
Trieda col-md-offset-4 hovorí: na stredných a veľkých obrazovkách posuňte rámček doľava o 33 % šírky nadradeného kontajnera (1/3 výplne vľavo, 1/3 šírky poľa, ⅓ výplne vpravo, vycentrovať sa).
Trieda col-xs-offset-6: Na extra malých a malých obrazovkách posun doľava o 25 % (ľavá výplň ¼, šírka bloku ¼, pravá výplň ¼).
Dúfam, že pochopíte podstatu a ak je to potrebné, použijete tieto triedy.
Bootstrap komponenty a príklady ich použitia
Gratulujem ti. Práve sme prešli najviac dôležitá téma, spojené s rámcom. Dôležitá je práve mriežka a práca s ňou. Práca s komponentmi už spočíva v tom, že jednoducho prejdete do dokumentácie, skopírujete tam kód požadovaného komponentu a v prípade potreby si ho zmeníte. Ale aj tak uvediem ďalšie príklady použitia komponentov.
Rýchle nadnášanie a odtekanie
Triedy ťahať-vľavo a ťahať-pravé vám umožňujú rýchlo nechať akýkoľvek blok plávať jeho zatlačením doľava alebo doprava. Nezabudnite zrušiť zábal. Na to môžete použiť triedu clearfix.
Bootstrap: Horizontálne responzívne (mobilné) menu
Nasledujúce komponenty pridáme priamo do šablóny, takže ak chcete s kódom pracovať, a nielen čítať, postupujte podľa všetkých krokov za mňa.
V skutočnosti je na Bootstrape veľmi jednoduché vytvoriť nielen adaptívne menu, ale aj takzvané mobilné, ktoré je na malých obrazovkách úplne zbalené a skrýva sa pod jedným tlačidlom. Tento prístup možno vidieť u mnohých adaptívne šablóny a v skutočnosti je to veľmi jednoduché implementovať. Príklad kódu mobilného menu je v dokumentácii, vezmem ho odtiaľ a trochu ho prerobím.
Takže prvá vec, ktorú urobím, je odstrániť blok hlavičky, pretože naša ponuka bude v skutočnosti hlavičkou v prípade mojej šablóny. Kód ponuky musí byť umiestnený pred celým obsahom stránky, dokonca aj pred kontajnerovým blokom. prečo? Áno, teraz sami uvidíte, že mriežka je už zabudovaná do navigačnej lišty. Takže tu je kód:
Skutočnosť, že existuje veľa kódu, sa toho nebojte. Takto vyzerá stránka teraz:
Ak však vaša ponuka nezaberá celú šírku obrazovky, má zmysel ju vycentrovať. Ak to chcete urobiť, mali by ste vytvoriť dodatočný obalový blok pre menu, ktorý by mal byť umiestnený za blokom s triedou kontajnera-fluid. Nezabudnite zatvoriť tento blok. Dal som tomu triedu navbar-wrap. Tu sú na to štýly:
To znamená, že môžete jednoducho obmedziť šírku a stred. Buď najprv vymeňte nádobu-tekutinu za nádobu .
Ako vidíte, do ponuky sme pridali logo, dve jednoduché položky, rozbaľovaciu položku a vyhľadávací formulár. To znamená, že existuje veľa prvkov. Ponuku si môžete ľahko prispôsobiť pre seba pridaním vlastných tried. Ale zatiaľ je mojím cieľom len ukázať vám tento komponent.
Takto bude ponuka vyzerať na zariadeniach so šírkou obrazovky menšou ako 768 pixelov:
Ako vidíte, ponuka sa zrútila. Otvorí sa po kliknutí na tlačidlo v pravom hornom rohu. Na obrazovke zostalo len logo.
Rozbaľovacia ponuka
Zároveň z vyššie uvedeného príkladu môžete pochopiť, ako sa v Bootstrape vytvára položka rozbaľovacej ponuky, vytiahneme tento kód, aby ste sa bližšie pozreli:
Takže kontajner pre rozbaľovaciu položku je bežná položka zoznamu s triedou rozbaľovacej ponuky. Vo vnútri sa nachádza hlavný odkaz, kliknutím na ktorý sa otvorí rozbaľovacia ponuka. Je veľmi dôležité jej napísať údajový atribút, ktorý vidíte v kóde, bez neho nebude nič fungovať. Musíte sa tiež uistiť, že súbor bootstrap.js je súčasťou webových stránok.
Rozpätie s triedou vsuvky nie je nič iné ako šípka, vďaka ktorej môžete pochopiť, že položka je rozbaľovacia, ale pod samotnou ponukou sa tvorí štandardný zoznam s odrážkami. To je všetko, všetko je celkom jednoduché, tento kód môžete použiť na implementáciu rozbaľovacích položiek.
Pridanie Breadcrumb pomocou Bootstrap (Breadcrumbs)
V mnohých obchodoch nájdete takzvaný blok strúhanky, ktorý obsahuje plná cesta na aktuálnu stránku. Pomocou rámca je to tiež jednoduché, pozrite si kód:
V skutočnosti stačí uviesť triedu strúhanky do očíslovaného zoznamu a zadať do neho obvyklé položky zoznamu. Mimochodom, vycentrujem nadpisy druhej úrovne v šablóne (treba to napísať v css):
H2( zarovnanie textu: stred; )
Ak sa chcete nejako zmeniť vzhľad strúhanka, stačí odkázať na css selector.breadcrumb . Farbu pozadia môžete odstrániť napríklad takto:
strúhanka (pozadie: priehľadné; )
Takto vyzerá stránka teraz:
Bootstrap tabuľky
Štandardne sa tabuľka roztiahne tak, aby vyplnila celé okno, takže ju zabaľte do rámčeka s obmedzenou šírkou, aby ste obmedzili veľkosť. V predvolenom nastavení to vyzerá hrozne, ale ak pridáte triedu tabuľky do značky tabuľky, všetko bude oveľa krajšie:
![](https://realbazar.ru/wp-content/uploads/2020/03/" alt=)
| (Dátum) | (čas) | (Názov) ((Počet prístupov)) |
Pre čítanie správ zadajte špeciálnu triedu:
(názov)
Krok 3. Formulár na zaslanie odkazu na novinky.
Aj tu je všetko jednoduché, Bootstrap ich ponúka hneď niekoľko vopred pripravené štýly formuláre: bežný formulár, jednoriadkový formulár, vyhľadávací formulár ... Potrebujeme druhý, dokončíme ho v našom kontajneri pred stolom:class="span10"- Bootstrap zahŕňa vytvorenie rozhrania založeného na mriežke s 12 stĺpcami, naše prvky s ňou možno zarovnať. Vedeckým pokusom a omylom som dospel k šírke vstupného poľa 10.
Krok 4,5,6. Čiapka.
Moja predstava o tom, ako by mala vyzerať užívateľsky prívetivá stránka, je minimalistická: všetko, čo nie je potrebné, je skryté, všetko, čo sa skryť nedalo, je bledé. Skryjeme formuláre v rozbaľovacej ponuke, odkazy na rss a rozšírenie Chrome zbledneme. To všetko zabalíme do hlavičky, ktorú prilepíme na vrch stránky (class = "navbar navbar-fixed-top»):...
Samotné formuláre:
...
Dôležitý bod. Aby to fungovalo, musíte pripojiť niekoľko skriptov:
Krok 7. Päta.
Pridanie hlavného kontajnera:vydanie 2012/02/19 23:49 *****
Výsledok
Epilóg
Twitter Bootstrap umožnil bez veľkého úsilia a znalostí, bez napísania jediného riadku css a bez veľkého lámania html kódu získať veľmi pekné prototypové rozhranie, ktoré sa ľudia nehanbia ukázať. Ak máte záujem, v ďalšom článku vám poviem, ako bez hlbokých znalostí PHP + MySQL (máte len základné programovacie zručnosti) implementovať funkcionalitu, ktorá vám umožní ukázať váš miliónový nápad nielen na papieri, ale aj v vo forme funkčného prototypu.Ďakujem za tvoju pozornosť!
UPD: Nechcem odstrániť tému v časti „Som PR“, odstránil som všetky nepotrebné odkazy
Ahoj! V tomto článku vám poviem, ako nainštalovať a pripojiť rámec Bootstrap. Môžete si prečítať o tom, čo je Bootstrap.
Štandardná inštalácia rámu
O štandardnej inštalácii som už povedal veľa v minulých článkoch. Všetko je tu jednoduché. Ideme na oficiálnu webovú stránku getbootstrap.com, kliknite na položku Začíname a vyberte úplne prvú možnosť. Sťahujeme teda plnú verziu bootstrapu so všetkými komponentmi js a css.
Bootstrap CDN- toto je schopnosť pripojiť framework z CDN úložiska bez sťahovania jeho súborov do vášho počítača. Prirodzene, v tomto prípade nemôže byť reč o žiadnom prispôsobení.
Prispôsobenie rámca
Faktom však je, že predvolený bootstrap obsahuje veľa komponentov a niektoré z nich vám jednoducho nemusia byť užitočné pri vývoji konkrétnej stránky. Napríklad budujete internetový obchod. Možno nepotrebujete modály a popisky a nepotrebujete veľa css komponentov. V tomto prípade by bolo rozumné nezahrnúť tieto komponenty do rámca.
Alebo si vytvoríte jednoduchý blog. Povedzme, že v skutočnosti nepotrebujete vôbec nič, takže môžete nechať len sieťku a pár najdôležitejších komponentov.
Vybrať si len to, čo potrebujete, je profesionálny prístup k tvorbe webových stránok a používaniu Bootstrapu. V predvolenom nastavení je nekomprimovaná verzia css štýlov rámca v Najnovšia verzia váži 143 kilobajtov. A skripty majú viac ako 60 kilobajtov. Áno, ak kód skomprimujete, môžete dosiahnuť zníženie hmotnosti o 20-40%, no aj tak súbory nebudú najľahšie.
Ak napríklad zakážete všetky komponenty a ponecháte iba mriežku (toto sa robí veľmi často), hmotnosť css bude len 15-20 kilobajtov a v komprimovanej forme to bude o pár kilobajtov menej. Takže dosiahnete najvyššia rýchlosť a optimalizáciu vášho projektu.
Dobre, to bola len teória. Ak chcete prispôsobiť rámec, navštívte rovnakú oficiálnu webovú stránku a prejdite na Prispôsobiť.
Výber požadovaných komponentov
V prvom rade si tu môžete nakonfigurovať, ktoré komponenty chcete zahrnúť do svojej verzie. Bootstrap. Začnime s CSS:
Štýly tlačových médií– dopyty na médiá pre tlač. Ak neplánujete tlačiť stránky lokality, môžete ju vypnúť.
Typografia, kód, tabuľky, formuláre a tlačidlá sú všetko, čo si môžete v css sami upraviť, ak naozaj chcete. Samozrejme, bude to chvíľu trvať, ale ak je dizajn vašich prvkov veľmi odlišný od toho, čo framework štandardne ponúka, môžete všetky tieto css štýly vypnúť a napísať si ich sami.
Mriežkový systém V skutočnosti je to mriežka. Nevidím dôvod na to, aby som to niekedy deaktivoval, pretože toto je hlavná sila rámca. Práve vďaka mriežke ľahko prispôsobíte šablóny akémukoľvek zariadeniu a dnes, v dobe mobilnej prevádzky, je to mimoriadne dôležité. V žiadnom prípade ho nevypneme.
Responzívne nástroje- adaptívne utility, tie tiež odporúčam nikdy nevypínať. O adaptívnych utilitách si povieme v ďalšom článku, kde sa len bližšie pozrieme na gridový systém. Ide o triedy, ktoré umožňujú skryť prvok alebo ho zviditeľniť pri určitej šírke obrazovky. Veľmi pohodlné a užitočné.
Sú to napríklad veci ako skupiny zoznamov, lišty tlačidiel, ikony, panely, upozornenia, stránkovanie, chlebové omrvinky atď. Môžete tiež vypnúť písmo ikony. Toto by ste mali urobiť v prípade, keď ikony na stránke vôbec nepotrebujete, alebo pripojíte inú sadu. V skutočnosti by ste mali sedieť a premýšľať o tom, čo potrebujete zo všetkých prezentovaných komponentov a čo nie. Každá jednotlivá stránka bude mať svoj vlastný súbor, pretože všade je iný dizajn a funkčnosť.
Komponenty Javascript
Sú to rozbaľovacie ponuky, popisy nástrojov, modály, posúvače. Ak nič z toho nepotrebujete, vypnite to. V niektorých prípadoch môžu byť všetky komponenty naozaj užitočné, keď máte na svojom webe rozbaľovaciu ponuku a posúvač domovskej stránke a modálne okná. V niektorých prípadoch sa môžu hodiť iba 1-2 komponenty, potom nie je potrebné predlžovať kód, deaktivovať nepotrebné komponenty.
pluginy jquery
Tu môžete zakázať doplnky knižnice jquery, ktoré pomáhajú komponentom javascriptu správne fungovať. Ak teda na svojom webe nepoužívate posuvník, nepotrebujete doplnok na vytváranie karuselov, ak nepotrebujete popisy, vypnite tooltips.js atď.
Doplnok scrollspy sleduje polohu textu a v závislosti od toho zvýrazní jednu alebo druhú položku ponuky. Takáto funkcia je zvyčajne potrebná na vstupných stránkach, prakticky som ju nevidel na bežných stránkach. No a tak ďalej. Dobre si premyslite, čo potrebujete a čo nie.
Menej premenných
Ďalej sa pred vami otvorí obrovská položka, v ktorej bude množstvo podpoložiek s nastaveniami pre Menej premenných. Tu môžete zmeniť takmer všetko: farby, veľkosti písma, zarážky, počet stĺpcov v mriežke, výplň atď.
Samozrejme, aby ste to urobili, musíte poznať aspoň základy Less, alebo sa v týchto formulároch aspoň intuitívne orientovať.
Ak napríklad vidíte premennú @font-family-base, musíte aspoň intuitívne pochopiť, že je zodpovedná za názov písma, ktoré je základným písmom na stránke. No, premenná @font-size-base nastavuje základnú veľkosť písma. V predvolenom nastavení je v bootstrape 14 pixelov.
Všetky tieto polia môžete upraviť. Stačí zmeniť 14 na 20 a teraz si môžete stiahnuť rámec, ktorý má predvolenú veľkosť písma 20 pixelov. Podľa toho môžete okamžite upraviť veľkosť hlavičiek atď.
Nastavenie mriežky
Veľmi zaujímavé sú pre nás aj nastavenia mriežkového systému, tu sú:
Ako vidíte, počet stĺpcov a šírku zarážok medzi nimi môžete zmeniť v priebehu niekoľkých sekúnd. Variabilné grid-float-breakpoint nastaví bod, v ktorom sa mobilná ponuka zbalí do ikony.
Ak zmeníte hodnotu napríklad na @screen-md-min, potom pri šírke 991 pixelov alebo menej dôjde k prehýbaniu. Môžete tiež odstrániť túto premennú a zapísať hodnotu v pixeloch. Napríklad 520 pixelov. Potom dôjde k sklopeniu menu iba na smartfónoch a mobilných telefónoch.
Stránka prispôsobenia Bootstrap má v skutočnosti veľa nastavení, ale vo všeobecnosti tento spôsob prispôsobenia (pomocou stránky Prispôsobiť na oficiálnej webovej stránke) nie je najrýchlejší a najpohodlnejší. Ďalej vám ukážem najrýchlejší spôsob.
Stránku Prispôsobiť použite, keď potrebujete vykonať 2-10 úprav rámca alebo len deaktivovať potrebné komponenty. Ak budete meniť oveľa viac hodnôt, budete musieť použiť inú metódu.
V skutočnosti, keď nastavujete svoju verziu rámca, kliknite na veľké tlačidlo úplne dole na stránke. Skompiluje vám verziu Bootstrap a stiahne ju do vášho počítača. Potom už len stačí pripojiť a používať. O pripojení som už hovoril v predchádzajúcich článkoch (vrátane toho, ako to urobiť na WordPress).
Sťahovanie menšieho počtu zdrojov a ich úprava
Ako som povedal, ak potrebujete urobiť veľa úprav zdrojového kódu rámca a chcete zmeny vidieť okamžite, budete potrebovať menej zdrojov. Môžete si ich stiahnuť na rovnakom mieste ako plnú verziu frameworku – v sekcii Začíname.
Ak chcete pracovať s menej zdrojmi a upravovať ich, potrebujete:
Aspoň nejaká znalosť css a menej alebo iného preprocesora
Menej kompilátora (možno stiahnuť zadarmo)
Vlastne sa nebudem zaoberať prispôsobením cez menej zdrojov, ale toto je najviac najlepšia metóda, pretože nebudete musieť navštíviť stránku Prispôsobiť 100-krát a kompilovať ďalšie a ďalšie verzie rámca.
Téma bootstrap alebo zmena vzhľadu prvkov
Štandardne v plná verzia framework v priečinku css nájdete aj súbor bootstrap-theme.css. Nie je potrebné pripojiť sa k lokalite. Aké funkcie vykonáva? Súbor je potrebný výlučne na to, aby ste v prípade potreby zmenili štýly prvkov, ktoré potrebujete.
Rovnakú úlohu môže zohrať aj váš vlastný style.css, v ktorom môžete štýly aj prepísať. Bootstrap-theme nie je povinný súbor, slúži skôr na objednávku. Napríklad máte 3 súbory:
bootstrap.css- samozrejme, toto je kód samotného rámca;
bootstrap-theme.css- tu prepíšete štýly prvkov bootstrapu;
style.css- a do tohto súboru napíšte štýly pre vaše prvky.
Potom budete mať poriadok v kóde a v štruktúre projektu. Ale nikto vám nezakazuje vykonávať všetky operácie v jednom súbore - style.css a vôbec nepoužívať súbor témy.
Najdôležitejšie je zahrnúť súbor témy a svoj vlastný css do html označenia neskôr ako súbor kódu frameworku, aby boli štýly úspešne prepísané.
Príklad tematizácie
Ako som povedal, Bootstrap štandardne zväzuje súbor bootstrap-theme. Skúste to pripojiť. Podotýkam, pripojte sa po hlavnom súbore.
V predvolenom nastavení vyzerajú tlačidlá v bootstrape takto:
A takto sa zmení ich vzhľad po pripojení súboru k téme:
Ako vidíte, objaví sa mierny gradient. Podľa toho môžete prepísať kód v súbore bootstrap-theme a získajte svoje štýly pre tlačidlá. Možno sa však pýtate, prečo tieto zmeny neurobiť priamo v bootstrap.css? Faktom je, že neustále vychádzajú nové verzie rámca a ak sa rozhodnete pre upgrade, vaše úpravy sa budú ťažko implementovať v Nová verzia. Pre vývojára je dobrá forma nedotýkať sa zdrojového kódu, keď je možné ho vytvoriť samostatný súbor a popíšte tam zmeny. Je to oveľa inteligentnejšie a pohodlnejšie.
Ako nainštalovať nové témy Bootstrap stiahnuté z internetu?
Existuje pomerne veľa stránok, väčšinou zahraničných, kde si môžete zadarmo stiahnuť veľa tém a šablón. Aby sme sa vyhli nejasnostiam, uvažujme web vytvorený pomocou Bootstrapu ako šablóny a tému ako súbor pravidiel CSS, ktoré prepíšu štandardný vzhľad prvkov.
Takéto témy sa dajú stiahnuť napríklad na bootswatch.com/ a pomocou vyhľadávača môžete nájsť desiatky ďalších.
Všeobecný princíp inštalácie takýchto tém závisí od lokality, z ktorej si ich stiahnete. Ak si môžete stiahnuť vo formáte bootstrap-theme- skvelé, stiahnite si a pripojte sa. Napríklad na bootswatch si musíte stiahnuť bootstrap.css a nahradiť ním váš štandardný framework. Existuje aj variant s menším počtom zdrojov.
» zoznámili sme sa s frameworkom, rozobrali jeho výhody, v krátkosti zhodnotili jeho tzv. grid, teraz je čas precvičiť si používanie Bootstrapu.
Bootstrap si môžete stiahnuť z oficiálnej stránky getbootstrap.com. Na hlavnej stránke kliknite na tlačidlo Stiahnite si Bootstrap».
Po kliknutí sa prenesieme na stránku, ktorá ponúka viacero druhov stiahnutí. V tomto článku zvážime obvyklé stiahnutie plnej verzie rámca.
Po stiahnutí a rozbalení archívu dostaneme tri priečinky:
- css- priečinok so štýlmi
- JS- priečinok so skriptami js
- FONTS- priečinok s ikonami písma
Toto je celý rámec. Pre ďalšiu prácu pomocou Bootstrapu vytvorím priečinok s rovnakým názvom bootstrap , v priečinku vytvorím jeden prázdny súbor index.html a priečinok a súbor naplním spolu s rozborom frameworku v tomto článku a na konci príspevok dám link, aby ste videli výsledok. Ak to budete opakovať po mne, pochopíte, že práca s frameworkom je naozaj jednoduchá.
Zo stiahnutého frameworku potrebujeme celý priečinok fonts, jeden súbor štýlu z priečinka css s názvom bootstrap.css alebo bootstrap.min.css a podobne jeden skript z priečinka js s názvom bootstrap.js alebo bootstrap.min.js .
Rozdiel medzi súbormi s ".min." z tých bežných v tých súboroch s ".min." optimalizované, to znamená, že kód je napísaný v jednom riadku bez zalamovania riadkov a medzier, takže vážia menej ako zvyčajne a obsah súborov je úplne rovnaký.
Teraz si v mojom bootstrap priečinku vytvorím priečinok css, dám doň súbor bootstrap.min.css a vytvorím priečinok js, do ktorého dám bootstrap.min.js . Okrem toho v priečinku css vytvorím zatiaľ prázdny súbor style.css na pridanie vlastných štýlov.
Potrebné rámcové súbory boli presunuté a teraz budeme pracovať len so súborom index.html. Aby ste kód nepísali sami, prejdime k dokumentácii, na stránke sťahovania oficiálnej stránky nižšie je hotová HTML kostra dokumentu, skopírujte ju a vložte do nášho indexového súboru.
Náš súbor štýlu, skript js a knižnica jQuery sú už zahrnuté v kostre, ale ak nie na " bootstrap» šablónu, ale na niektorých vlastných potrebujete medzi značkami
pripojte štýlový súbor bootstrap.min.css a za ním vytvorený style.css.
Potom pred záverečnou značkou
Najprv zahrnieme knižnicu jQuery.
A po knižnici pripojíme skript js.
Vo všeobecnosti HTML kostra dokumentu vyzerá takto.
Prípravný proces sa skončil, Bootstrap je pripojený, môžete pokračovať a začať plniť našu WEB stránku komponentmi frameworku.
Ako používať dokumentáciu
Dokumentácia rámca je veľmi dobrá, čo uľahčuje jeho používanie. V hlavnom menu oficiálnej webovej stránky je niekoľko sekcií: Začíname», « css», « Komponenty», « JavaScript"A" Prispôsobiť“, na stránke každej sekcie v pravom stĺpci sú názvy rôznych komponentov, kliknutím na ktoré sa zobrazí ich popis a prípady použitia vo forme hotového kódu.
Ak ťažkosti s anglický jazyk, potom je na sieti niekoľko zdrojov s preloženou dokumentáciou, tu je adresa jednej z týchto stránok www.oneskyapp.com/ru/docs/bootstrap. Môžete použiť aj nejaký prekladač do prehliadača, preklad bude, samozrejme, pokrivený, ale podstata napísaného bude jasná. Vo všeobecnosti si stačí prečítať dokumentáciu, vziať vzorky kódu a precvičiť si.
Práca s Bootstrap Grid
Ako som povedal v minulom článku, mriežka funguje ako tabuľka vrátane riadkov .riadok a stĺpce .kol, stĺpcov môže byť maximálne dvanásť. Do triedy .col sa pridávajú predpony (lg, md, sm, xs), ktoré označujú šírku daný stĺpec pri konkrétnom rozlíšení obrazovky.
Zabaľte riadky so stĺpcami do bloku s triedou .kontajner alebo trieda .container-fluid. Rozdiel medzi nimi je v tom, že trieda .container má maximálnu šírku 1170 pixelov, zatiaľ čo trieda .container-fluid má neobmedzenú šírku, teda celú šírku obrazovky, aj keď je rozlíšenie obrazovky veľmi veľké. Úplné informácie o mriežke Bootstrap nájdete v sekcii dokumentácie " css».
Pomocou grid frameworku urobíme klasické rozloženie našej stránky (hlavička, obsah, bočný stĺpec a päta), na to vytvoríme tri riadky a štyri stĺpce, dostaneme tento kód.
HLAVIČKA
OBSAH
SIDEBAR
PäTA
Na oddelenie blokov som napísal ďalšie dve triedy: .block , .block2 a pridal som k nim pár pravidiel do vytvoreného súboru style.css.
Block( background: #eee; border: 1px solid #000; ) .block2( background: #ccc; border: 1px solid #000; )
Pridajme do nadpisov písmo ikony. V kapitole " Komponenty» vyberte ikony, ktoré sa vám páčia, skopírujte text pod obrázkom, tento text je trieda. Vytvorte značku vo vnútri značky názvu a prilepte skopírovanú triedu.
HLAVIČKA
Teraz nezaškodilo pridať nejaké menu. Ak to chcete urobiť, v sekcii Komponenty" ísť do " Navbar“, vyberte menu, ktoré sa vám páči, skopírujte kód a po úvodnom štítku
, vložiť.Zostáva naplniť obsahu t" a " bočný panel". Všetko robíme podľa rovnakej schémy: vyberte komponent v dokumentácii, prečítajte si popis, skopírujte a vložte ho na správne miesto. Pridám formulár a tlačidlo, kliknutím na ktoré sa otvorí modálne okno s tabuľkou.
Len tak sme za 5 minút načrtli najjednoduchšie rozloženie stránky, adaptívne pre všetky zariadenia, pričom kód prakticky nepíšeme sami. Kliknite na odkaz a pozrite si výsledok.
Týmto končím článok. Zvážili sme len malú časť funkčnosti rámca, ale myslím, že rozumiete, ako pracovať s Bootstrapom. Ďalším krokom je zmeniť štýly rámca tak, aby vyhovovali vašim potrebám a stiahnuť si len tie komponenty, ktoré potrebujete. To všetko analyzujeme v článku "
Načítava...