Rozvržení webového projektu pomocí Bootstrap 2.0

Hlavním úkolem při vytváření webových stránek je rozložení designu pro vytvoření struktury pomocí xhtml a css k definování prostorů obsahu, aby nám v tomto úkolu pomohly standardní rámce, jako je 960gs nebo Bootstrap.
V tomto případě uvidím Bootstrap, který byl vyvinut a používán Twitterem.
Bootstrap je rámec navržený pro zjednodušení procesu vytváření webových návrhů. K tomu nabízí sadu již naprogramovaných tříd CSS a souborů Javascript, které umožňují vývoj úkolů, jako jsou:

• Webový design, který funguje v aktuálních prohlížečích, aniž byste museli provádět mnoho změn.

• Webový design, který lze správně zobrazit na různých zařízeních a v různých měřítcích a rozlišeních.

• Lepší integrace s nejčastěji používanými knihovnami, jako je jQuery.

• Solidní design založený na současných nástrojích a standardech, jako je CSS3 / HTML5

Začneme příkladem stažením rámce http://getbootstrap.com/2.3.2/

Rozbalíme soubor a uvidíme 2 adresáře s komponentami bootstrap
Vytvoříme soubor index.html, který vysvětlíme.
Vytvoříme html se základními komponentami:

 Design s Bootstrap / * Zde půjde obsah * / 

Bootstrap ponoří strukturu 980px do 12 sloupců po 60 pixelech a vloží obsah. Bloky, které lze vytvořit, se pohybují od 1 do 12 pomocí třídy spanx, takže span1 bude blok 60 pixelů. Příklad všech bloků obsahu, které můžeme mít.

Vytvoříme základní strukturu webového záhlaví, levého sloupce, obsahu, zápatí. Všechny třídy již přicházejí do rámců

// obecný rám kontejneru// definujte začátek řady bloků// 12 sloupcových bloků rovných 980px pro záhlaví;// 2 blok sloupce rovný 120px pro sloupec;// 10 bloků sloupců pro obsah 600px;// 12 sloupcových bloků rovných 980px pro zápatí;

ZVĚTŠIT

Komponenty pro vytvoření nabídky
V části záhlaví můžete vložit nabídku seznamu s třídami navbar a vytvořit nabídku:

// 12 sloupcových bloků rovných 980px pro záhlaví;

Téma 1
Téma 2
Téma 3

Takže můžeme vidět naše menu připravené, aniž bychom museli řešit css.

ZVĚTŠIT

Pak, pokud chcete rozšířit bootstrap vytvořením vlastních pravidel css, vytvoříme další soubor default.css a tam vložíme náš kód tak, že přidáme naši třídu do ukázkového kódu:

Ve sloupci obsahu vytvoříme obsah

// 10 bloků sloupců pro obsah 600px;
Vytváříme obsah pomocí Bootstrap, abychom vysvětlili tutoriál
// prázdný odstavec je stejný jako ponechání řádku nebo mezery Viz Bootstrap

Výsledkem při aktualizaci našeho příkladu bude:

ZVĚTŠIT

Příklad není úplná webová stránka nebo s výraznou estetikou, ale jak vidíme, s malým úsilím můžeme vytvořit demo nebo vytvořit šablony bez použití více než textového editoru a ušetřit spoustu práce s celou standardizovanou platformou.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod

Pomohl vám tento návod?

Pokud ne

POMOC VYLEPŠIT TENTO NÁVOD!

Myslíte si, že můžete tento návod opravit nebo vylepšit? Svou edici můžete odeslat se změnami, které považujete za užitečné.
Tento tutoriál upravilo 0 uživatelů. Upravte a staňte se uznávaným odborníkem!
Upravit tento návod

PODOBNÉ NÁVODY

Vodorovná lišta s efektem vznášení v html5, css3 a bootstrapZískejte souřadnice klienta pomocí Google Maps API v JavaScriptu (HMTL5, CSS3 a Bootstrap)Naučte se vytvářet responzivní slideshow s HTML5 + BootstrapPokročilý vývoj webového rozhraní Bootstrap FrameworkRozšíření bootstrapuNetbeans: Vytvářejte projekty HTML5 pomocí šablon a pluginuUživatelská rozhraní bootstrapPoužití komponent Bootstrap

Žádné komentáře, buďte první!

Nečekejte déle a vstupte do SolveticZanechte své komentáře a využijte výhod uživatelského účtu Přidejte se k nám!

• Vytvořit účetZaregistrujte se ZDARMA a získejte svůj účet SolveticZaregistrujte si účet
• IdentifikovatMáte již účet? Přihlaste se zdeIdentifikujte mě na mém účtu