Bootstrap 4.1 Hizalama ve Display // Ar-Ge kulübü

ERSSE

Katılımcı Üye
6 Kas 2019
465
138
Street
Merhaba dostlar bu gün yeni bir Bootstrap dersi ile karşınızdayım başlıktandan belli olucağı gibi
bu gün Hizalama ve Display özelliklerini görüceğ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>



dedikden 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 etmekde

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>

c6kp01i.PNG



lm6afzq.PNG



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 vec enter

awwflad.PNG


ş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

hi0rzwa.PNG



ş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


l6cceb4.PNG




şimdi gelin span etiketinin varsayılan özelliğini değiştirelim inline 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

rdrcter.PNG



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>

r2mbi4d.PNG




görselldede gözüktüğü gibi d-none ile yok edince yer kaplamıyo hem kodda hem sayfada

bir sonraki konuda Tabloları görüceğiz İyi forumlar dostlar



Not: burdaki 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>



(Resme Tıkla)




 

JohnWick51

Uzman üye
20 Mar 2022
1,867
770
28
Merhaba dostlar bu gün yeni bir Bootstrap dersi ile karşınızdayım başlıktandan belli olucağı gibi
bu gün Hizalama ve Display özelliklerini görüceğ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>



dedikden 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 etmekde

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>

c6kp01i.PNG



lm6afzq.PNG



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 vec enter

awwflad.PNG


ş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

hi0rzwa.PNG



ş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


l6cceb4.PNG




şimdi gelin span etiketinin varsayılan özelliğini değiştirelim inline 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

rdrcter.PNG



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>

r2mbi4d.PNG




görselldede gözüktüğü gibi d-none ile yok edince yer kaplamıyo hem kodda hem sayfada

bir sonraki konuda Tabloları görüceğiz İyi forumlar dostlar



Not: burdaki 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>



(Resme Tıkla)




Ellerine saglik
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.