Bootstrap Typography - Funktioner i Bootstrap-typografi med exempel

Introduktion i Bootstrap Typography

Typografi är en av de senaste funktionerna i bootstrap. Det används särskilt för styling och formatering av textelement. Genom att använda typografifunktionen i bootstrap kan någon skapa rubriker, stycken, några andra inlineelement och listor. I grund och botten använder bootstrap 1rem (16px) som teckensnittstorlek inklusive linjehöjd kvar. Som standard är teckensnittsfamiljer som används av bootstrap sans-serif, Arial, Det anger hur innehållet ska visas på kroppen, bakgrundsfärg på kroppen, använder teckensnitt storlek och linjehöjd för att skapa marginaler, paddningar etc.

Funktioner i Bootstrap Typography

Nedan visas de olika funktionerna i typografin enligt följande:

1) Rubriker

HTML-rubriker är indelade i

till

Bootstrap Heading

visas i teckenstorlek

Bootstrap Heading

visas i teckenstorlek

Bootstrap Heading

visas i teckenstorlek

Bootstrap Heading

visas i teckenstorlek

Bootstrap Heading

visas i teckenstorlek

Bootstrap Heading

visas i teckenstorlek

Genom att använda HTML-kod ger det output som visas nedan:

Genom att använda Bootstrap-typografi formaterades och formaterades de med respektive klasser som visas nedan:

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

Utgången från koden ovan med hjälp av Bootstrap Typography är följande:

2) Responsiva rubriker

Responsiva rubriker är en av de bästa saker man kan designa med hjälp av typografi. det här är de element där texten justeras automatiskt genom att använda klassens respons som per enhetsstorlek. Så man kan enkelt se samma text på ett lämpligt sätt på olika enheter.

Lägg bara till klasskänsliga i din rubrikmärke enligt följande:

Responsive Header

Så det kommer att visa output som:

Responsive Header.

Du kan kontrollera samma text på de olika enheterna också genom att ändra storlek på webbläsaren så kommer den att visa förändringar.

3)

Den här taggen används för att skapa lättare, mindre, sekundär text i din rubrik. Som standard är det 85% av storleken på överordnad rubrik.

Exempel:

Example heading secondary text

Produktion:

h5 rubrik sekundärtext

4)

Den här taggen används för att markera text.

Exempel:

Bootstrap Typography


Bootstrap Typography


Detta används för att markera text.

5)

Den här taggen används för att markera en förkortning. Förkortningar har en standardunderstrykning och får en hjälpmarkör för att ge ytterligare sammanhang för muspekare och användare av hjälpmedel.

Exempel:

Det finns så många länder i världen. Det är det bästa landet

6)

Anger raderad text

Exempel:

Den här taggen används för att visa raderad text.

Produktion:

Den här taggen används för att visa.

7)

Blockquote-elementet används för att presentera innehåll från en annan källa.

Exempel:

Blockquotes


Blockquotes


Blockquote-elementet används för att presentera innehåll från en annan källa:

Mycket lite behövs för att göra ett lyckligt liv; det är allt inom dig själv, i ditt sätt att tänka. Liv är som att spela en fiol offentligt och lära sig instrumentet när man fortsätter.

Produktion:

Blockquotes
Blockquote-elementet används för att presentera innehåll från en annan källa:

Mycket lite behövs för att göra ett lyckligt liv; det är allt inom dig själv, i ditt sätt att tänka. Livet är som att spela fiolen offentligt och lära sig instrumentet när man fortsätter.

8)

:

Den här taggen används för att visa en beskrivningslista.

Exempel:

Dl-elementet indikerar en beskrivningslista:

Bröd

- Vitt

- Brun

Kalla drycker

- Pepsi

Produktion:

Dl-elementet indikerar en beskrivningslista:

Bröd
Vit
Brun
Kalla drycker
Pepsi.

9)

Det inline-uttalandet av koden ska klubba ihop i kodelementet.

Exempel:

Följande HTML-element: span, section och div definierar ett avsnitt i ett dokument.

Produktion:

Följande HTML-element: span, sektion och div definierar ett avsnitt i ett dokument.

10) Kontextuella färger

Detta är inget annat än en annan klass som används för att förmedla mening med olika färger.
Det har olika klasser som .text-dämpad, .text-info, .text-primär, .text-framgång, .text-varning, .text-fara.

Exempel:

Använd de kontextuella klasserna för att ge "mening genom färger":

Den här texten är tyst.

Denna text är viktig.

Denna text indikerar framgång.

Den här texten representerar viss information.

Den här texten representerar en varning.

Denna text representerar fara.

Produktion:

Den här texten är tyst.
Denna text är viktig.
Denna text indikerar framgång.
Den här texten representerar viss information.
Den här texten representerar en varning.
Denna text representerar fara.

Där vi kan använda

• De flesta webbdesigners föredrar att använda bootstrap-typografi för bättre utseende och känsla av textformat.
• Det används särskilt när du utformar och formaterar textinnehåll.
• Merparten av tiden är det en fråga om textmottagning. Textstorleken varierar enligt olika enheter. Så det här problemet blir tydligare genom att använda bootstrap-typografifunktionen.
• Bootstrap-typografi anpassas på ett enkelt sätt för att presentera attraktivt för slutanvändaren.
• Sådana textelement på en webbsida kommer alltid att återges genom länken till Bootstrap 4-formatmallen på samma sätt förutom att dessa element åsidosätts av andra stilklasser.
• Bootstrap tillhandahåller utvecklare bekväm typografifunktioner för att göra det enkelt för dem att skapa rubriker, stycken, listor och andra inlineelement som skulle vara tilltalande för läsarna.

Slutsats

• Enligt alla detaljer som anges ovan, innehåller de olika typografifunktionerna i Bootstrap för rubriker, blockquote, Lead Text, Marked Text, Förkortningar med lämpliga exempel.
• Sådana robusta och vackra funktioner i Bootstrap gör det till mycket populärt och unikt ramverk för front end som används ofta av många organisationer.
• Bootstrap kommer med alla typografikoder som vi vill ha stil för, allt från en tagg till

  och hela rubrikhierarkin.

Rekommenderade artiklar

Detta är en guide till Bootstrap Typography. Här diskuterar vi olika funktioner i Bootstrap Typography som rubriker, blockquote, förkortning, märke etc. Du kan också titta på följande artiklar för att lära dig mer -

• Bootstrap-kommandon
• Bootstrap-komponenter
• Hur du installerar Bootstrap
• Bootstrap Layout