Bootstrap typografie - Kenmerken van Bootstrap-typografie met voorbeelden

Inhoudsopgave:

Anonim

Introductie in Bootstrap typografie

Typografie is een van de nieuwste functies van bootstrap. Het wordt vooral gebruikt voor het opmaken en opmaken van tekstelementen. Door de typografiefunctie van bootstrap te gebruiken, kan iemand koppen, alinea's, enkele andere inline-elementen en lijsten maken. In principe gebruikt bootstrap 1rem (16 px) omdat de lettergrootte inclusief regelhoogte 5 blijft. Standaard zijn lettertypefamilies die door bootstrap worden gebruikt sans-serif, Arial, het stelt in hoe de inhoud op de body moet worden weergegeven, de achtergrondkleur op de body, gebruikt het lettertype grootte en lijnhoogte om marges, opvullingen, etc. te creëren

Kenmerken van Bootstrap-typografie

Hieronder staan ​​de verschillende kenmerken van typografie als volgt:

1) Rubrieken

HTML-koppen zijn onderverdeeld in

naar

Bootstrap rubriek
weergegeven in lettergrootte

Bootstrap rubriek

weergegeven in lettergrootte

Bootstrap rubriek

weergegeven in lettergrootte

Bootstrap rubriek

weergegeven in lettergrootte
Bootstrap rubriek
weergegeven in lettergrootte
Bootstrap rubriek
weergegeven in lettergrootte

Door gebruik te maken van HTML-code geeft het output zoals hieronder getoond:

Door Bootstrap-typografie te gebruiken, werd het opgemaakt en opgemaakt met behulp van respectieve klassen zoals hieronder weergegeven:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

De uitvoer van de bovenstaande code met Bootstrap-typografie is als volgt:

2) Responsieve koppen

Responsieve koppen zijn een van de beste dingen die je met typografie kunt ontwerpen. dit zijn de elementen waarin tekst automatisch wordt aangepast met behulp van klasse responsive per apparaatgrootte. Je kunt dus gemakkelijk dezelfde tekst op verschillende manieren op verschillende apparaten zien.

Voeg als volgt responsieve klasse toe aan uw header-tag:

Responsive Header

Dus het zal output tonen als:

Responsieve koptekst.

U kunt dezelfde tekst ook op de verschillende apparaten controleren en door het formaat van de browser te wijzigen worden wijzigingen weergegeven.

3)

Deze tag wordt gebruikt om lichtere, kleinere, secundaire tekst in uw kop te maken. Standaard wordt deze ingesteld op 85% van de grootte van de bovenliggende kop.

Voorbeeld:

Example heading secondary text

Output:

h5 kop secundaire tekst

4)

Deze tag wordt gebruikt om tekst te markeren.

Voorbeeld:

Bootstrap Typography

Bootstrap Typography

Dit wordt gebruikt om tekst te markeren.

5)

Deze tag wordt gebruikt om een ​​afkorting te markeren. Afkortingen hebben een standaard onderstreping en krijgen een helpcursor om extra context te geven over zweven en voor gebruikers van ondersteunende technologieën.

Voorbeeld:

Er zijn zoveel landen op de wereld. India is het beste land

6)

Geeft verwijderde tekst aan

Voorbeeld:

Deze tag wordt gebruikt om verwijderde tekst weer te geven.

Output:

Deze tag wordt gebruikt om te tonen.

7)

Het blockquote-element wordt gebruikt om inhoud van een andere bron te presenteren.

Voorbeeld:

Blockquotes

Blockquotes

Het blockquote-element wordt gebruikt om inhoud van een andere bron te presenteren:


Er is heel weinig nodig om een ​​gelukkig leven te leiden; het zit allemaal in jezelf, in je manier van denken. Leven is als viool spelen in het openbaar en het instrument leren terwijl je verder gaat.

Output:

Blok citaten
Het blockquote-element wordt gebruikt om inhoud van een andere bron te presenteren:

Er is heel weinig nodig om een ​​gelukkig leven te leiden; het zit allemaal in jezelf, in je manier van denken. Het leven is alsof je in het openbaar viool speelt en het instrument leert terwijl je verdergaat.

8)
:

Deze tag wordt gebruikt om een ​​beschrijvingslijst weer te geven.

Voorbeeld:

Het dl-element geeft een beschrijvingslijst aan:


Brood

- Wit

- bruin

Koude dranken

- Pepsi

Output:

Het dl-element geeft een beschrijvingslijst aan:

Brood
Wit
Bruin
Koude dranken
Pepsi.

9)

De inline-code moet in het code-element worden samengeknuppeld.

Voorbeeld:

De volgende HTML-elementen: span, section en div definiëren een sectie in een document.

Output:

De volgende HTML-elementen: span, section en div definiëren een sectie in een document.

10) Contextuele kleuren

Dit is niets anders dan een andere klasse die wordt gebruikt om betekenis over te brengen met behulp van verschillende kleuren.
Het heeft verschillende klassen zoals .text-gedempt, .text-info, .text-primary, .text-success, .text-warning, .text-hazard.

Voorbeeld:

Gebruik de contextuele klassen om "betekenis door kleuren" te geven:

Deze tekst is gedempt.

Deze tekst is belangrijk.

Deze tekst duidt op succes.

Deze tekst geeft enige informatie weer.

Deze tekst vertegenwoordigt een waarschuwing.

Deze tekst vertegenwoordigt gevaar.

Output:

Deze tekst is gedempt.
Deze tekst is belangrijk.
Deze tekst duidt op succes.
Deze tekst geeft enige informatie weer.
Deze tekst vertegenwoordigt een waarschuwing.
Deze tekst vertegenwoordigt gevaar.

Waar we kunnen gebruiken

  • De meeste webontwerpers geven er de voorkeur aan bootstrap-typografie te gebruiken voor een beter uiterlijk van de tekstindeling.
  • Het wordt vooral gebruikt tijdens het stylen en opmaken van tekstinhoud.
  • Meestal is er een probleem met de reactiviteit van tekst. Tekstgrootte wordt gevarieerd per verschillende apparaten. Dus deze problemen worden verholpen door de bootstrap typografie-functie te gebruiken.
  • Bootstrap-typografie wordt op een eenvoudige manier aangepast om aantrekkelijk te presenteren aan de eindgebruiker.
  • Dergelijke tekstelementen op een webpagina worden altijd op dezelfde manier weergegeven via de link naar het Bootstrap 4-stijlblad, behalve dat deze elementen worden overschreven door andere stijlklassen.
  • De Bootstrap biedt ontwikkelaars handige typografische functies waarmee ze gemakkelijk koppen, paragrafen, lijsten en andere inline-elementen kunnen maken die aantrekkelijk zijn voor de lezers.

Conclusie

  • Zoals alle details in bovenstaande inhoud, de verschillende typografische kenmerken van Bootstrap voor koppen, blockquote, leadtekst, gemarkeerde tekst, afkortingen met geschikte voorbeelden.
  • Dergelijke robuuste en mooie functies van Bootstrap maken het een zeer populair en uniek front-end ontwikkelingsraamwerk dat door veel organisaties op grote schaal wordt gebruikt.
  • De bootstrap wordt geleverd met alle typografie-tags waarvoor we gestileerd willen worden, alles van een tag tot

    en de hele kophiërarchie.

Aanbevolen artikelen

Dit is een handleiding voor Bootstrap-typografie. Hier bespreken we verschillende functies van Bootstrap-typografie zoals koppen, blockquote, afkorting, merk enz. U kunt ook de volgende artikelen bekijken voor meer informatie -

  • Bootstrap-opdrachten
  • Bootstrap-componenten
  • Hoe Bootstrap te installeren
  • Bootstrap-indeling