Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Demu Kaki

Haih, rakan-rakan pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap footers. Seperti guruku yang ramah di lingkungan komputer sains, saya sangat gembira untuk memandu anda dalam perjalanan ini. Jadi, ambil minuman kesukaan anda, duduk dengan nyaman, dan mari kita mulai!

Bootstrap - Footers Demo

Apa itu footer?

Sebelum kita masuk ke khususannya Bootstrap, mari kita mulai dari dasar. Bayangkan anda membaca buku. Apa yang biasanya anda temui 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 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 ini sebagai pengucapan selamat tinggal yang ramah di akhir halaman web anda, menyediakan pengunjung dengan informasi yang berguna sebelum mereka meninggalkan atau mengarah ke bagian lain situs anda.

Mengapa menggunakan Bootstrap untuk footers?

Sekarang, anda mungkin bertanya-tanya, "Mengapa saya harus menggunakan Bootstrap untuk footer?" Well, murid-murid yang antusias, Bootstrap seperti peralatan superhero bagi pengembang web. Ini menyediakan komponen dan gaya yang sudah dibangun sebelumnya yang membuat membuat elemen web responsif dan menarik menjadi hal yang mudah. Ketika bicara tentang footers, Bootstrap menawarkan:

  1. Desain responsif sejak awal
  2. Gaya konsisten di berbagai browser
  3. Sistem grid yang mudah digunakan untuk Tata letak
  4. Komponen yang sudah di gayakan yang anda dapat menyesuaikan

Mari kita merapatkan lengan dan lihat bagaimana kita dapat membuat footers yang menakjubkan dengan Bootstrap!

Footer dasar Bootstrap

Mari kita mulai dengan footer yang 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">Kandungan 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. Didalamnya, kita memiliki wadah dengan baris dan kolom (sistem grid Bootstrap).
  3. Kita telah membagi footer menjadi tiga bagian: kandungan utama dan dua kolom tautan.
  4. Di bagian bawah, kita memiliki pemberitahuan hak cipta.

Magic kelas Bootstrap membuat ini responsif, berarti itu akan terlihat bagus di keduanya desktop dan perangkat移动!

Footer yang melekat

kadang-kadang, anda ingin footer anda melekat di bagian bawah halaman, terutama ketika tidak ada cukup konten untuk menekannya ke bawah. Ini adalah cara anda dapat membuat footer yang melekat:

<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 yang melekat</h1>
<p class="lead">Pin footer ke bagian bawah viewport di browser desktop dengan HTML dan CSS khusus ini.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Tempatkan konten footer disini.</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 pada footer menekannya ke bagian bawah.

Footer dengan Ikon Media Sosial

Mari kita menambahkan sedikit kegembiraan 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 mencantumkan pustaka Font Awesome).

Kesimpulan

Dan itu adalah, rakan-rakan murid! Kita telah mengeksplorasi dunia Bootstrap footers, dari yang sederhana ke yang melekat ke yang sosial. Ingat, footers seperti buah keras di atas es krim halaman web anda - mungkin di bagian bawah, tetapi mereka bisa membuat situs anda bersinar!

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

Credits: Image by storyset

Tutorial Sebelumnya:
Bootstrap - Demo Bendera
Tutorial Seterusnya:
Bootstrap - Demo Pahlawan