Introducere în tipografia Bootstrap

Tipografia este una dintre cele mai recente caracteristici ale bootstrap-ului. Este utilizat în special pentru stilizarea și formatarea elementelor de text. Folosind caracteristica de tipografie a bootstrap-ului, cineva poate să creeze titluri, paragrafe, alte alte elemente inline și liste. Practic, bootstrap folosește 1rem (16px) ca dimensiune a fontului, inclusiv înălțimea liniei rămase 5. În mod implicit, familiile de fonturi utilizate de bootstrap sunt sans-serif, Arial, stabilește modul în care conținutul trebuie să se afișeze pe corp, culoarea de fundal pe corp, folosește fontul dimensiunea și înălțimea liniei pentru a crea margini, căptușeli etc.

Caracteristici ale tipografiei Bootstrap

Mai jos sunt diferite caracteristici ale tipografiei după cum urmează:

1) Titluri

Titlurile HTML sunt împărțite în

la

Titlu cu cizme
afișat cu dimensiunea fontului

Titlu cu cizme

afișat cu dimensiunea fontului

Titlu cu cizme

afișat cu dimensiunea fontului

Titlu cu cizme

afișat cu dimensiunea fontului
Titlu cu cizme
afișat cu dimensiunea fontului
Titlu cu cizme
afișat cu dimensiunea fontului

Folosind codul HTML, acesta oferă ieșire așa cum se arată mai jos:

Folosind tipografia Bootstrap, acesta a modelat și formatat folosind clasele respective, așa cum se arată mai jos:

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

Rezultatele codului de mai sus folosind tipografia Bootstrap sunt următoarele:

2) Titluri responsive

Titlurile responsive sunt unul dintre cele mai bune lucruri pe care le putem proiecta folosind tipografia. acestea sunt elementele în care textul se ajustează automat prin utilizarea clasei responsive după dimensiunea dispozitivului. Deci, puteți vedea cu ușurință același text într-un mod adecvat pe dispozitive diferite.

Nu trebuie decât să adăugați clase responsive în eticheta antetului, după cum urmează:

Responsive Header

Deci va afișa ieșirea ca:

Antet responsabil.

Puteți verifica același text pe diferite dispozitive, precum și prin redimensionarea browserului, acesta va afișa modificări.

3)

Această etichetă este folosită pentru a crea text secundar mai ușor, mai mic, în titlu. În mod implicit, acesta stabilește 85% din dimensiunea titlului părinte.

Exemplu:

Example heading secondary text

ieşire:

h5 titlu text secundar

4)

Această etichetă este folosită pentru a evidenția text.

Exemplu:

Bootstrap Typography

Bootstrap Typography

Acest lucru este utilizat pentru a evidenția text.

5)

Această etichetă este folosită pentru a marca o prescurtare. Abrevierile au o subliniere implicită și câștigă un cursor de ajutor pentru a oferi un context suplimentar pe pasager și pentru utilizatorii tehnologiilor de asistență.

Exemplu:

Există atât de multe țări din lume.India este cea mai bună țară

6)

Indică text șters

Exemplu:

Această etichetă este utilizată pentru a afișa text șters.

ieşire:

Această etichetă este folosită pentru a arăta.

7)

Elementul blockquote este utilizat pentru a prezenta conținut din altă sursă.

Exemplu:

Blockquotes

Blockquotes

Elementul blockquote este utilizat pentru a prezenta conținut dintr-o altă sursă:


Este foarte puțin nevoie pentru a duce o viață fericită; totul este în interiorul tău, în felul tău de a gândi. Viața este ca și cum ai cânta la vioară în public și ai învăța instrumentul așa cum merge mai departe.

ieşire:

blockquotes
Elementul blockquote este utilizat pentru a prezenta conținut dintr-o altă sursă:

Este foarte puțin nevoie pentru a duce o viață fericită; totul este în interiorul tău, în felul tău de a gândi. Viața este ca și cum cântăm vioara în public și învățăm instrumentul așa cum mergem mai departe.

8)
:

Această etichetă este utilizată pentru a afișa o listă de descrieri.

Exemplu:

Elementul dl indică o listă de descriere:


Pâine

- Alb

- Maro

Bauturi reci

- Pepsi

ieşire:

Elementul dl indică o listă de descriere:

Pâine
alb
Maro
Bauturi reci
Pepsi.

9)

Instrucțiunea de linie de cod ar trebui să fie asociată în elementul de cod.

Exemplu:

Următoarele elemente HTML: span, section și div definește o secțiune dintr-un document.

ieşire:

Următoarele elemente HTML: span, section și div definește o secțiune dintr-un document.

10) Culori contextuale

Aceasta nu este altceva decât o clasă diferită care este folosită pentru a transmite sensul folosind culori diferite.
Are diferite clase precum .text-muted, .text-info, .text-primar, .text-succes, .text-avertizare, .text-danger.

Exemplu:

Utilizați clasele contextuale pentru a oferi „sensul prin culori”:

Acest text este dezactivat.

Acest text este important.

Acest text indică succesul.

Acest text reprezintă unele informații.

Acest text reprezintă un avertisment.

Acest text reprezintă pericol.

ieşire:

Acest text este dezactivat.
Acest text este important.
Acest text indică succesul.
Acest text reprezintă unele informații.
Acest text reprezintă un avertisment.
Acest text reprezintă pericol.

Unde putem folosi

  • Majoritatea proiectanților web preferă să folosească tipografia bootstrap pentru un aspect mai bun în format text.
  • Este utilizat în special în stilul și formatarea conținutului textului.
  • De cele mai multe ori există o problemă cu privire la receptivitatea textului. Dimensiunea textului variază în funcție de diferite dispozitive. Prin urmare, aceste probleme sunt clarificate folosind funcția de tipografie a bootstrap-ului.
  • Tipografia Bootstrap este personalizată într-o manieră simplă pentru a fi prezentă atractiv pentru utilizatorul final.
  • Astfel de elemente de text dintr-o pagină web vor fi întotdeauna redate prin linkul către foaia de stil Bootstrap 4 în același mod, cu excepția faptului că aceste elemente sunt suprasolicitate de alte clase de stil.
  • Bootstrap oferă dezvoltatorilor caracteristici tipografice convenabile pentru a le facilita crearea de titluri, paragrafe, liste și alte elemente liniare care ar fi atrăgătoare pentru cititori.

Concluzie

  • În conformitate cu toate detaliile prezentate în conținutul de mai sus, diferitele caracteristici tipografice ale Bootstrap pentru titluri, blocare, Text de plumb, Text marcat, Abrevieri cu exemple adecvate.
  • Aceste caracteristici robuste și drăguțe ale Bootstrap îl fac foarte popular și unic cadru de dezvoltare front-end, care este utilizat pe scară largă de multe organizații.
  • Bootstrap-ul vine cu toate etichetele de tipografie pentru care dorim să le creăm, de la o etichetă la

    și întreaga ierarhie a rubricilor.

Articole recomandate

Acesta este un ghid pentru tipografia Bootstrap. Aici vom discuta despre diferite caracteristici ale tipografiei Bootstrap, cum ar fi titlurile, blocarea, prescurtarea, marcajul etc. Puteți consulta, de asemenea, următoarele articole pentru a afla mai multe -

  • Comenzi de bootstrap
  • Componente pentru bootstrap
  • Cum se instalează Bootstrap
  • Dispunerea cizmei

Categorie:

Dezvoltare de software