CSS Bootstrap 1. rész

Nyomtatás
Részletek

Tamás Ferenc: Weblapkészítés HTML alapokon – 11. rész

CSS Bootstrap 1. rész

 

28.1. fejezet: Bootstrap keretrendszer alapismeretek

Jelen leírás a Bootstrap keretrendszer 4. verzióját tartalmazza, amely a www.w3schools.com honlap alapján készült. Pontos URL: https://www.w3schools.com/bootstrap4/default.asp

A Bootstrap maga egy mobil platformra kifejlesztett ingyenes eszközrendszer, mellyel reszponzív weblapokat lehet készíteni, azaz asztali gépre, laptopra és okostelefonra egyaránt jól megjelenő oldalak létrehozását teszi lehetővé. A rendszer lehetővé teszi a gyors és könnyű webfejlesztést, valamint tartalmaz HTML- és CSS-alapú tervezősablonokat többek között tipográfiához, űrlapokhoz, gombokhoz, táblázatokhoz, navigációhoz és még sok minden máshoz, többek között JavaScript elemekhez is.

Nézzünk konkrétan egy példát! (cssbootstrap01.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 1. példa</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Első Bootstrap oldalam</h1>
  <p>Méretezze át ezt az oldalt,hogy az effektus látható legyen!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>1. oszlop</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>2. oszlop</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>3. oszlop</h3>       
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Jelen leírás a Bootstrap 4. verzióját tartalmazza, amely az előző, 3-as verzióhoz képest új komponenseket, gyorsabb stíluslapokat tartalmaz és nagyobb alkalmazkodóképességet tesz lehetővé. 2020. novemberi állapot szerint ez az utolsó verzió, amely már teljesen stabil a megszokott nagy böngészőkön és platformokon, ám az Internet Explorer 9-es és az előtti verziót már nem támogatja! Ha önnek ezen régi verziót támogató weblapra van szüksége, akkor javasolt a Bootstrap 3-as verzió használata:

URL: https://www.w3schools.com/bootstrap/default.asp


28.2. fejezet: Hogyan szerezzük be a Bootstrap 4-es verzióját?

- Építse be a Bootstrap 4-et egy CDN-ből. (CDN = Content Delivery Network = kb. tartalomközvetítői hálózat)

- Töltse le a getbootstrap.com oldalról.

 

Az általános megoldás a sima beépítés szokott lenni, nem pedig a letöltés. Az alábbi MaxCDN formula támogatást ad a Bootstrap 4-es verziójában található CSS és JavaScript kódokhoz:

<!-- Legutóbbi összeállított és minimalizált CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery könyvtár -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Legutolsó összeállított JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


28.3. fejezet: A legelső Bootstrap 4-es oldal összeállítása

A Bootstrap 4 HTML-kódokat és CSS tulajdonságokat használ, amelyek feltételezik a HTML5-ös verziójának használatát. Szóval minden esetben a HTML5-ös alapjait kell használni. Célszerű már rögtön az oldal legelején megadni a következőket: (cssbootstrap02.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

 

A Bootstrap 4 alapvetően mobil platformokra tervezett eszköztár, így a reszponzív megjelenés az alapvető részét képezi. A megfelelő rendereléshez és nagyításhoz érdemes a következő sort hozzáadni a <head> elembe:

<meta name="viewport" content="width=device-width, ">

Itt a width=device-width úgy állítja be az oldal szélességét, hogy alkalmazkodjon a képernyő szélességéhez. Továbbá az initial-scale=1 beállítja a böngészőben a kezdeti nagyítást az alapértelmezett szintre.

A Bootstrap alapvetően két fajta konténert alkalmaz a tartalmak megfelelő megjelenítése végett:

A .container osztály fix szélességű megjelenítést tesz lehetővé.

A .container-fluid osztály kiterjeszti a megjelenítést a teljes szélességre, tehát alkalmazkodó szélességű.

 

Elsőnek nézzünk egy állandó szélességű elemet! (cssbootstrap03.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap minta</h1>
<p>Fix szélességű .container rész, amely csak adott szélességben jelenik meg.</p> </div>
</body>
</html>

Most pedig egy alkalmazkodó szélességűt! (cssbootstrap04.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap minta</h1>
<p>Alkalmazkodó szélességű .container rész, amely kitölti a vízszintesen rendelkezésre álló helyet.</p>
</div>
</body>
</html>

 

A téma részletesebb tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp


28.4. fejezet: A Konténerek tulajdonságai (Container)

Az előző fejezetben láttuk a két alapvető konténer-típust. Most nézzük meg a fontosabb paramétereiket!

Fix szélességű konténert kell használni, ha megjelenés-érzékeny, de állandó szélességű tárolót akartunk használni. A max-width tulajdonság alkalmazkodni fog a különféle képernyőkhöz.

Példák: 

max-width

Extra kicsi

<576px

100%

Kicsi

>=576px

Közepes

>=768px

Nagy

>=992px

Extra nagy

>=1220px

 

Nézzük meg az alábbi példában, hogy a böngésző hogyan alkalmazkodik a különféle méretekhez menet közben (lépésenkénti!) átrendezéssel. (cssbootstrap05.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Bootstrap minta</h1>
<p>Ez a rész a .container osztály belsejében van.</p>
<p>A .container osztály a reszponzív állandó szélességű tartalom megjelenését teszi lehetővé.</p>
<p>Méretezze át a böngésző ablakát, hogy láthassa a különféle szélességű (max-width elemmel szabályozott) megjelenést lépésenként.</p>
</div>

</body>
</html>

Ezzel ellentétben használjuk a .container-fluid osztályt az olyan konténer létrehozásához, amely mindig (alkalmazkodóan!) kitölti a rendelkezésre álló helyet. Magyarázatként: a width értéke itt mindig 100%. (cssbootstrap06.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap container-fluid példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>Bootstrap minta</h1>
<p>Ez a rész a .container-fluid osztály belsejében van.</p>
<p>A .container-fluid osztály minden esetben, folyamatosan, teljes szélességben kitölti a rendelkezésére áló helyet, nem csupán lépésenként. </p>
</div>

</body>
</html>
 

A téma részletesebb tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_containers.asp


28.5. fejezet: Konténer helyhagyás, vastagság, színek

Alapértelmezés szerint a konténerek bal és jobb oldalán van egy 15 képpontos hely (container padding), de ez nem létezik a felső és az alsó helyekre. Éppen ezért a jobb megjelenés kedvéért gyakori a kiegészítő paraméterek használata, pl. a .pt-3 jelentése: adjon a felső helyhez 16 képpontot. Konkrét példa:

<div class="container pt-3">Konténer belseje</div>

Nem nehéz megérteni a keret vastagságának, illetve színének paraméterezését sem. A két paramétert gyakran egyszerre használjuk. Nézzük az alábbi kódrészletet:

<div class="container p-3 my-3 bg-dark text-white">

Értelmezés paraméterenként a következő:

A teljes kód: (cssbootstrap07.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap keretek és színek példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container p-3 my-3 border">
<h1>Bootstrap minta</h1>
<p>Ennek a konténernek van kerete (border) és némi extra helyhagyása (padding), valamint margója (margin) is. </p>
</div>

<div class="container p-3 my-3 bg-dark text-white">
<h1>Bootstrap következő minta</h1>
<p>Sötét háttér (bg-dark), fehér szövegszín (text-white), valamint némi helyhagyás (padding) és margó (margin) is.</p>
</div>

<div class="container p-3 my-3 bg-primary text-white">
<h1>Újabb minta</h1>
<p>Kék háttér (bg-primary), fehér szöveg (text-white), valamint némi helyhagyás (padding) és margó (margin) is.</p>
</div>

</body>
</html>

Fontos! A CSS Bootstrap színeihez érdemes használni a következő fejezetet:

https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

 

Hasonlóan a keretek pontos paraméterezése a következő helyen található (érthető példákkal):

https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

 

A fentieken kívül használhatunk reszponzív méretezésű konténereket is, melyek a megfelelő angol szavak rövidítései:

A fentiekre egy működő példa: (cssbootstrap08.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Reszponzív konténerek</h1>
<p>Méretezze át a böngészőt az effektus megjelenéséért!</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>

</body>
</html>

A téma részletesebb tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_containers.asp


28.6. fejezet: Rácsozás (grid)

 

A Bootstrap rácsrendszere alkalmazkodó flexbox rendszerű és legfeljebb 12 oszlop megjelenését teszi lehetővé. Ha nem akarjuk a 12 oszlopot külön-külön használni, akkor csoportosíthatóak, akár szélesebb oszlopok létrehozását is elősegítve.

Mivel a rácsrendszer maga is reszponzív, így annak újraméretezése függ a képernyő méretétől. Ennek ellenére a rendszer használatakor fontos, hogy meggyőződjünk arról, hogy a használt oszlopok mennyisége nem haladja meg a 12-t, habár nem szükséges mind a 12-t használni.

Ezt mutatja be az alábbi példa: (cssbootstrap09.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap rácsozat</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Bootstrap rácsozat</h1>
</div>

<div class="container bg-light border">
<div class="row">
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
<div class="col"><div class="text-center">span 1</div></div>
</div>
<div class="row">
<div class="col"><div class="text-center">span 3</div></div>
<div class="col"><div class="text-center">span 3</div></div>
<div class="col"><div class="text-center">span 3</div></div>
<div class="col"><div class="text-center">span 3</div></div>
</div>
<div class="row">
<div class="col"><div class="text-center">span 6</div></div>
<div class="col"><div class="text-center">span 6</div></div>
</div>
<div class="row">
<div class="col"><div class="text-center">span 12</div></div>
</div>
</div>
</body>
</html>

A CSS Bootstrap 4 rácsrendszernek öt alapvető osztálya van (méret szerint):
.col- (extra kicsi eszköz, kép szélessége kisebb, mint 576 képpont)
.col-sm- (kis eszköz, kép szélessége nagyobb, vagy egyenlő, mint 576 képpont)
.col-md- (közepes eszköz, kép szélessége nagyobb, vagy egyenlő, mint 768 képpont)
.col-lg- (nagy eszköz, kép szélessége nagyobb, vagy egyenlő, mint 992 képpont)
.col-xl- (extra nagy eszköz, kép szélessége nagyobb, vagy egyenlő, mint 1200 képpont)

A rácsrendszer alapvető struktúrája:

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

Ebben a példában először létrehozzuk a sort (<div class="row">), majd a kívánt számú oszlopot (a .col-*-* segítségével). Itt az első csillag (*) a méretezhetőséget jelenti (sm/md/lg/xl), míg a második csillag egy számot jelent, melynek 12-t kell adnia.

Íme egy gyakorlati megvalósítás két nem egyforma oszloppal:

<div class="container bg-light border">
<div class="row">
<div class="col-sm-9">nagy</div>
<div class="col-sm-3">kicsi</div>
</div>
</div>

 

 

A következő példában az oszloponkénti méretezés helyett engedélyezzük a Bootstrapnek, hogy ő maga végezze a méretezést: két ”col” elemet használva a méret 50% lesz darabonként, három ”col”  elemet használva már 33,33%-ra csökken ez a méret, stb. Itt is használhatóak a .col-sm/md/lg/xl paraméterek az oszlopok reszponzív méretezéséért. Íme egy reszponzív példa:

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

 

A téma részletesebb tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp


28.7. fejezet: Betűk és szövegek

A Bootstrap alapértelmezésként a 16px-es betűméretet (font-size) használja, valamint az 1,5-ös sortávolságot (line-height). Az alapvető betűtípus (font-family) a „Helvetica Neue”, majd sorba a következők: Helvetica, Arial, sans-serif. Továbbá az összes <p> elem esetén van 0-s felső margó (margin-top), valamint 1rem-es (16px) alsó margó (margin-bottom).

A Bootstrap szövegeiben használhatóak a <h1> - <h6> főcím kiemelésként. Ennek a lényeges része:

<div class="container">
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>

Lehetőség nyílik a kijelző címsorainak kiemelésére is (nagyobb betűméret és vékonyabb betűtípus). Itt négy különféle lehetőségből lehet választani. (cssbootstrap10.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap betűk</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Képernyő fejlécek</h1>
<p>Lehetőség nyílik a kijelző címsorainak kiemelésére is (nagyobb betűméret és vékonyabb betűtípus):</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>

</body>
</html>

Minden fejlécen belül extra elemként bele lehet építeni a <small> taget az alábbi minta szerint:

<h1>h1 főcím <small>kisebb szöveggel</small></h1>

Másik kiemelési lehetőség a <mark> elem, ami sárga hátteret ad a kijelölt kifejezésnek. Pl.:

<p>Használhatjuk a <mark>kiemelt</mark> szöveget.</p>

További kiemelési lehetőségek:

 

További fontosabb szövegbeli elemek:

.font-weight-bold

félkövér szöveg

.font-weight-bolder

kövérebb szöveg

.font-italic

döntött szöveg

.font-weight-light

vékonyított szöveg

.font-weight-lighter

kevésbé vékonyított szöveg

.font-weight-normal

normál vastagságú szöveg

.lead

kiemeli a szöveget

.small

kisebb szöveg (80%-a az eredetinek)

.text-left

balra rendezett szöveg

.text-*-left

balra rendezett szöveg sm/md/lg/xl képernyőkön

.text-break

megakadályozza a hosszú szöveg tördelését

.text-center

középre rendezett szöveg

.text-*-center

középre rendezett szöveg sm/md/lg/xl képernyőkön

.text-decoration-none

eltávolítja az aláhúzást egy linkből.

.text-right

jobbra rendezett szöveg

.text-*-right

jobbra rendezett szöveg sm/md/lg/xl képernyőkön

.text-justify

hasábszerűen rendezett szöveg

 

Példa a használatukra:

<div class="container">
<h1>Font weight and italics</h1>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text.</p>
<p class="font-italic">Italic text.</p>
</div>

A téma részletesebb tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_typography.asp

Minden alkalmazott típus részletes tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp


28.8.fejezet: Bootstrap 4 színek

 

A Bootstrap 4 rendelkezik néhány tartalomfüggő színnel, amelyek utalnak a szövegre.

Ezek a következő osztályok: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (alapértelmezett szövegszín; gyakran fekete) és .text-light.

Használatuk: (cssbootstrap11.html)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap betűszínek példa</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Tartalomfüggő színek</h2>
<p class="text-muted">muted</p>
<p class="text-primary">primary</p>
<p class="text-success">success</p>
<p class="text-info">info(rmation)</p>
<p class="text-warning">warning</p>
<p class="text-danger">danger</p>
<p class="text-secondary">secondary</p>
<p class="text-dark">dark</p>
<p class="text-body">alapértelmezett szöveg (gyakran fekete)</p>
<p class="text-light">light (grey - fehér háttéren)</p>
<p class="text-white">white (fehér háttéren)</p>
</div>

</body>
</html>

Javasolt ugyanezeket a színneveket használni pl. linkekre, vagy egyéb kiemelésekre (is).

Lehet 50%-os átlátszóságot is rendelni a fehér vegy fekete szöveghez a következő módon:

<p class="text-black-50">Fekete szöveg 50%-os átlátszósággal fehér háttéren </p>

<p class="text-white-50 bg-dark"> Fehér szöveg 50%-os átlátszósággal fekete háttéren </p>

 

A fenti kifejezéseket leehet alkalmazni szöveg háttereként is. Például text-primary helyett bg-primary.

 

A téma részletesebb tárgyalása:

https://www.w3schools.com/bootstrap4/bootstrap_colors.asp