Tipografie in Bootstrap
In acest articol am sa vorbesc despre clasele ce au legatura cu fonturile in Bootstrap.
Heading-uri
Stim deja ce sunt heading-urile, tag-urile de la <h1> la <h6>. In bootstrap le putem folosi ca in orice alt cod HTML:
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>
Iata si rezultatul:
Putem folosi si tag-ul <small> sau un <span class=”small”> pentru a obtine acest rezultat:
Paragrafe
Bootstrap ne pune la dispozitie 2 tipuri de paragrafe, paragraf normal si paragraf lead care este putin mai mare si iese in evidenta.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate placerat pellentesque. </p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate placerat pellentesque. </p>
Aliniere
In bootstrap putem alinia textul folosind urmatoarele clase:
<p class="text-left">Text aliniat la stanga.</p> <p class="text-center">Text aliniat la centru.</p> <p class="text-right">Text aliniat la dreapta.</p> <p class="text-justify">Text justified.</p>
Transformare
Putem transforma textul folosind urmatoarele clase:
<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p> <p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p> <p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
Culori text
Bootstrap ne pune la dispozitie si o serie de clase ce ne ajuta la colorarea tetxului:
<p class="text-muted">Muted: This text is grayed out.</p> <p class="text-primary">Important: Please read the instructions carefully before proceeding.</p> <p class="text-success">Success: Your message has been sent successfully.</p> <p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p> <p class="text-warning">Warning: There was a problem with your network connection.</p> <p class="text-danger">Error: An error has been occurred while submitting your data.</p>
Blockquote
Bootstrap vine si cu un stil mai special pentru tag-ul <blockquote>
<blockquote> <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p> <small>by <cite>Albert Einstein</cite></small> </blockquote>