Ismerete bootstrap
Szia, kedves barátaim! A mai cikkben szeretnék, hogy meséljek a modern CSS keretrendszer - Bootstrap. Aki nem tudja, a keret - keret a projekten, egy előre beállított funkciók és megoldások a gyors és hatékony fejlődését.
Ez a CSS keretrendszer óriási listája CSS tulajdonságok stílus, a végrehajtó rendelkezések a szükséges elemeket az oldalon bármilyen módon, minimális erőfeszítéssel. Sőt, csak annyit kell - meg kell adnia az osztályok és attribútumok oldalelemek, hogy a módosítani kívánt révén a Bootstrap eszköz. De erről bővebben később ..
Csakúgy, JQuery UI (User Interface) be van építve a keretet, amely könnyen segíthet létrehozni különböző vizuális hatások: modális ablakok, tippek, csúszkák, és hasonlók. És mindez tulajdonságai alapján és Bootstrap sablonokat.
Csatolni keretében a projekthez, akkor töltse le az archívumot a stíluslapot, és JQuery Bootstrap könyvtárban.
letöltés Bootstrap
Bontsa ki a tartalmát a letöltött archív be a projektbe. Az archívum három mappa js, css, img. Osszuk tartalmának szerkezete szerint a projekt, csak az egyszerűség kedvéért.
Img mappa, ugyanaz lehet helyezni a könyvtárban stílusok /. Ez a mappa tartalmazza a sprite ikonokat fekete és fehér színben. Ezek az ikonok az egyes tulajdonságok css stílus elemeit forma, listák, stb
Az elmélettől a gyakorlatig?
A teljes Bootstrap eszköz van egy nagyon nagy és rugalmas funkciók dolgozó elemek a weboldalon. Nézzük néhány példát annak érdekében, hogy átfogó képet munkáját.
Létrehozása site felépítése
Vegyük például a tartály (wrapper) és a helyén fog tenni a megfelelő mennyiségű lebegő oszlopok.
Mit látunk? Volt egy két oszlopos elrendezés a helyén, egy úszó szerkezet fix szélességű. Mi a logika? Az alapértelmezett elrendezés van osztva 12 oszlopok (span *) c alapértelmezett szélessége 940px.
Kezdeni, arra kérjük a blokk osztály konténer konténer - azt mondja, hogy a szerkezet a blokk lesz úszó, hanem egy fix szélességű 940px. Továbbá, a tartály belsejében, kérjük a blokk az osztály sorban - ez határozza meg már a szülői egység sor a lebegő rögzített szélességű oszlopokat. Most belül a szülő elem az egyes oszlopban adja meg a div az osztályban span *, ahol * - az első számú oszlop elrendezés (a 12), ami elfoglalja a készüléket.
Az én például, a bal oldali oszlop blokk 4, 8, és a jobb oldali, a arány és tartalmazzanak egy stabil két-hasábos elrendezés.
Ne felejtsük el, hogy a több gyermek oszlopok nem haladhatja meg az értékét a szülő. Azaz, egy elem egy osztály nem ágyazható span4 5 span1 span5 blokk vagy blokkok. Azt hiszem, hogy a logika.
Ha létre kell hozni egy gumi elrendezést használja az osztály együtt .container osztály .conteiner-folyadékot. és így, ahelyett, .row.row-folyadékot. Ez lehetővé teszi a számítás blokk szélessége képest a szélessége a szülő elem.
Ahhoz, hogy használni ezt a funkciót, meg kell csatlakoztatni a speciális meta-tag, valamint egy speciális stílust lap, amely szintén része a letöltött fájlt.
Így, ha szeretné, hogy a webhely különböző eszközök különböző felbontású, szükséges, hogy egy stíluslap bootstrap-responsive.css és gumi elrendezés (folyadék osztály).
Bármilyen alakú asztal - ez csak
C a bootstrap, akkor könnyen létre bármilyen formája, táblázatok a honlapon, akkor a helyes utat.
Létrehoztunk egy szabályos táblázat lekerekített sarkú, jó olvashatóság, ha lebeg a húr vannak emelve.
Mindaz, amit hozzáadásával érhetjük el a címkét