Bootstrap 3 - a lényeges elemeket létrehozni egy rács, az informatikai vezető
Ebben a leckében megnézzük alapelemeit Bootstrap (konténerek, sorok, blokkok álló Bootstrap oszlop) létrehozásához szükséges mesh weboldalak a helyszínen. Ez a folyamat egyik alapvető lépéseket, amelyek megteremtik a helyszínen, ez a fejlesztés a rács, kezdjük építeni a weboldal felületén, miután a design.
A fő elemei a platform Twitter Bootstrap 3 létrehozni egy rácsot az oldalon:
- Konténerek (div elemek ".container" vagy ".container-folyadék" osztály);
- Sorok (a div elem ".row" osztály);
- Blocks div. Bootstrap álló oszlopok (a div elem a ".col - # - $" vagy több osztály ".col - # - $").
Konténerek (div elemek „.container” vagy „.container-folyadék” osztály)
Konténer az „alapot”, ahonnan elkezdi, hogy megteremtse a nettó weboldalt. Twitter Bootstrap tartályok 2 típusú platform:
Így, a tartály úgy van kialakítva, hogy létrehozza lyukbőségű. Ezen túlmenően, ez adja meg a belső pozitív árrés annak bal és jobb oldali a tartalom kerül bele. A beállított érték egyenlő 15px behúzás ezt úgy lehet elérni, mivel a CSS tulajdonságokat „padding-left: 15px” és a „padding-right: 15px”.
Sorok (a div elem ".row" osztály)
Soraiban hogy hozzon létre egy hálózatot használják, csak elhelyezni őket blokkok div. álló Bootstrap oszlopok (
És most nézd, akkor tegye vissza a soraiban bármilyen sejt a rács. Sorok lehet helyezni egy tartályba, és blokkolja div. álló Bootstrap oszlopok.
Miért? Ez mind annak a ténynek köszönhető, hogy a tömbök div. álló Bootstrap oszlopok pozitív padding. És ha nem teszik fel, ahol akar, akkor megvan a rossz elrendezés, azaz néhány helyen a rajtrácson határtól a tartalom lesz 30px, más helyen lehet kapni x 45 képpont, stb Ahhoz, hogy ezt a sorozatot kell használni, hogy megakadályozzák.
Soraiban - gátolja div. hogy negatív externáliák bemélyedést a jobbra és balra egyenlő 15px (margin-left: -15px és margin-right: -15px). Ezért, ha a szám rendezett egy blokk, ez határértéket meghaladja a blokk bal és jobb 15px.
Ennek eredményeként, egy számot egy edénybe helyezik, vagy egység div, álló Bootstrap oszlopok kompenzálja pozitív padding ezen elemek Bootstrap bal és jobb (padding-balra: 15 képpont és padding-right: 15 képpont) a negatív külső behúzás.
Blocks div. álló Bootstrap oszlopok
Blocks div. álló Bootstrap oszlopok úgy vannak kialakítva, hogy megteremtse a sejtek a rács. Így bármely sejt a rács osztható több sejt. Hadd illusztráljam ezt a pontot egy kis példa részletesebben.
Szakaszai létrehozása háló:
- Az első lépésben létrehozunk egy tartályba. Ezen a ponton, a rács áll egyetlen sejt;
- A második szakaszban szét a sejt a szükséges számú sejtek (például, egy sapkát, a bal blokk, jobb oldali véghasáb, a fő tartalom és a pince a oldal);
- A harmadik fázisban, például tudjuk tovább törni a sejt „Oldallábléc” még néhány sejteket. Hasonlóképpen, ha szükséges, akkor legyőzni minden sejt a rács.
Ezen kívül, meg kell emlékezni, hogy a szakítás a sejt több cella, akkor kell elhelyezni egy sorban (a div az osztályban „.row”). Ez a követelmény kötelező, mivel blokkok álló Bootstrap oszlopok belső pozitív árrés a bal és a jobb oldali 15 px, amely kompenzálni kell. Ha ez a követelmény nem teljesül, akkor már megtört a rácsos szerkezetet.
Továbbá, ha forgalomba a div blokkokat. Bootstrap álló oszlopok egy sorban meg kell tudni, hogy az egyik sorban egy szám kerül pontosan 12 oszlopok Bootstrap. Ie blokkok, hogy ne kerüljenek bele az első sorban, vannak elrendezve a következő sorban, stb De van egy nagyon fontos pont, ami összefügg azzal a ténnyel, hogy ezek az egységek nem mindig csomagolja a következő sorban a sorozat. Ez annak a ténynek köszönhető. amely blokkolja div. álló Bootstrap oszlopok úszó (CSS "float: left" tulajdonság).
Nézzük meg ezt a fontos kérdést ebben a példában:
A képen bemutatott látható, hogy a száma 1 sorban 2 blokk (blokk №1 és №2), az összeg az oszlopok, amely 12. Ebben az elrendezés „Block №3” kell elhelyezni a 2. sorban, de egy valós helyzet, hogy ez nem fordulhat elő. És rögzítse a rács, van egy speciális osztálya „clearfix” a Twitteren Bootstrap 3 platform, hozzá kell adni az üres blokk div. Ezután blokk div class „clearfix” elé kell helyezni, a blokk, amely meg kell kezdeni egy új sort a sorban.
Ahhoz, hogy hozzon létre egy blokkot div. Bootstrap álló oszlopok, szükséges hozzá az osztály „.col - # - $”, ahol:
Például:
tömb
- xs a készülék szélessége 6 oszlopok Bootstrap, azaz 50% -át a szélessége a szülő elem;
- SM a készülék szélessége megegyezik négy oszlopot Bootstrap, azaz 33,33% a szélessége a szülő elem;
- MD, a készülék szélessége megegyezik a három oszlop Bootstrap, azaz 25% -át a szélessége a szülő elem;
- a készülék LG szélessége megegyezik két oszlopot Bootstrap, azaz 16,67% a szélessége a szülő elem;
Példa létre egy hálós weboldal
Hozzon létre egy háló egy weboldalt a Bootstrap platform, amely egy fejléc az oldalon, a bal blokk, a fő egység és a pincében a helyszínen.
Szia, most kezd fejleszteni bootstrap és kérje, hogy segítsen egy pár kérdést.
1. Van egy elrendezést, ahol a sapka szélessége 1920px és 1920px széles pince is. A pince és a kupak képet. Ő munkaterület 1000px oldalon. Hogyan készítsünk egy elrendezést egy képet a fejléc, és a pince igazítani.
2. Kell-e szabni a rács egy 1000px Bootstrap oldalon, vagy használhatja a szabványos rács (hogy a bal és a jobb oldali blokkok col szélességű - * - 1, és használja a munkaterület col - * - 10)
itchief.ru/assets/uploadify/b/3/9/b3909068e371160c94d8e94da3dc4ae7s.jpg
Igen, akkor a szabványos Bootstrap rács. Azonban szükséges korlátozni a szélesség. Ezt meg lehet tenni az alábbiak szerint:
1. Készítsen 3 blokk:
2. Korlátozza a szélessége a CSS-tulajdonság max-width:
3. A képek adhat egy osztály img reagál. és használja médialekérdezés ha szükséges. Vagy használja őket, mint a háttér és a háttér-size tulajdonság értéke fedelét.
Köszönöm a gyors választ. Mondd, valahogy alkalmazkodni három blokk háttérrel, annak ellenére, hogy a blokk, amelyben ők is a háttérben.
Kódot.
A helyzet nagyon gyakori, de ez nem működik, hogy alkalmazkodjanak az összes blokk tartalmát, beleértve a háttereket.
Ha azt akarjuk, hogy ugyanazt a tartalmat egy másik, akkor abszolút pozicionálás.
HTML-jelölést.
Szia, lehetséges, hogy betöltse a rendszert anélkül, hogy elő adaptív hely szerinti összes eszközön? ha igen, nehéz látni, egy kezdő? vagy jobb, hogy nem zavarja, és többek között bootstrap? Úgy döntöttem, hogy kilépjen a bootstrap, vagy mindegy nekem, hogy még mindig van olyan lehetőség, hogy hez? Úgy gondolom, hogy a honlap betöltse nehezék nehezebb, mert én minden, hogy van, csak nem használ, és a helyén lesz töltve hosszabb, bár én vagyok az új e, mi tanácsot?
kullancs megjegyezte, letöltés, letölthető 3 kép, css, js, config.json. A mappában css csak egy bootstrap és bootstrap perc, azt mondták, hogy mindkettőre szükség van? mint a js. de miért 3. Fail config.json? Tettem hol?
Ha van js fájlokat akkor ne távolítsa el a jelölést a rész tartalmazza jQuery plugin. Csak bootstrap.min.css fájlt. bootstrap.min.css fájl - egy rövidített változata bootstrap.css fájlt. Fájl minimalizálás előfordul speciális eszközök, amelyek eltávolítják az eredeti terek és sok más fájlokat. Fájl bootstrap.css alkalmas a tanulmány benne láthatjuk, hogyan szerveződik.
config.json fájl tartalmazza a beállításokkal szerelvény. Ie Ha egy új változata a Bootstrap, amelyek javítják valami, akkor menj vissza az oldalra testreszabása Bootstrap és betölti a konfigurációt a fordító. Ezt követően, kattintson lefordítása és letöltése kapni fog egy új változatát az összeállításhoz.
kb. köszönöm szépen a segítséget
És mi lesz a különböző kiigazításokat profelem helyszínen kézzel, a helyszínen készített egy kezdő, mint én a bootstrap mi az előnye és hátránya? Köszönöm az info, még mindig ott ült vár a válaszra ☺, nem tudja, hogyan kezdje kiszabására vagy anélkül bootstrap. Úgy tűnik, mintha nem lenne kívánatos előírni a gyorsabb webhelyek csinálni, de másrészt meg akarja tanulni, hogyan Vertan profeli.
Ha egy webhely Bootstrap, akkor megfelelően fog működni minden eszközön és a böngészők. Talán ez a fő plusz. Nem tudod, hogy a finomságok a különböző böngészők különböző eszközökön. Egy böngésző nézhet egy másik egészen más, és a harmadik, hogy nem működik. Másodszor tanul CSS Bootstrap Most megtudhatod, hogyan lehet létrehozni saját szükségességét CSS, hanem sok más dolog, mint Kevesebb és Sass. Ez akkor hasznos, hogy megértsük, hogyan kell megfelelően építik stílusok, hogy azután könnyen módosítható. Amellett, hogy a kódnak és akkor létrehozhat egy nagyon érdekes és szokatlan design.
Alexander, Jó estét. Saját kérdésem látható - milyen célból szükséges, ha lehet állítani a láthatóságot univerzális minden eszközre?
Helló
Class látható célja, hogy a készülék látható az egyik eszközön, de máshol nem.
Például az alább említett div lesz látható, csak az sm eszközök, és a többi nem. Ezen felül, akkor megjelenik egy olyan blokkot (dispaly: block).
Szintén Bootstrap vannak más látható osztályok, amelyek az elem látható, csak a nyomtatást, de a böngésző képernyőjén nem.
Például, miután a div csak akkor lesz látható, ha a nyomtatott, valamint az oldal nem jelenik meg. Ezen felül, akkor megjelenik egy olyan blokkot (dispaly: block).
Ha az elem nem határozza meg az osztályok ennek a csoportnak, az látható lesz az összes eszközt.
Például a következő elem jelenik meg minden eszközön.
Rájöttem, kösz a pontosítást, parafrázisa a kérdés, hogy mi az a pont általában látható egyes eszközök, míg mások elrejteni?
Például, az oldal getbootstrap.com főmenüben (fent), és a tartalom a jobb oldali menüben.
Tehát a nagy képernyőkön jeleníti 3 blokk, és csak 2 kicsi (nincs menü a jobb oldalon).
Az ilyen látható a helyszínen api.jquery.com, de van nem kevés képernyőn a bal oldali menüben.
Jó napot, Alexander.
Köszönöm a cikket olvasott sorrendben.
Van egy kívánsága: kiosztani valahogy jobb a „Navigáció” soron következő kapcsolat a cikk címe, hogy könnyebb és gyorsabb, hogy lépjen a következő.
Szia, Oleg.
Köszönöm a kívánsága, azt fogja tenni a közeljövőben.
Jó idő!
osztály rejtett-xs működik, de ez látható-xs-blokk erő nem tud dolgozni!
Sem ebből nem tudom megérteni, hogy miért az egység nem akar megjelenni csak egy mobil formában, és megjeleníti az összes felbontással?
Luke, ellenőrizze, hogy melyik verziót használja Bootstrap 3.x.x. A jelenlegi verzió a 3.3.5.
Előtti verziókban 3.2.0 Bootstrap ezekben az osztályokban nem volt, vannak osztályok használják: Csak-xs. látható-sm. látható-md, és .visible-lg. Miután 3.2.0, ezek az osztályok már eltávolították, és az új osztályok. látható-xs-blokk. látható-xs-jeit. látható-xs-inline-blokk. látható-sm-blokk. látható-sm-jeit. látható-sm-inline-blokk, stb
Ha frissíti a korábbi verzió (<3.2.0) до 3.3.5 то классы visible-xs. visible-sm. visible-md, и .visible-lg необходимо соответственно заменить на .visible-xs-block. visible-sm-block. visible-md-block, и .visible-lg-block.
Helló
Prompt hol kell alkalmazni a class = «clearfix látható - * - blokk», "..- inline" és "-inline-blokk."
köszönöm
Szia, Szergej.
A Twitter Bootstrap 3 2 osztályok-csoport megjeleníthető és elrejteni elemek:
1. csoport - rejtett xs osztályok, rejtett sm, rejtett md, rejtett lg.
Mindegyikük célja, hogy elrejtse a kijelző elem egy adott eszközön.
Például az alábbi kódot elrejti a kijelzőn a div elem az xs és sm eszközöket (az MD és az LG div elem jelenik meg):
2. csoport - a látható xs- osztályok *, látható-Sm *, látható-MD- *, látható-LG- *.
Mindegyikük célja, hogy megjelenítse a darabnak egy adott eszközt, a másik elrejti.
Például, a következő kód azt mutatja, div elem csak xs eszközök más bőrök (sm, MD és lg):
3 szó osztályban (blokk, inline vagy inline-block) cím meghatározza, hogyan az elem jelenik meg, hogyan a blokk (blokk), mint a vonal (inline) vagy sor-blokk (inline-block).
Szerintem ezekkel osztályok világos. Ie használják őket, hogy megjelenjen terméket.
.clearfix osztály létrehozásához használt háló adaptív blokkok (col - * - *). mert adaptív blokkok lebegő, néha szükség van, hogy megszünteti a csomagolást, hogy a megjelölés nem „lebegett”.
A kérdés az érintett harmadik eleme a látható szerkezet - * - *. Ie -blokk, -inline, -inline-blokk. A többi összetevők mindegyike jól leírtuk. Megpróbálok kérdéseket megfogalmazni pontosabban. Köszönöm.
Helló, az utolsó kódot,
IMHO minden egyes blokk weboldalak (cap Sadbar, tartalom, lábléc) jobb helyzetben van egy külön sor:
Hé, egy sapkát és egy pince egyetértenek. A variáns logikusabb. Bár senki sem tiltja, hogy hozzon létre egy elrendezést a cikket, akkor lesz érvényes a szempontból Bootstrap, szabványok és szerkezete. Mellesleg mind megvan a saját előnye és hátránya, mint Einstein mondta, minden relatív. Lehet, hogy még találni olyan előnyök, mint blokkok (komponensek) kisebb lesz, ami különösen fontos azok számára, akik szeretnék minimalizmus :)
Néhány nagyon szereti szerkezete a következő:
Mit gondol?