Senin, 20 Maret 2017

Bootstrap Affix

   No comments


Assalamualaikum Wr.Wb

1.pengertian
    Pada postingan kali ini saya akan menjelaskan tentang bootstrap Affix,apa itu bootstrap affix yaitu misalnya ada sebuah navbar yang letaknya tidak persis di atas agak di bawah konten header misalnya,lalu jika di scroll ke atas sampai navbar tersebut sudah sampai di ujung atas maka navbar itu akan fixed.Baiklah mari kita mulai saja.
2.Alat dan bahan
  • Pc atau Laptop
  • format file bootstrap
  • sublime text
  • Browser
3.langkah pembuatan
  • Tuliskan script di bawah,script ini sudah saya ubah sedikit stylenya dengan css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="witdh=device-witdh, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
      .affix{
          top: 0;
          width: 100%;
      }
      .affix + .container-fluid{
          padding-top: 70px;
      }
  </style>
</head>
<body>
<div class="container-fluid" style="background-color: #009900; color: #fff; height:200px;">
<h1>Contoh Bootstrap Affix</h1>
<h3>Scroll untuk melihat contoh affix</h3>   
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
    <li class="active"><a href="#">Blog Amatir</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
</ul>   
</nav>
<div class="container-fluid" style="height: 1000px">
    <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>
    <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>
    <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>
</div>
</body>
</html>

2.Berikut hasilnya sebelum di scroll ke bawah

 
3.bila di scrool ke bawah hasilnya kan seperti ini.
 

      Ya itu tadi sedikit mengenai Affix semoga bermanfaat, walaupun masih banyak kekurangan  sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.

4.Referensi:

Wassalamualaikum Wr.Wb 

0 komentar:

Posting Komentar