Ana içeriğe atla

Bootstrap 4.1 Tablolar

Bir hatadan dolayı görselleri ve kod biçimlerini yükliyemedim biraz karmaşık oldu kusura bakmayın


Merhaba dostlar bu gün sıradaki konu ile karşınızdayım bu gün Tabloları görüceğiz fazla uzatmadan

konuya geçelim.



body nin içine ilk olarak normal bir tablo oluşturuyoruz



 <table>


    <thead>


        <tr>

            <th>#</th>

            <th>Name</th>

            <th>Surname</th>

            <th>Email</th>

        </tr>


    </thead>

    

    <tbody>

        

        <tr>

            <th>1</th>

        <th>Ersse</th>

        <th>Ar-Ge</th>

        <th>ersse@gmail.com</th>

        </tr>


        <tr>

            <th>2</th>

            <th>ddddd</th>

            <th>Ar-Ge</th>

            <th>ddddd@gmail.com</th>

        </tr>


        <tr>

            <th>3</th>

            <th>asdasd</th>

            <th>Ar-Ge</th>

            <th>asdasd@gmail.com</th>

        </tr>


        <tr> 

            <th>4</th>

            <th>ffff</th>

            <th>Ar-Ge</th>

            <th>ffff@gmail.com</th>

        </tr>

    </tbody>

   </table>



Görsel1


şimdi gelin bootstrap kütüphanemizi ekliyelim




 <table class="table">


    <thead>


        <tr>

            <th>#</th>

            <th>Name</th>

            <th>Surname</th>

            <th>Email</th>

        </tr>


    </thead>

    

    <tbody>

        

        <tr>

            <th>1</th>

        <th>Ersse</th>

        <th>Ar-Ge</th>

        <th>ersse@gmail.com</th>

        </tr>


        <tr>

            <th>2</th>

            <th>ddddd</th>

            <th>Ar-Ge</th>

            <th>ddddd@gmail.com</th>

        </tr>


        <tr>

            <th>3</th>

            <th>asdasd</th>

            <th>Ar-Ge</th>

            <th>asdasd@gmail.com</th>

        </tr>


        <tr> 

            <th>4</th>

            <th>ffff</th>

            <th>Ar-Ge</th>

            <th>ffff@gmail.com</th>

        </tr>

    </tbody>

   </table>





gördüğünüz gibi çok daha güzel oldu ancak sayfanın tamamını kapladı


görsel 2



şimdi renklendirme ve düzenleme aşamasına geçelim ilk olarak boy kısmına 3 tabe class ekliyelim

<body class="w-75 mx-auto my-4">  w-75 mx-auto my-4  classlarını ekliyelim


<table class="table table-dark">


        <thead>...</thead>

       

        <tbody>...</tbody>

      </table>



ikiside ayrı ayrı


<table class="table">


        <thead class="table-dark>...</thead>

       

        <tbody>...</tbody>

      </table>


görsel 3



görsel dede gözüktüğü gibi ilk olarak tamamına verdik sonra da sadece thead kısmına verdik

istediğiniz gibi renklendire bilirsiniz


3 nokta koymamın sebebi gereksiz uzun olmamasıdır


gelin bide koyu açık koyu açık şeklinde yapalım en çok karşınıza çıka bilicek bir tablo 




<table class="table table-primary table-striped">


        <thead class="table-dark>...</thead>

       

        <tbody>...</tbody>

      </table>



görsel 4 


gelin bide bordered ekliyelim



<table class="table table-dark table-bordered">


        <thead class="table-dark>...</thead>

       

        <tbody>...</tbody>

      </table>


hover olayı var gelin bide ona bakalım




<table class="table table-dark table-bordered table-hover">


        <thead class="table-dark>...</thead>

       

        <tbody>...</tbody>

      </table>


görsel 5



M=  farenin olduğu yer 

B=  bordered


gelin birazcık tabloyu renklendirelim (hayal gücünüze kalmış)




 <table class="table table-dark">


        <thead >

   

           <tr class="table-danger">

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th class="table-primary">1</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

           </tr>

   

           <tr class="bg-success ">

               <th>2</th>

               <th>ddddd</th>

               <th class="bg-primary tex-danger">Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr class="bg-warning">

               <th>3</th>

               <th>asdasd</th>

               <th class="bg-secondary">Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

           </tr>

        </tbody>

      </table>



görsel 6





belki tablomuzda bazı yerler uzun gelin bide scrol ekliyelim div içerisine alıyoruz table muzu



<div class="table-responsive">


    <table class="table table-dark table-bordered">


        <thead >

   

           <tr>

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th>1</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

           </tr>

   

           <tr>

               <th>2</th>

               <th>ddddd</th>

               <th>Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr>

               <th>3</th>

               <th>asdasd</th>

               <th>Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

               <th>4</th>

               <th>ffff</th>


           </tr>

        </tbody>

      </table>





  </div>




görsel7 



görseldeki gibi bir sonuç çıkıcaktır bende hatalı çıktı :D


bir sonraki konuda görüşmek üzere bir sonraki konu içeriği Listeler


iyi forumlar


Not: Bootstrap dersleri BTK Akedemiden yardım alınarak hazırlanmakta


Projedeki Bütün kodlar




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

     <! CSS >

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    

    <title>www.TürkHackTeam.org/com</title>


    <style>


        

       

    </style>

</head>

<body class="w-75 mx-auto my-4">





   <table class="table">


     <thead>


        <tr>

            <th>#</th>

            <th>Name</th>

            <th>Surname</th>

            <th>Email</th>

        </tr>


     </thead>

    

     <tbody>

        

        <tr>

            <th>1</th>

        <th>Ersse</th>

        <th>Ar-Ge</th>

        <th>ersse@gmail.com</th>

        </tr>


        <tr>

            <th>2</th>

            <th>ddddd</th>

            <th>Ar-Ge</th>

            <th>ddddd@gmail.com</th>

        </tr>


        <tr>

            <th>3</th>

            <th>asdasd</th>

            <th>Ar-Ge</th>

            <th>asdasd@gmail.com</th>

        </tr>


        <tr> 

            <th>4</th>

            <th>ffff</th>

            <th>Ar-Ge</th>

            <th>ffff@gmail.com</th>

        </tr>

     </tbody>

   </table>




    <br><br>

    

    <table class="table table-dark">


        <thead>

   

           <tr>

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th>1</th>

           <th>Ersse</th>

           <th>Ar-Ge</th>

           <th>ersse@gmail.com</th>

           </tr>

   

           <tr>

               <th>2</th>

               <th>ddddd</th>

               <th>Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr>

               <th>3</th>

               <th>asdasd</th>

               <th>Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

           </tr>

        </tbody>

      </table>

  

    <br><br>

    



    <br><br>

     

    <table class="table">


        <thead class="table-dark">

   

           <tr>

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th>1</th>

           <th>Ersse</th>

           <th>Ar-Ge</th>

           <th>ersse@gmail.com</th>

           </tr>

   

           <tr>

               <th>2</th>

               <th>ddddd</th>

               <th>Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr>

               <th>3</th>

               <th>asdasd</th>

               <th>Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

           </tr>

        </tbody>

      </table>


    <br><br>


    <br><br>

    <table class="table table-primary table-striped">


        <thead >

   

           <tr>

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th>1</th>

           <th>Ersse</th>

           <th>Ar-Ge</th>

           <th>ersse@gmail.com</th>

           </tr>

   

           <tr>

               <th>2</th>

               <th>ddddd</th>

               <th>Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr>

               <th>3</th>

               <th>asdasd</th>

               <th>Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

           </tr>

        </tbody>

      </table>

  

    <br><br>


    <br><br>


    <table class="table table-dark table-bordered table-hover">


        <thead >

   

           <tr>

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th>1</th>

           <th>Ersse</th>

           <th>Ar-Ge</th>

           <th>ersse@gmail.com</th>

           </tr>

   

           <tr>

               <th>2</th>

               <th>ddddd</th>

               <th>Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr>

               <th>3</th>

               <th>asdasd</th>

               <th>Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

           </tr>

        </tbody>

      </table>

    <br><br>

     

    <table class="table table-dark">


        <thead >

   

           <tr class="table-danger">

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th class="table-primary">1</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

           </tr>

   

           <tr class="bg-success ">

               <th>2</th>

               <th>ddddd</th>

               <th class="bg-primary tex-danger">Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr class="bg-warning">

               <th>3</th>

               <th>asdasd</th>

               <th class="bg-secondary">Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

           </tr>

        </tbody>

      </table>


    <br><br>


  <div class="table-responsive">


    <table class="table table-dark table-bordered">


        <thead >

   

           <tr>

               <th>#</th>

               <th>Name</th>

               <th>Surname</th>

               <th>Email</th>

           </tr>

   

        </thead>

       

        <tbody>

           

           <tr>

               <th>1</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

               <th>ersse@gmail.com</th>

               <th>Ersse</th>

               <th>Ar-Ge</th>

           </tr>

   

           <tr>

               <th>2</th>

               <th>ddddd</th>

               <th>Ar-Ge</th>

               <th>ddddd@gmail.com</th>

           </tr>

   

           <tr>

               <th>3</th>

               <th>asdasd</th>

               <th>Ar-Ge</th>

               <th>asdasd@gmail.com</th>

           </tr>

   

           <tr> 

               <th>4</th>

               <th>ffff</th>

               <th>Ar-Ge</th>

               <th>ffff@gmail.com</th>

               <th>4</th>

               <th>ffff</th>


           </tr>

        </tbody>

      </table>





  </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/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>

</html>





Etiketler:

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Python Global Tool

 Merhaba dostlar bugün yeni bir Python projesi ile karşınızdayım Global Tool ismini verdiğimiz Pc Tool un güncel versiyonu olarak düşüne bilirsiniz ancak bu programdaki özellikler haftalık GitHub üzerinden yenilenecek ve  fazlalaştırılıcaktır bu projeye destek olmak için lütfen GitHub üzerinden iletişime geçin. Projeye gitmek için tıkla
1 yorum
Devamı

İşinize kesin yarıyacak photoshop kısa yol tuşları

Merhaba dostlar bu gün sizlere bazı Adobe Photoshop 2020 sürümü kısa yol tuşlarını gösterdim  umarım işinize yarar. Ctrl + N                 Yeni bir çalışma alanı açar. Ctrl + S                 Yaptığınız çalışmayı kaydeder. Ctrl + Shift + S         Yaptığınız çalışmayı farklı kaydeder. Ctrl + Shift + Alt + S   Yaptığınız çalışmayı dışa aktarır. Ctrl + Z                 Çalışmada yaptığınız son değişikliği geri alır. Ctrl + Alt + Z           Çalışmada yaptığınız değişiklikleri en fazla 1000 kere geri alır. Ctrl + R                 Özellikle bir grafikerin kullandığı olmazsa olmaz photoshop özelliklerinden biridir Tab                      Araçları kaldırıp, çalışmayı tam ekran yapmanız...
Yorum Gönder
Devamı

Python ile Keyloger

Merhaba arkadaşlar bu yazıda Python programlama dilinde nasıl keyloger yapılır onu anlatıcam iyi okumalar           ------------------------------------Code------------------------------------ İlk önce CMD yi açıp  pip install pynput  yazıyoruz ardından Enther tuşuna basıyoruz sonrasında Derleyicimize aşşağıdaki kodları yazıyoruz bu kadar... import pynput   #modülümüzü ekliyoruz from pynput.keyboard import Key,Listener   #kullanacağımız değişken ve dizilerimiz sayac = 0 keys = []   #tuşa basılma eylemi gerçekleştiğinde def on_press ( key ):     global sayac,keys     sayac += 1     #basılan tuşu yaz     print ( " {0} pressed" .format(key))     #diziye ekle     keys.append(key)       #Gelen tuşları kayıt altına alalım     if sayac >= 10 :         sayac = 0         write_file(keys)       ...
Yorum Gönder
Devamı