A bootstrap sablon szerkesztése a navbar és a blokkok színével

A Bootstrap sablon szerkesztése: A navbar és a blokkok színe

Az utolsó cikkben megtudtuk, hogyan kell megváltoztatni őket és szövegeket. Ebben elmondom, hogyan kell megváltoztatni a Navbar-t - a felső navigációs sávot, amelyben van egy vízszintes menü.

Körülbelül a beállítást a menüben azt fogja mondani később, de itt mutatja a legnehezebb -, hogyan kell változtatni a tervezési navbara - és felfedi a részleteket, hogy megszokott a megjelenés navbara az általános stílus az oldalon.

A navbar megjelenésének testreszabása

Először lépjen be a "style.css" tárhely oldalán. A fenti képernyő, azt hiszem, persze, ahol módosíthatja a kijelző egyes elemeinek navbara, nevezetesen: címe, neve, a helyszín (betűtípus, sorköz, betűszín), jelölje ki a felső menüből, ha lebeg a kurzor (a háttér színe), a felső menü linkek pontok (behúzás, sarkok lekerekítése, szín).

A "bootstrap.min.css" kódú Navbar színt keresi és másolja. A fenti képernyőfelvétel azt mutatja meg, hogy melyik kód adja ki a navbar fő színét, és létrehozza a gradiensét. A másolt kódot a "style.css" beillesztik a legalsóban.

Is keresi és másolata «bootstrap.min.css» színkód inaktív felső menüben a gombok egyidejűleg másolás és beillesztés «style.css» kód kiosztási tálaló. A fenti képernyőképek megmutatják, hogy mely kódokat kell keresni, és milyen számokat kell megváltoztatni.

Beauty! Az egykori egyszerű fekete navbar elegáns térfogatú festést kapott. Amire szükséged van!

De miközben megdönti a fekete függőleges sávot, amely elválasztja a menüt a felhasználói profil hívásától. Vessük át ezt a szalagot is.

Keresünk és másolata «bootstrap.min.css» strip kódot (lásd a fenti képen), majd helyezze színük csíkok, ahogy azt a felső képet. Két szín van itt, mivel a csík két félből áll, ami a hanghatást eredményezi.

Most, ha helyesen felvette a színeket, és minden összhangban van a teljes stílus a helyszínen, minden úgy néz ki, superski! A Navbar készen áll! ;-) A tetején az aljára lehet, nevezetesen - a láblécre.

Ahogy a sinabok helyesen megjegyezték a LinkorCMS fórumon. a tartalomblokk fehér háttérképe hosszú időn keresztül a webhelyen összevonódik a fő színes háttérrel, ezért jó a tartalomblokkok keretének kijelölése. Tegyük meg.

Állítsa a kockát blokkokra

Keresse a kód ellenőr a böngésző blokk elem és helyezze, amint az a fenti képen, a hatálya alá a kód: «border: 1px solid # A3A3A3;». 1px itt határozza meg a keret vastagsága, szilárd - nézet körét, # A3A3A3 - keret színe. Megadhatja saját beállításait. Másolja a kapott kódot az ellenőrből, és illessze be a "style.css" -be a tárhely webhely paneljében.

A böngészõkód-ellenõrön keresztül megtaláljuk az oldalblokkok kódját, és beillesztjük a keretkódot. Ennek megfelelően maga a "style.css" szabály.

Teljesen vizsgálja meg az egész helyet, és nézze meg, hogy nincs keret a "kenyérmorzsák" blokkjában. Azt is megkeressük a kód-ellenőrzőben, beillesztjük a keret kódot és tároljuk a "style.css" -be.

Köszönöm ezt a cikket, denyuzhku üzenetet Yandex.Money - 41001946245208; Webmoney - RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; Mob. 8-985-301-51-80 (MTS).