Bootstrap Typography örneklerini görmek için aşağıdaki kodları bootstrap'ın standart kodları ile ekleyip çalıştırın..
<div class="container">
<h1>h1. Bootstrap başlık</h1>
<h2>h2. Bootstrap başlık</h2>
<h3>h3. Bootstrap başlık</h3>
<h4>h4. Bootstrap başlık</h4>
<h5>h5. Bootstrap başlık</h5>
<h6>h6. Bootstrap başlık</h6>
<hr style="border-color: red">
<h1>h1. Bootstrap başlık <small>ikinci yazı alanı</small> </h1>
<h2>h2. Bootstrap başlık <small>ikinci yazı alanı</small> </h2>
<h3>h3. Bootstrap başlık <small>ikinci yazı alanı</small> </h3>
<h4>h4. Bootstrap başlık <small>ikinci yazı alanı</small> </h4>
<h5>h5. Bootstrap başlık <small>ikinci yazı alanı</small> </h5>
<h6>h6. Bootstrap başlık <small>ikinci yazı alanı</small> </h6>
<hr style="border-color: red">
<p class="lead">Bootstrap parağrafta öneçıkarmak istediğiniz alan...</p> </br>
<del>buraya yazılan metni silinmiş olarak kabul eder</del></br>
<s>buraya yazılan yazının üzerini çizer </s></br>
<u>buraya yazılan yazının altını çizer </u></br>
<small>small, ince yazı olarak görünür </small></br>
<strong>strong, kalın yazı olarak görünür</strong></br>
<em>italik yazı olarak görünür</em>
<hr style="border-color: red">
<p class="text-left">Left, sola yasla.</p>
<p class="text-center">Center, ortala.</p>
<p class="text-right">Right, sağa yasla.</p>
<p class="text-justify">Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. Justified, her iki yana yasla.. </p>
<p class="text-nowrap">özellik atama.</p>
<hr style="border-color: red">
<p class="text-lowercase">Lowercased, hepsini küçült.</p>
<p class="text-uppercase">Uppercased, hepsnini büyüt.</p>
<p class="text-capitalize">Capitalized, ilk harfleri büyüt.</p> </br>
<hr style="border-color: red">
<abbr title="buraya üzerine geldiğinizde görünmesini istediğiniz metin gelecek">sayfa metni üzerine gelin</abbr>
<hr style="border-color: red">
<address>
<strong>Adres</strong><br>
cumhuriyet cad. no:1<br>
kadıköy/istanbul<br>
<abbr title="Telefon">Tel:</abbr> (555) 505 50 50
</address>
<address>
<strong>e-mail</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
<hr style="border-color: red">
<blockquote>
<p>sola yaslı blok oluşturmak için kullanılır</p>
<footer>çizgi alanı, <cite title="Source Title">kaynak başlığı</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p>sağa yaslı blok oluşturmak için kullanılır</p>
<footer>çizgi alanı <cite title="Source Title">kaynak başlığı</cite></footer>
</blockquote>
<hr style="border-color: red">
<ul>
<li>ul li örnek...</li>
<li>örnek...</li>
<li>örnek...</li>
<li>örnek...</li>
</ul>
<hr style="border-color: red">
<ul class="list-unstyled">
<li>ul class="list-unstyled" ile simgeleri yok eder</li>
<li>örnek...</li>
<li>örnek...</li>
<li>örnek...</li>
</ul>
<hr style="border-color: red">
<ul class="list-inline">
<li>ul class="list-inline" ile tek satırda gösterir</li>
<li>örnek...</li>
<li>örnek...</li>
<li>örnek...</li>
</ul>
<hr style="border-color: red">
<ol>
<li>ol li örnek...</li>
<li>örnek...</li>
<li>örnek...</li>
<li>örnek...</li>
</ol>
<hr style="border-color: red">
<dl>
<dt>dt başlık örnek...</dt>
<dd>dd alt satır örnek...</dd>
<dd>dd alt satırörnek...</dd>
</dl>
<hr style="border-color: red">
<dl class="dl-horizontal">
<dt>dl-horizontal örnek...</dt>
<dd>dd alt satır örnek...</dd>
<dd>dd alt satırörnek...</dd>
</dl>
</div>
0 yorum:
Yorum Gönder