Bootstrap 3
Bootstrap 3 - választható keret a modern webhelyek kialakításának gyors létrehozásához
Lehetőség van, hogy működjön együtt a hagyományos statikus HTML-Butstripa lehetőségeket, és próbálja meg, például, hozzon létre azt egy egyedi sablont a helyén futó CMS (később fogunk beszélni létrehozását sablonokat Joomla 3 Bootstrap alapon). Azonban nincs szükség különleges ismeretekre a Html és a CSS-ben.
A Bootstrap 3 jellemzői és mi a megfelelő kialakítás?
Készítette ezt a frame mérnököt és tervezőt a Twitter cégtől, így nagyon gyakran használja a "Twitter Bootstrap" nevet. Nagyon népszerű a világon, itt találhatók az itt létrehozott webhelyek. Nos, a keret hivatalos honlapján is van portfólió.
Most már felajánlotta a Bootstrap 3. letöltését, amelynek számos különbsége van a korábbi verziókhoz képest:
- Eredetileg mobileszközökön készültek, olyan helyszínekre látogattak, amelyekkel egyre gyakoribbak. Az új keretrendszer rácsát úgy tervezték meg, hogy először testreszabja a kis képernyők kialakítását, és csak ezt követően bővítse a szélesvásznú eszközöket.
A bootstrap 3 csak egy hálózati rendszer - reagál (ez volt két: érzékeny és alkalmazkodó De annak működését jelentősen bővült a nagyobb számú hálózatok különböző méretű ..
Mi a reagáló tervezés? Az a tény, hogy a felhasználók csak a helyhez kötött számítógépekről és a laptopokról érkeztek meg, csak feledésbe merültek. Most, a tárgytól függően, a mobileszközök forgalma a teljes összegtől akár egytizedig terjedhet. Már nem lehet figyelmen kívül hagyni a látogatók kényelmét.
Kell-e dolgozni a válaszadó tervezéssel (Bootstrap vagy versenytársai segítségével)? Amikor mindkettő. Mindez attól függ, hogy milyen problémát fog megoldani. Elvileg a webhely ügyfélrészének tervezési kérdése többféle módon megoldható:
- Vásároljon egy kész sablont vagy témát a CMS-hez, cseréljen valami apróságot (sapka, logó, szín), és azonnal kapja meg a szükséges eredményt
- Felvehet egy olyan tervezőt, aki egyedülálló dizájnt fog kinézni, és felhívja a webhelyére. Igaz, ez a cselekmény sok pénzt ér. Például egy közepes szintű stúdiót alkalmaztam, ahol csaknem százezer rubelt kértek a blog kialakításának frissítéséért. Megértem, hogy a szabadúszók alacsonyabb árcédulával is megtalálhatók, de minden az ár / minőség aránytól függ.
Nos, a harmadik lehetőség, amely kompromisszumot jelent a fent ismertetettek között, egy megfelelő keret lesz (különösen a Bootstrap). Az a tény, hogy használatával a munka egy része már elvégezhető az Ön számára. Nem kell gondolkodnod a formatervezés egyes szempontjairól. Az oldal elrendezéséhez elegendően rugalmas háló lesz (a LESS CSS - dinamikus stílusnyelv használatával).
Megjelenés Bootstrap testreszabható az ízlése szerint. Ez nem igaz, amikor azt mondják, hogy az ezen a kereteken kialakított webhelyek megegyeznek. Mindez attól függ - az a lehetőség, hogy a tenger egyéni, de sokan egyszerűen nem foglalkoznak vele.
Ha a reaktív tervezést alkalmazza, a stíluskód azonban komolyan nagyobb és bonyolultabb lesz, mint anélkül, hogy sok különböző helyzetet kell biztosítania a különböző stílustervezéssel. Ezenkívül meg kell tanulnod a keretrendszerrel való együttműködés alapjait. de gyorsan elvégezheti azt, amire szüksége van (beleértve a folyamatot a streamen). Amint azt a jól ismert rajzfilmben elmondták: jobb egy órát veszíteni, majd öt percen belül repülni (lábak, mancsok, farok). A projekt kiváló minőségű lesz.
Ez a keretrendszer lehetővé teszi az osztályok egyszerű hozzáadását (olvassa el az osztály és az id attribútumokat) a Html elemek elemeire, hogy nagyon hatékony terveket alkalmazzon rájuk. Például, ez a táblázat fog kinézni, amikor asztaltáblázatot ad hozzá a táblázat címkéjéhez:
Az ehhez az osztályhoz tartozó stílusokat nem kell előírni, mert a rendszer már regisztrálta magát a bootstrap stílusfájljaiba. Nagyon kényelmes és gyors. Így például gombokat hozhat létre két lapon a normál linkcímkékből vagy a gombtáblák használatával, és hozzáadhatja hozzájuk a szükséges osztályokat:
Akkor osztályok segítségével nagyon könnyű létrehozni egy tag-alapú HTML felsorolja a különböző menük (navigációs vezérlők), legördülő listák, lapszámozás (lapszámozás), pop-up, valamint tippeket és még sok más, hogy tudsz ezen az oldalon a hivatalos honlapon:
Ja, és ugyanebben az elrendezés lapok különböző oszlopok száma ezzel keret végezzük szó gyerekjáték - megint a szokásos adagolása megfelelő osztályok konténerek.
Töltse le a bootstrap-ot és vizsgálja meg fájlszerkezetét
Tehát töltse le a Bootstrap 3 kereteket a hivatalos webhelyen - GetBootstrap.com (van egy nem hivatalos orosz tükör mybootstrap.ru, ahol részletes bemutatást talál a munkához).
Csak adja meg, hogy a lap «Customize» (orosz verzió „Change és letöltés”), akkor kiválaszthatja, hogy mely elemek és jQuery plugin van szüksége, valamint hogy módosítsa a változók felelős színek, betűtípusok, űrlapok stb dolgokat. Ezután mentheti az összeset, és töltse le a Bootstrap-ot az alábbi gomb segítségével.
Véleményem szerint azonban a legjobb megoldás az, hogy megértsem a keretrendszer munkáját, és megváltoztattam néhány paramétert a munka során. Ráadásul a vizsgálatot a semmiből kezdjük, így mindent meg kell kapnunk, ami elérhető a Buttrixban. Így menj a szabványos csomag letöltési oldalára (az "Első lépések" lap), és kattints a "Bootstrap letöltése" gombra:
Lássuk, mi található a bootstrap CSS mappában. Most hat fájl létezik, de csak a közelmúltban volt négy. Valójában ezek három, három fájlból állnak. Például bootstrap.css bootstrap.min.css fájlt, és tartalmazza az azonos CSS kódot, de abban különböznek, hogy a kódot a fájlban bootstrap.css könnyen olvasható, a formázott megfelelően:
Így a bootstrap.min.css fájl a file bootstrap.css fájl negyedévé lesz a funkcionalitás elvesztése nélkül. Nos, a bootstrap.css.map fájl a közelmúltban megjelent a Bootstrap 3 disztribúcióban. Amennyire én értem teszi a találkozó az én gyér agy - ez lehetővé teszi a fejlesztési eszközöket (például a beépített böngésző vagy Chrome Firefox) dolgozni tömörített CSS kódot, mintha nincs tömörítve. Általában egy sáros dolog, amit még nem értettem.
Ugyanez mondható el a bootstrap-theme.css és bootstrap-theme.min.css fájlokról. A Buttream második változatában nem voltak. Az a tény, hogy a Bootstrap 3 úgynevezett "lapos tervezéssel" jön (nincs színátmenet, árnyék stb.). Ezért itt hozzáadta a saját témáját további stíluslapokként, amelyeket külön is csatlakoztathat, és további elemeket is hozzáadhat webhelyéhez.
A JS mappában van két java script fájlt, és bootstrap.js bootstrap.min.js, amelyek csak abban különböznek, hogy az utóbbiak eltávolítjuk az összes szóköz és sortörés, ezért a kód már szinte nem olvasható az emberi szempontból, hanem Nem bántottam semmit a böngésző (gép) szempontjából. És persze könnyebb lett. A fájl mellett a Bootstrap használatakor valószínűleg néhány js fájlt kell használnunk, de később is többet.
Csatlakoztassa a CSS és a JS bootstrap fájlokat a Html fájlba
Így átnéztük az összes olyan fájlt, amely e keretrendszerhez tartozik. Most elkezdheti használni, hogy létrehozza az első html oldalt, hogy megértse a folyamat szépségét. Vegyünk például egy egyszerű, üres internetes dokumentumot, amelynek alapvető jelölője (az úgynevezett "hal").
Remélhetőleg, ez a szerkezet már tapasztalt és megérteni, hogy! Doctype segíti a böngésző, hogy megértsük, hogyan kell értelmezni a rögzített alábbi kódot és címkéket fej és a test alakját, illetve hivatalos „fej” (amely nem jelenik meg a weboldalon) és a „test” (ami közvetlenül megjelenik az oldalon).
Most a "fish" nevű index.html címkével adja hozzá a következő metataget (a fej címkék közé, például a meta charset területére):
A meta-címke nézetablak általában mindig a reaktív kialakítású munkával jár. Miért van szükség? A képernyő méretezéséhez helyesen. Ebben az esetben nem számít, hogy milyen típusú eszköz származik (nagyméretű vagy kicsi) - a weboldal méretétől függően változik az eszközön.
Csatlakoztassa a stíluslapot a Bootstrap mappából
Akkor lesz csatlakozni a HTML dokumentum CSS fájlt Bootstrap arzenál hiperhivatkozások link service tag jelzi, hogy egy relatív elérési utat bootstrap.min.css (a mérete kisebb).
A bootstrap disztribúcióban elérhető bootstrap fájlon kívül létrehozzunk egy másik saját stílusunkat is, amelyek azonnal összekapcsolhatók és regisztrálhatók a "header" index.html fájlban.
Nos, valójában érdemes egy üres manual.css fájlt létrehozni és másolni a keretünk CSS mappájába.
Ennek eredményeképpen a index.html így fog kinézni:
A jQuery könyvtár csatlakoztatása
Most elkezdhet csatlakozni a webkamera java-script fájlokhoz. Szükségünk van rájuk, hogy az index.html fájl a Bootstrap 3 programmal működjön együtt. Az egyik ilyen fájl js lesz a keretből, a másik pedig a jQuery könyvtár. Kezdjük vele. A maga módján egy olyan keret is, amelyet mindenhol használnak (a CMS-ben, a megfelelő tervezési keretekben és számos internetes oldalon).
JQuery könyvtár csatlakozni a HTML dokumentum lehet két módon - akár betölteni maga a könyvtár, és olvassa el, vagy használhatja a jQuery könyvtár szállítási hálózat (CDN). Az első esetben, kapsz egy garancia arra, hogy a webhely működik, amíg ez a könyvtár mindig terhelés (Ön nem függ a külső forrásoktól, amelyek potenciálisan elérhetetlenné válnak abban az időben).
A jQuery a CDN hálózaton keresztüli összekapcsolásának előnye, hogy a böngésző gyorsítótárában lévő felhasználó már tárolhatja a könyvtár fájlját. mert A jQuery nagyon tisztességes, de lehetővé teszi a projekt számára, hogy sokkal gyorsabban megnyíljon az ilyen felhasználók böngészőiben. A könyvtár szállítási hálózata ritkán offline, ezért a bonyodalmak valószínűsége a CDN-n keresztüli kapcsolat használatának köszönhetően rendkívül alacsony.
Hogyan lehet mindezt megvalósítani a gyakorlatban? Menjen a hivatalos jQuery könyvtároldalra - jquery.com. Tehát, ha le szeretné tölteni ezt a könyvtárat, akkor kattintson a képernyő jobb oldalán található nagy gombra.
A JQuery két verzióval rendelkezik - 1.x és 2.x. A támogatott böngészők alapján valószínűleg jobb az első verzió használata (támogatja az IE 8-at, amely még mindig elég gyakori a hálózati felhasználók számítógépén).
A java-script fájlok hívásának kódja általában a fej-címkék közé kerül. De ez nem teljesen helyes. Jobb forgatni a szkripteket a záró testcímke előtt. Miért? Az a kérdés, hogy például a stílusjelöléshez tartozó fájlok hívását még a tartalom betöltése előtt vagy azzal párhuzamosan is meg kell tenni, hogy helyesen jelenjen meg. De a JS fájlok felelősek az oldal funkcióihoz, és nem azért, hogy megjelenjenek. Tehát a dokumentum teljes betöltése előtt ez a funkció nem lesz szükséges, ezért nincs szükség arra, hogy a Java-script fájlok meghívását a Head címkék közé helyezzük.
Ha azonban a JS-hívás még mindig be van helyezve a "fej" -be, akkor az oldal megtekintéséhez teljes betöltést kell várnia. Leszűlni fog az oldal, és ez komolyan csökkenti vonzerejét a látogatók számára. De ha beilleszt egy jQuery hívást a dokumentum alján (a záró karosszéria címke előtt), akkor az összes többi információ betöltésre kerül a könyvtárba. Egy gyorsabb és érzékenyebb webhely érzése lesz.
Az univerzális jQuery híváskód (a könyvtár letöltése a szerverre) a fentiekben ismertetett jQuery könyvtári szállítási hálózat (CDN) segítségével fog kinézni:
Csatlakoztatjuk a bootstrap és a file response.js JS fájlt
Nos, mi kell csatlakozni a index.html JS fájl a Bootstrap 3 (jobb, mint az, amelyikben a kód tömörített méretének csökkentésére, azaz a szó min a cím). Így fog kinézni:
Valószínűleg, egyértelmű, hogy ha azt akarjuk, hogy töltse be a jQuery könyvtár a szerver, akkor kell, hogy töltse le, tedd a JS mappát, és regisztrálja pontosan ugyanazt a kódot, hogy hívja őt, mint a bootstrap.min.js. De még mindig azt tanácsolom, hogy vegye le a CDN-ről, mint azt egy kicsit láttam.
Vegye figyelembe, hogy a jQuery hívás után a bootstrap.min.js híváskódot kell elhelyezni, mert ez a könyvtár függvénye, és meg kell tölteni azt megelőzően.
Szóval még meg kell adnunk a response.js kapcsolatot. Mi ez? Ez a szkript célja, hogy segítsen az Internet Explorer régebbi verzióinak megérteni a Html 5-öt, és megoldani más kompatibilitási problémákat ezzel a "furcsa" böngészővel. Itt töltheti le ezt a fájlt - van még egy tömörített és közönséges (olvasható szem) verzió.
Csak kattintson a reply.min.js gombra, és másolja a kódot a megnyíló ablakban. Ehhez azonban nem könnyű, mert ez egy hosszú sor. Véleményem szerint könnyebb lesz kattintani a "Nyers" gombra. Ebben az esetben az oldal csak a reply.min.js fájl kódjával nyílik meg, amely könnyen kiválasztható és másolható a billentyűzet Ctrl + A gombjával:
Az index.html fájlban a response.min.js kapcsolat így fog kinézni:
De van egy árnyalat. Ezt a kódot már be kell illeszteni a dokumentum "fejébe", azaz a címkefej között. ezért a fejlesztők azt javasolják. Ellenkező esetben néhány régebbi verziói Explorer, amíg az indítási respond.min.js, a felhasználók láthatják a pillanatban nem a stilizált tartalommal (csak formázatlan szöveg és RAW). Itt van, hogy elkerüljék ezt, és tegye a választ a response.min.js fájlra, mielőtt letöltené a weboldalt.
Ennek eredményeképpen a Bootstrap 3 mappában található fájl index.html a következőképpen fog kinézni:
Most van mindent, hogy építsenek egy oldalt a bootstrap-on. Minden szükséges java scriptünk és stílusunk van, amihez kapcsolódtunk. Megkezdheti a webhely építését.
És itt van a folytatás: a Bootstrap 3 rácsrendszer és egy példa a vele való munkára - 2. rész (de még mindig feliratkozol - sokkal érdekesebb és hasznos lesz).
Sok szerencsét neked! Hamarosan találkozunk a blog KtoNaNovenkogo.ru oldalain