Tipografie in Bootstrap

postat acum 4 ani de Stefanescu Mihai in categorie 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>