Editarea șablonului de bootstrap cu culoarea barei de navigare și a blocurilor

Editarea șablonului Bootstrap: culoarea barei de navigare și a blocurilor



În ultimul articol, am învățat cum să schimbăm capacele și textele din ele. În acest lucru vă voi spune cum să modificați Navbar - bara de navigare de sus, în care există un meniu orizontal.








Despre setarea meniului voi spune mai târziu, dar aici arată cel mai dificil - cum de a schimba navbara de design - și va dezvălui toate detaliile pentru a personaliza navbara aspectul sub stilul general al site-ului.

Personalizați aspectul navbar



În primul rând, du-te la panoul site-ului de pe gazduire în "style.css". Pe ecranul de mai sus, cred că, desigur, în cazul în care aveți posibilitatea să modificați afișarea elementelor navbara individuale, și anume: titlu, numele site-ului (font, spațierea, culoarea fontului), evidențiați meniul de sus atunci când treceți cursorul (culoarea de fundal), meniul de sus a link-uri de puncte (indentare, rotunjire colțuri, culoare).



Căutăm și copiem din codul de bare "bootstrap.min.css" Navbar. Imaginea de mai sus arată care coduri afișează culoarea principală a barei de navigație și creează gradientul acesteia. Paste codul copiat în "style.css" în partea de jos.


De asemenea, în căutarea și o copie a «bootstrap.min.css» cod de culoare butoane inactive meniul de sus în același timp copie și lipiți în «style.css» Sidebar alocare de cod. Capturile de ecran de mai sus indică ce coduri să caute și ce numere să se schimbe.









Frumusețe! De la vechiul avion de navigație simplu, navbar a obținut o colorare volumetrică elegantă. Ce ai nevoie!



Dar, în timp ce acesta strică bara verticală neagră care separă meniul de a apela profilul utilizatorului. Să schimbăm și această bandă.



Căutăm și copiem din banda de cod "bootstrap.min.css" (prezentată în imaginea de mai sus) și lipiți culorile benzii, similar celei afișate în ecranul superior. Există două culori aici, deoarece banda constă din două jumătăți, ceea ce creează un efect al volumului.



Acum, dacă ați luat corect culorile și totul este în armonie cu stilul general al site-ului, totul arată superski! Cu Navbar finalizat! ;-) În partea de sus puteți merge în partea de jos, și anume - la subsol.


Așa cum sinabs a remarcat în mod corect pe forumul LinkorCMS. fundalul alb al blocului de conținut, cu o lungă perioadă de timp pe site, fuzionează cu fondul principal de culoare, așadar este bine să încadrați blocurile de conținut. Să o facem.


Setați cadrul la blocuri



Să găsim elementul de bloc prin intermediul inspectorului de cod în browser și să inserăm codul de cadru așa cum se arată în imaginea de mai sus: "border: 1px solid # A3A3A3;". 1px stabilește grosimea cadrului, solid - tipul cadrului, # A3A3A3 - culoarea cadrului. Puteți specifica propriile setări. Copiați codul rezultat din inspector și inserați-l în "style.css" în panoul site-ului de pe site-ul gazdă.



De asemenea, prin intermediul inspectorului de cod browser găsim codul blocurilor laterale și inserăm codul de cadru. În consecință, noi conducem "stil.css" în sine.



Inspectați cu atenție întregul site și vedeți că nu există niciun cadru în blocul de "fâșii de pâine". De asemenea, îl căutăm în inspectorul de cod, introducem codul de cadru și îl stocăm în "style.css".


Îmi puteți mulțumi pentru acest articol, punând denyuzhku pe Yandex.Money - 41001946245208; Webmoney - RUB - R228675470677, USD - Z403380463613, EUR - E114430860179; Mob. 8-985-301-51-80 (MTS).







Trimiteți-le prietenilor: