Ders-4 | Bootstrap Sayfa Düzeni


Ders-4 | Bootstrap Sayfa Düzeni | Bootstrap Dersleri/Bootstrap Eğitimi


Videoda kullandığımız kodlar:



<!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>Merhaba Dünya!</title>
  </head>
  <body>
    <div class="container bg-info">
      <div class="row">
     
      <h1>İlk bootstrap projemiz</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


<a href="https://google.com">
   <button class="btn btn-warning btn-lg">Merhaba Dünya</button></a>
   
      </div>

    </div>

    <div class="container-fluid">
      <h1>İkinci Deneme</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </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>

 



Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Giriş - Ders/1 HTML Dersleri

Resim
  Merhaba arkadaşlar bu yazı ile birlikte HTML derslerine başlamış oluyoruz. Dersleri YouTube kanalımdan da takip edebilirsiniz sitede video içerisinde ki kodları ve özet bir şekilde dersleri paylaşacağım. Daha detaylı bir şekilde öğrenmek istiyorsanız videoları izleyebilirsiniz her yazının sonunda ilgili dersin videosunu da ekleyeceğim tavsiyem önce videoyu izleyip sonra da yazıyı okumanızdır. <html>...........</html> /*Bu kod tarayıcıya HTML belgesinin başladığı ve bittiği yeri bildirir. Bütün diğer kodlar bu iki kod arasına yazılır.*/ <head>...........</head> /*Html belgesinin ilk bölümüdür. Buraya yazılan kodlar metin olarak ekranda gözükmez*/ <body>...........</body> /*Sayfada gözükecek bütün kodları buraya yazarsınız. Sayfada gözüken her şey bu kodlar arasına yazılır*/ <title>...........</title> /*Sayfanın başlığını belirtir ve <head> tagları arasına yazılır*/ https://www.youtube.com/watch?v=zJW-P8WJpHA
Devamı

SD Card Boş Veya Desteklenmiyor Hatası Çözümü

Resim
SD Card Boş Veya Desteklenmiyor Hatası Çözümü Flash Diskim Dolu Ama Boş Görünüyor Sizde bu hata sonucunda hem bilgisayarınızdan hem de telefonunuzdan hafıza kartınıza ve onun içerisinde ki dosyalara erişemiyorsanız bu yazı daha doğrusu bu video tam da size göre. Bu hata sonucunda hafıza kartımızın içerisinde ki resimlerimize, videolarımıza, kişisel dosyalarımıza erişim problemi yaşıyoruz. Bu hatanın çözümü için aşağıda ki butona tıklayarak programı indirin ve yazı sonunda ki videoyu izleyin   [su_button url="https://cloud.mail.ru/public/81n1/fXX5LkTcT" background="#720706" size="12" icon="icon: cloud-download"]İndirmek için buraya tıklayın[/su_button] . https://www.youtube.com/watch?v=ziuRLvjRVKs
Devamı

Blogger Sayfayı Aşağı Yukarı Kaydırma Butonları

Resim
Blogger Sayfayı Aşağı Yukarı Kaydırma Butonları 1-Blogger panelinde sol menüde ki Tema kısmına girin 2-Sayfanın ortasında ki HTML’i düzenle kısmına tıklayın 3-Kodların olduğu herhangi bir yere tıklayın ve CTRL+F tuş kombinasyonu yardımıyla arama kutusunu açın 4-  ]]></b:skin>  kodunu aratıp bir satır  üzerine  aşağıda ki kodu ekleyin. <style> #blogToTop{position:fixed;display:none;list-style:none;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99} #blogToTop a{display:inline-block;background:#fff;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:100%;-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14)} #blogToTop a:hover{-webkit-box-shadow: 0 4px 6px 0 rgba(0,0,0,0.14);box-shadow: 0 4px 6px 0 rgba(0,0,0,0.14)} #top{position:absolute;top:0}</style> 5-Kodların olduğu herhangi bir yere tıklayın ve CTRL+F tuş kombinasyonu yardımıyla arama kutusunu açın 6- </body...
Devamı