Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Terjemahan ke Bahasa Indonesia

Bootstrap - Demos Footer

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menakjubkan dari footer Bootstrap. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai!

Bootstrap - Footers Demo

Apa itu footer?

Sebelum kita masuk ke khususnya Bootstrap, mari kita mulai dari dasar. Bayangkan Anda membaca sebuah buku. apa yang biasanya Anda temukan di bagian bawah setiap halaman? Benar - nomor halaman, kadang-kadang judul bab, atau informasi lain yang membantu. Well, di dunia digital, kita memiliki sesuatu yang mirip untuk situs web, dan kita menyebutnya footer!

Footer adalah sebuah bagian di bagian bawah halaman web yang berisi informasi seperti:

  • Pemberitahuan hak cipta
  • Informasi kontak
  • Tautan ke halaman penting
  • Ikon media sosial
  • Menu navigasi cepat
  • Tautan ke pernyataan penolakan tanggung jawab atau kebijakan privasi

Pertimbangkan itu sebagai permohonan ramah di akhir halaman web Anda, menyediakan pengunjung dengan informasi yang berguna sebelum mereka pergi atau navigasi ke bagian lain dari situs Anda.

Mengapa menggunakan Bootstrap untuk footers?

Sekarang, Anda mungkin berpikir, "Mengapa harus menggunakan Bootstrap untuk footer?" Well, murid-murid yang antusias, Bootstrap seperti sebuah set alat superhero untuk pengembang web. Itu menyediakan komponen dan gaya yang terbuat sebelumnya yang membuat membuat elemen web responsif dan menarik menjadi hal yang mudah. Ketika bicara tentang footer, Bootstrap menawarkan:

  1. Desain responsif secara default
  2. Gaya konsisten di berbagai browser
  3. Sistem grid yang mudah digunakan untuk tata letak
  4. Komponen yang sudah di gayakan yang Anda dapat sesuaikan

Mari kita roll up lengan dan lihat bagaimana kita dapat membuat beberapa footer yang menakjubkan dengan Bootstrap!

Footer Bootstrap Dasar

Mari kita mulai dengan footer sederhana. Ini adalah contoh kode:

<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Konten Footer</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Tautan</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">Tautan 1</a></li>
<li><a href="#!" class="text-dark">Tautan 2</a></li>
<li><a href="#!" class="text-dark">Tautan 3</a></li>
<li><a href="#!" class="text-dark">Tautan 4</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Tautan</h5>
<ul class="list-unstyled">
<li><a href="#!" class="text-dark">Tautan 1</a></li>
<li><a href="#!" class="text-dark">Tautan 2</a></li>
<li><a href="#!" class="text-dark">Tautan 3</a></li>
<li><a href="#!" class="text-dark">Tautan 4</a></li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Hak Cipta:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

mari kitauraikan ini:

  1. Kita mulai dengan tag <footer> dan memberikan beberapa kelas Bootstrap untuk gaya.
  2. Di dalamnya, kita memiliki sebuah wadah dengan baris dan kolom (sistem grid Bootstrap).
  3. Kita telah membagi footer menjadi tiga bagian: konten utama dan dua kolom tautan.
  4. Di bagian bawah, kita memiliki pemberitahuan hak cipta.

Keajaiban kelas Bootstrap membuat ini responsif, berarti itu akan terlihat bagus di keduanya desktop dan perangkat mobile!

Footer Lekat

kadang-kadang, Anda ingin footer Anda menempel di bagian bawah halaman, terutama saat tidak ada cukup konten untuk menekannya ke bawah. Ini adalah cara Anda dapat membuat footer lekat:

<body class="d-flex flex-column min-vh-100">
<!-- Konten utama Anda disini -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer Lekat</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>

Dalam contoh ini:

  1. Kita menggunakan flexbox untuk memastikan footer tetap di bagian bawah.
  2. Kelas min-vh-100 memastikan tubuh mengambil setidaknya tinggi viewport penuh.
  3. Kelas mt-auto di footer mendorongnya ke bawah.

Footer dengan Ikon Sosial

Ayo tambahkan sedikit keadaan dengan ikon media sosial! Ini adalah contoh:

<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>

<!-- LinkedIn -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>

<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Hak Cipta:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Footer ini:

  1. Menggunakan latar belakang gelap dengan teks putih untuk kontras.
  2. Menggunakan ikon media sosial sebagai tombol.
  3. Menggunakan Font Awesome ikon (pastikan untuk menyertakan pustaka Font Awesome).

Kesimpulan

Dan begitu Anda mendapatkannya, murid-murid yang menakjubkan! Kita telah mengeksplorasi dunia footer Bootstrap, dari sederhana ke lekat ke sosial. Ingat, footer seperti buah keras di atas es krim web Anda - mungkin di bagian bawah, tapi mereka bisa membuat situs Anda bersinar!

Saat Anda terus melanjutkan perjalanan pengembangan web Anda, jangan takut untuk mencoba gaya footer yang berbeda. Campurkan dan sesuaikan unsur-unsur, mainkan warna, dan terutama, bersenang-senang dengannya!

Terus mengoding, terus belajar, dan ingat - di dunia pengembangan web, footer hanya permulaan!

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap - Demo Header
Tutorial Selanjutnya:
Bootstrap - Demo Pahlawan