Digitális kiadványok
  • Bevezető
  • Digitális kiadványok
    • Világhálóról dióhéjban
    • Online tervezőgrafika
    • Mi szükséges egy weboldal elindításához?
    • Webmotorok, tartalomkezelők, webshopok
    • Weblaptervezéshez szükséges ismeretek
  • HTML
    • Mi az a HTML?
    • HTML rövid története
    • HTML állomány felépítése
    • HTML elemek
    • HTML hibák, és javításuk
  • CSS
    • Mi az a CSS?
    • CSS stílusok felépítése
    • Kijelölők
    • Rangsor
    • Színek, színrendszerek
    • Mértékegységek
    • Doboz modell
    • Szövegek, szövegközi elemek
    • Úsztatás
    • Háttérszínek, háttérképek
    • Pozicionálás
    • @media
    • Rugalmas dobozok
  • CSS technikák
    • Középre rendezés
    • Konténer középre rendezése
    • Kör, ellipszis
    • Aránytartó téglalap, négyzet
    • Kép úsztatása szövegben
    • Vízszintes menü úsztatással
    • Layout kialakítása úsztatással
    • Clearfix
  • Bootstrap
    • Mi az a Bootstrap?
    • Kezdő lépések
    • Konténer elem
    • Grid rendszer
    • Tartalmak
    • Komponensek
    • Segédek
    • Egyedi megjelenés
  • VS Code
    • Mi az a VS Code?
    • VS Code beszerzése, telepítése
    • VS Code anatómiája
    • Emmet
  • Egyéb eszközök
    • W3C Validator
    • Google Fonts
    • Font Squirrel
    • Type Scale
    • Font Awsome
    • Glitch.com
  • eKönyv
    • Az eKönyvekről dióhéjban
    • ePub formátum
  • Függelék
    • Felhasznált irodalom
    • Tanulási alternatívák
    • Markdown szerkesztők, olvasók
    • Webmotorok
    • Kliens oldali keretrendszerek
    • Fejlesztéshez alkalmas számítógép konfiguráció
    • Visszajelzés, kapcsolat
Powered by GitBook
On this page
  • Stílus forrásállományok fordítása
  • Bootstrap forrás állományok bekötése
  • Egyedi beállítások alkalmazása
  • Példák további beállításokra
  • Példa állományok
Export as PDF
  1. Bootstrap

Egyedi megjelenés

PreviousSegédekNextMi az a VS Code?

Last updated 5 years ago

A Bootstrap-nek módosíthatjuk a beállításait, így tudunk egyedi megjelenést biztosítani a felhasználói felületeknek, a számos lehetőség közül például használhatunk egyedi színeket, betűtípust, vagy módosíthatjuk a modulháló beállításait.

Stílus forrásállományok fordítása

Ahhoz hogy érvényesíteni tudjuk a beállításainkat, a Bootstrap stílusait a Sass forrás állományaiból kell fordítanunk, ezt rendeszerint egy fejlesztői keretrendszerrel végezzük, de lehetőség van erre a Visual Studio Code szövegszerkesztőben is egy bővítmény segítségével. Ehhez töltsük le a Live Sass Compiler bővítményt:

Telepítéshez nyissuk meg a Visual Studio Code bővítmény kezelőjét (Extensions), és a keresőbe írjuk be a bővítmény nevét (Live Sass Compiler ).

A találati listában a bővítmény neve mellett nyomjuk meg az Install gombot. Telepítés után a következő elem jelenik meg a Visual Studio Code láblécén:

Erre a gombra kattintva a Visual Studio Code le fogja fordítani CSS állományra az Sass forrás állományokat (ezeknek a kiterjesztése .scss).

Bootstrap forrás állományok bekötése

A forrás állományokat a Bootstrap letöltés oldalán találjuk:

Kattintsunk a Download Source gombra:

Egy tömörített zip állomány fog letöltődni, amit tömörítsünk ki. Csak az scss almappára és teljes tartalmára van szükségünk, ezt helyezzük el a HTML állomány mellett, amiben alkalmazni akarjuk:

Hozzunk létre egy style.scss nevű állományt, amibe behívjuk a Bootstrap forrását (az scss mappában található bootstrap.scss állományt kell hivatkozni):

style.scss
@import 'scss/bootstrap.scss';

Ha elmentettük az állományt, és megnyomjuk a Watch Sass gombot, a Visual Studio Code legyártja a CSS állományunkat:

Végül be kell kötnünk a HTML állományba a legyártott CSS állományt, egy szokásos link segítségével, amit helyezzünk el a HTML állomány fejlécében:

<link rel="stylesheet" href="style.css">

Ha mindent jól csináltunk, és megnyitjuk az állományunkat egy böngészőben, a Bootstrap komponensei megkapják az alapértelmezett Bootstrap stílusokat. A gomb elem például a következő képpen fog kinézni:

<a class="btn btn-primary" href="#" role="button">Gomb</a>

Egyedi beállítások alkalmazása

A Bootstrap beállításait az scss mappában a _variables.scss állományban találjuk, ezt direkt módon nem módosítjuk, mert fölül tudjuk írni a beállításait a saját style.scss állományunkban, a @import előtt. Például megváltoztathatjuk az elsődleges (primary) színt:

style.scss
$primary: red !default;

@import './scss/bootstrap.scss';

Fordítás után ez megváltoztatja többek között a gombunk színét is a korábbi kékről vörösre:

Minden beállítás változókban van tárolva ezek mindíg $ jellel kezdődnek az scss állományokban, az új érték után el kell helyezni egy !default kapcsolót ez felülírja a később bekötött Bootstrap beállítás értékét.

Példák további beállításokra

Alapértelmezett betűtípus felülírása

Ebben a példában egy Google betűkészlettel írjuk felül az alapértelmezett fontot:

style.scss
$font-family-base: 'Open Sans', sans-serif !default;

@import './scss/bootstrap.scss';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap - Open Sans</title>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <a class="btn btn-primary m-5" href="#" role="button">Gomb</a>
</body>
</html>

Ahhoz, hogy a font betöltődjön be kell kötni a HTML állományba.

Modulháló beállításainak módosítása

A következő példában a Bootstrap modulháló oszlopainak a számát 12-ről 16-ra módosítjuk, az oszlopok közötti csatornák (gutter) szélességét 30 pixelről 20 pixelre csökkentjük:

$grid-columns:                16 !default;
$grid-gutter-width:           20px !default;

@import './scss/bootstrap.scss';

Példa állományok

Az alábbi linken a fenti példa HTML és SCSS állományok letölthetőek:

A Sass a CSS nyelvi lehetőségeit bővíti ki dinamikus funkciókkal, amik jellemzően programozási nyelvekben találhatóak meg, például változók, ciklusok, adat struktúrák. Bővebben erről az eszközről a Sass honlapján olvashatunk:

https://sass-lang.com
83KB
bootstrap-scss.zip
archive
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sassmarketplace.visualstudio.com
Downloadgetbootstrap
Logo