Uzun bir aradan sonra tekrardan merhaba dostlar hızlı bir şekilde yeni içeriklerle devam
dostlar bu gün yeni bir Bootstrap dersi ile karşınızdayım başlıktanda belli olucağı gibi
bu gün Hizalama ve Display özelliklerini göreceğiz lafı fazla uzatmadan hemen konumuza geçelim.
ilk olarak Display kelimesinin Türkçesi Görüntüle demek.
css bölümüne yani style tagı içine bir blok oluşturuyoruz
dostlar bu gün yeni bir Bootstrap dersi ile karşınızdayım başlıktanda belli olucağı gibi
bu gün Hizalama ve Display özelliklerini göreceğiz lafı fazla uzatmadan hemen konumuza geçelim.
ilk olarak Display kelimesinin Türkçesi Görüntüle demek.
css bölümüne yani style tagı içine bir blok oluşturuyoruz
HTML:
<style>
.d-inline-block{
display: inline-block;
}
</style>dedikten sonra body kısmına gelip ana konuya geçelim
p etiketi içine lorem oluşturduk ve class a text-justify yazdık yazımız iki taraftanda hizalandı sayfayı
büyütüp küçülttüğünüzde de ise bu hizalama işlemi devam etmekte
HTML:
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
anlattığım olay görsellerde daha iyi anlıya bilirsiniz.
gelin bide sol,sağ,ve ortalamaya bakalım
HTML:
<p class="text-left">
SOL
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
<p class="text-right">
SAĞ
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
<p class="text-center">
ORTA
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>yani kısacası class adları text-left, right ve center
şimdi gelin bide blockquote ile kullanalım ilk olarak bir yazı yazalım ve yazının altına yazan kişinin
adını yazalım
HTML:
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae deleniti ratione modi?
Esse labore accusamus iure corrupti obcaecati consequatur? Possimus!
</p>
<footer class="blockquote-footer">İsim Soy isim</footer>
</blockquote>çıkan görsel bu şekilde dostlar
şimdi gelin bide hizalıyalım
HTML:
<blockquote class="blockquote text-right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae deleniti ratione modi?
Esse labore accusamus iure corrupti obcaecati consequatur? Possimus!
</p>
<footer class="blockquote-footer">İsim Soy isim</footer>
</blockquote>
<br><br>
<blockquote class="blockquote text-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae deleniti ratione modi?
Esse labore accusamus iure corrupti obcaecati consequatur? Possimus!
</p>
<footer class="blockquote-footer">İsim Soy isim</footer>
</blockquote>ve şunun gibi bir görsel çıkmakta
şimdi gelin span etiketinin varsayılan özelliğini inline olarak değiştirelim
HTML:
<span class="d-block bg-danger mb-2">B-Block değiştirilmiş</span>
<span class="d-block bg-danger mb-2">değiştirilmemiş sıradan span</span>
<br><br>
<span class="bg-warning mb-2 ">B-Block değiştirilmemiş</span>
<span class="bg-warning mb-2 ">değiştirilmemiş sıradan span</span>class="d-block" display ın d si
gelin bide div etiketine inline verelim
HTML:
<div class="bg-primary">Değiştirilmemiş</div>
<div class="d-inline bg-primary">Değiştirilmiş</div>aynı bu şekilde
gelin bide son olarak ekrandan kaybetmeye bakalım bunun için d-none class ını kullanacağız
invisible ile arasındaki fark şu invisible yapınca kod akışında gözükür ve yer kaplar ancak d-none
yapınca akışa dağil olmaz ve yerde kaplamaz
gelin bu demek istediğime yakından bakalım
HTML:
<div class="d-none bg-warning">d-none</div>
<br><br>
<div class="invisible bg-primary">invisible</div>
görsel dede gözüktüğü gibi d-none ile yok edince yer kaplamıyo hem kodda hem sayfada
bir sonraki konuda Tabloları göreceğiz İyi forumlar dostlar
Not: buradaki ders BTK Akademi tarafından yardım alınarak ve öğrenilerek yapılmıştır
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<! CSS >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>www.TürkHackTeam.org/com</title>
<style>
.d-inline-block{
display: inline-block;
}
</style>
</head>
<body class="p-5">
<p class="text-justify">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
<br><br>
<p class="text-left">
SOL
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
<br><br>
<p class="text-right">
SAĞ
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
<br><br>
<p class="text-center">
ORTA
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis adipisci repudiandae
ad delectus! Repellat facilis voluptate, quasi numquam laudantium
repellendus nam commodi consequuntur explicabo quae rem nobis ab,
architecto nisi!
</p>
<br><br>
<blockquote class="blockquote text-right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae deleniti ratione modi?
Esse labore accusamus iure corrupti obcaecati consequatur? Possimus!
</p>
<footer class="blockquote-footer">İsim Soy isim</footer>
</blockquote>
<br><br>
<blockquote class="blockquote text-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae deleniti ratione modi?
Esse labore accusamus iure corrupti obcaecati consequatur? Possimus!
</p>
<footer class="blockquote-footer">İsim Soy isim</footer>
</blockquote>
<br><br>
<span class="d-block bg-danger mb-2">B-Block değiştirilmiş</span>
<span class="d-block bg-danger mb-2">değiştirilmemiş sıradan span</span>
<br><br>
<span class="bg-warning mb-2 ">B-Block değiştirilmemiş</span>
<span class="bg-warning mb-2 ">değiştirilmemiş sıradan span</span>
<br><br>
<div class="bg-primary">Değiştirilmemiş</div>
<div class="d-inline bg-primary">Değiştirilmiş</div>
<br><br>
<br><br>
<div class="d-none bg-warning">d-none</div>
<br><br>
<div class="invisible bg-primary">invisible</div>
<br><br>
<br><br>
<br><br>
<! JS >
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
