0
Kayıt Ol

Bootstrap Hizlama

3

●

444

  • 14-03-2019, 12:44:44
    #1
    Konya
    Konya
    Kimlik doğrulama veya yönetimden onay bekliyor.
    merhaba arkadaşlar bootstrap ta yeniyim nasıl bir başlık yazacağımı bilemedim 2 colonlu bir yapı yapıyorum bazı kolan height farklı oluyor ancak fakat esnek olmuyor boşluk bırakıyor örnek kodlar aşağıda


    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>    <tr>
      <th scope="row">4</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>    <tr>
      <th scope="row">5</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div><div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div><div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div><div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>
</div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap 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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>
  • 14-03-2019, 12:52:26
    #2
    Onur89TR
    Onur89TR
    Bootstrap bilgim yok ancak CSS biliyorum. 4 tane col md 6 yapacağına 2 tane yap. Biri sağda diğeri solda olsun. Ve içine solda 1 tablo, sağda 2 tablo olacak şekilde tabloları yerleştir. Aslında ilk tavsiyem Bootstrap'tan önce CSS öğrenmen.
  • 14-03-2019, 12:57:50
    #3
    Konya
    Konya
    Onur89TR adlı üyeden alıntı: mesajı görüntüle
    Bootstrap bilgim yok ancak CSS biliyorum. 4 tane col md 6 yapacağına 2 tane yap. Biri sağda diğeri solda olsun. Ve içine solda 1 tablo, sağda 2 tablo olacak şekilde tabloları yerleştir. Aslında ilk tavsiyem Bootstrap'tan önce CSS öğrenmen.
    css biliyorum , bootstrap ta col md gibi yapılara hakim değilim bu tür örnekleri daha önce görmüştüm kolay yoldan ekstra css yazmadan nasıl yapılır onu öğrenmek istedim.
    ilginiz için teşekkür ederim hocam.
  • 14-03-2019, 14:10:56
    #4
    aksoyhlc
    aksoyhlc
    PHP & Flutter & Laravel
    Sağ üstteki tabloya bir tane class atayın örneğin sagtablo sonra css kısmına şu kodu ekleyebilirsiniz
    .sagtablo td {height: 99px !important;}
    bu şekilde sağ üstteki tablonun satırlarının yükseliğini ayarlayabilirsiniz
    Buraya Tıklayarak Udemyde bulunan ücretsiz bootstrap kursumu inceleyebilirsiniz
    Yani kodun bitmiş hali şöyle olacak
    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 <style>.sagtablo td {height: 99px !important;}</style>
    <title>Hello, world!</title>
  </head>
  <body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@mdo<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@fat<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@twitter<</span></span></span></span></span></span>/td>
    </tr>    <tr>
      <th scope="row">4</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@twitter<</span></span></span></span></span></span>/td>
    </tr>    <tr>
      <th scope="row">5</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@twitter<</span></span></span></span></span></span>/td>
    </tr>
  </tbody>
</table>
</div><div class="col-md-6">
<table class="table sagtablo">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Fssssirst</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@mdo<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@fat<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@twitter<</span></span></span></span></span></span>/td>
    </tr>
  </tbody>
</table>
</div><div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@mdo<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@fat<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@twitter<</span></span></span></span></span></span>/td>
    </tr>
  </tbody>
</table>
</div><div class="col-md-6">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@mdo<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@fat<</span></span></span></span>/td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag"><span class="userTag">@twitter<</span></span></span></span></span></span>/td>
    </tr>
  </tbody>
</table>
</div>
</div>
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap 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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>