Jumat, 10 Februari 2017

18.34

By Unknown



1 comment

Bootstrap : Membuat footer sederhana

Assalamualaikum wr. wb
Hallo teman semua pada kesempatan kali ini saya memposting bagaimana cara membuat footer menggunakan bootstrap. Berikut langkah-langkahnya


LATAR BELAKANG
Pada suatu program atau aplikasi biasanya sering menggunakan footer sebagai salah satu bagian dari layout web.
 
MAKSUD DAN TUJUAN
Untuk mempraktekan apa yang telah saya pelajari mengenai bootstrap diw3schools

ALAT DAN BAHAN
  • Bootstap
  • Sublime text
  • Laptop
TAHAP PELAKSANAAN
  • Langkah pertama, kita harus siapkan file bootstrapnya apabila sudah ada atau download terlebih dahulu disini. 
  • File bootstrap diletakan satu folder dengan file footer
  • Kemudian buat file diberi nama footer.html
  • Selanjutnya tulis script dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
     <title>FOOTER</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
</head>
<body>
      <div class="container-fluid">
          <div class="row">
             <div class="col-sm-12" style="background-color:#171717; color:white; text-align: center;"><h1>LOREM IPSUM</h1>
             <hr style="background-color: #4E4E4E;">
             <a href="#"><img class="image" border="0" title="#" src="image/f.png" width="40px" height="40px" ></a>

             <a href="#"><img class="image" border="0"title="#" src="image/ig.png" width="40px" height="40px"></a>

             <a href="#"><img class="image" border="0"title="#" src="image/gp.png" width="40px" height="40px"></a>

             <a href="#"><img class="image" border="0"title="#" src="image/tw.png" width="40px" height="40px"></a>

             <a href="#"><img class="image" border="0"title="#" src="image/y.png" width="40px" height="40px"></a>
      <br>
      <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
     
    <hr style="background-color: #4E4E4E;">
      Copyright &copy; 2017 Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    </div>
  </div>
</div>
</body>
</html>
  • Kalau sudah save file tersebut (ctrl+s)
  • Hasilnya akan muncul seperti dibawah ini 

Dari hasil yang diatas anda bisa menambahkan judul, media sosial maupun keterangan-keterangan mengenai aplikasi yang anda buat.

Keterangan  :
  • <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>, digunakan untuk memanggil file bootstrap.
  • <div class="container-fluid">, digunakan untuk isi agar full atau penuh.
  • <div class="row">
    <div class="col-sm-12>, menambahkan kolom anda dapat memasukan sesuai keinginan anda 12 merupakan untuk tampilan penuhnya.

KESIMPULAN
Dengan menggunakan bootstrap, tampilan website bisa responsive.

REFERENSI
https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Sekian dan terimakasih 

1 komentar: