Tutorial Belajar Bootstrap Bagian 1 : Cara Menggunakan Bootstrap

Bootstrap adalah framework untuk front-end (HTML, CSS, dan JavaScript) yang paling populer dan tangguh saat ini, digunakan untuk membangun web responsif dengan lebih cepat dan lebih mudah.

Bootstrap memiliki template desain berbasis HTML dan CSS untuk membuat komponen antarmuka pengguna yang umum seperti formulir, tombol, navigasi, dropdown, peringatan, modals, tab, akordeon, carousel, tooltips, dan sebagainya.

Bootstrap memberi Anda kemampuan untuk membuat tata letak web yang fleksibel dan responsif dengan hanya sedikit usaha.

Bootstrap awalnya dibuat oleh seorang desainer dan developer di Twitter pada pertengahan 2010. Sebelum menjadi framework open source, Bootstrap dikenal sebagai Twitter Blueprint.

Anda dapat menghemat banyak waktu dan tenaga dengan menggunakan Bootstrap. Jadi, jika Anda ingin belajar cara membuat tampilan website dengan cepat namun keren, Anda wajib belajar bootstrap.

Yang Dapat Anda Lakukan dengan Bootstrap

Ada lebih banyak hal yang dapat Anda lakukan dengan Bootstrap.

  • Anda dapat dengan mudah membuat situs web yang responsif.
  • Anda dapat dengan cepat membuat tata letak multi-kolom dengan class yang telah ditentukan sebelumnya.
  • Anda dapat dengan cepat membuat berbagai tipe tata letak formulir.
  • Anda dapat dengan cepat membuat variasi bilah navigasi yang berbeda.
  • Anda dapat dengan mudah membuat komponen seperti akordeon, modals, dll. Tanpa menulis kode JS apa pun.
  • Anda dapat dengan mudah membuat tab dinamis untuk mengelola konten dalam jumlah besar.
  • Anda dapat dengan mudah membuat keterangan alat dan popovers untuk menampilkan teks petunjuk.
  • Anda dapat dengan mudah membuat carousel atau penggeser gambar untuk menampilkan konten Anda.
  • Anda dapat dengan cepat membuat berbagai jenis kotak peringatan.

Masih banyak keuntungan yang Anda dapatkan dengan menggunakan Bootstrap. Anda akan mempelajari semuanya secara mendetail di bab-bab selanjutnya.

Keuntungan Menggunakan Bootstrap

Jika Anda memiliki pengalaman menggunakan framework apa pun, Anda mungkin bertanya-tanya apa yang membuat Bootstrap begitu istimewa. Berikut beberapa keuntungan mengapa seseorang harus menggunakan framework Bootstrap:

  • Menghemat banyak waktu – Anda dapat menghemat banyak waktu dan tenaga menggunakan template dan class yang sudah didesain oleh Bootstrap dan berkonsentrasi pada pekerjaan pengembangan lainnya.
  • Fitur responsif – Dengan menggunakan Bootstrap Anda dapat dengan mudah membuat situs web responsif sesuai dengan perangkat dan resolusi layar yang berbeda tanpa perubahan kode markup.
  • Desain yang konsisten – Semua komponen Bootstrap berbagi template dan gaya desain yang sama melalui central library, sehingga desain dan tata letak halaman web Anda akan konsisten.
  • Mudah digunakan – Bootstrap sangat mudah digunakan. Anda hanya perlu pengetahuan dasar HTML, CSS dan JavaScript sudah bisa menggunakan Bootstrap.
  • Kompatibel dengan browser – Bootstrap dibuat dengan mempertimbangkan browser web modern dan kompatibel dengan semua browser modern seperti Chrome, Firefox, Safari, Internet Explorer, dll.
  • Open Source – Dan bagian terbaiknya adalah, ini sepenuhnya gratis untuk diunduh dan digunakan.

Apa yang Akan Diajarkan Dalam Tutorial Ini

Seri tutorial Bootstrap ini mencakup semua fitur kerja Bootstrap, dimulai dengan dasar-dasarnya, seperti sistem kisi, mekanisme gaya tipografi, metode gaya bentuk, serta, teknik penataan elemen antarmuka pengguna umum seperti tabel, daftar, gambar, dll. .

Selanjutnya Anda akan belajar bagaimana memanfaatkan komponen Bootstrap yang siap digunakan seperti grup input, grup tombol, objek media, navbar, panel, pagination, label dan lencana dll. Serta cara menyesuaikannya untuk membuat perbedaan.

Terakhir, Anda akan menjelajahi beberapa fitur lanjutan dari Bootstrap seperti membuat jendela modal, tab dinamis, tooltips, peringatan, menu akordeon, carousel, scrollspy, dll.

Serta cara menyesuaikan atau memperluas fungsionalitas yang ada menggunakan opsi dan metode yang tersedia. .

Memulai Bootstrap

Dalam tutorial ini Anda akan belajar betapa mudahnya membuat halaman web menggunakan Bootstrap. Tetapi sebelum memulai, pastikan untuk memiliki kode editor dan pengetahuan HTML dan CSS.

Untuk kode editor, saya sendiri menggunakan Visual Studio Code yang bisa Anda download dari sini.

Jika Anda baru memulai dunia pengembangan web, mulailah belajar dasar HTML dari sini & dasar CSS di sini.

Nah, mari kita mulai membuat halaman web menggunakan Bootstrap.

Membuat Halaman Web Pertama Anda dengan Bootstrap

Sekarang kita akan membuat template Bootstrap dasar dengan menyertakan file Bootstrap CSS dan JS, serta dependensi JavaScript lainnya seperti jQuery dan Popper.js melalui CDN.

Saya menyarankan Anda untuk menambahkan Bootstrap dalam proyek Anda melalui CDN (Jaringan Pengiriman Konten) karena CDN menawarkan manfaat kinerja dengan mengurangi waktu pemuatan, karena mereka menghosting file di beberapa server yang tersebar di seluruh dunia sehingga ketika pengguna meminta file, itu akan dikirimkan dari server terdekat.

Saya juga menggunakan tautan CDN dalam contoh ini.

Mari kita ikuti langkah-langkah berikut.

Langkah 1: Membuat file HTML Dasar

Buka aplikasi kode editor Anda dan buat file HTML baru.

Mulailah dengan jendela kosong dan ketik kode berikut dan simpan sebagai “dasar.html” di desktop Anda.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>File HTML Dasar</title>
</head>
<body>
    <h1>Halo, dunia!</h1>
</body>
</html>

Langkah 2: Buat File HTML ini Menjadi Template Bootstrap

Untuk membuat file HTML biasa menjadi template Bootstrap, cukup sertakan file Bootstrap CSS dan JS serta jQuery dan Popper.js yang diperlukan menggunakan tautan CDN mereka.

Untuk file JavaScript, sertakan link di bagian bawah halaman, tepat sebelum tag </body> penutup untuk meningkatkan performa halaman web Anda, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Template Bootstrap Dasar</title>
    
    <!-- Bootstrap CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
     eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

</head>
<body>
    <h1>Halo Bootstrap ! </h1>

    <!-- JS files: jQuery pertama, javascript bundle & Popper.js -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384- 
     JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

</body>
</html>

Selesai !

Setelah menambahkan file CSS dan JS Bootstrap serta pustaka jQuery dan Popper.js yang diperlukan, kita dapat mulai membuat website Bootstrap.

Catatan : Jika Anda menggunakan CDN untuk menyisipkan file Bootstrap, maka Anda harus terhubung ke Internet agar dapat melihat hasil desain yang Anda buat.

Langkah 3: Menyimpan dan Melihat File

Sekarang simpan file di desktop Anda sebagai “bootstrap-template.html”.

Untuk membuka file ini di browser web, pilih file “bootstrap-template.html”, lalu klik kanan, dan pilih browser web favorit Anda.

Catatan: Simpan file dengan ekstensi .html, beberapa editor teks, seperti Notepad di Windows, akan secara otomatis menyimpannya sebagai .txt jika anda tidak membuat ekstensinya.

Mengunduh File Bootstrap

Cara lain untuk bekerja dengan Bootstrap adalah, dengan mengunduh file CSS dan JS Bootstrap dari situs resmi dan memasukkannya ke dalam folder proyek Anda.

Dengan cara ini, Anda tidak perlu terhubung ke Internet untuk bisa melihat hasil desain Bootstrap yang dibuat.

Ada 2 versi yang tersedia untuk diunduh, file sumber Bootstrap dan file Bootstrap yang dikompilasi. Anda dapat mendownload file Bootstrap dari sini.

Unduhan terkompilasi berisi file CSS dan JavaScript versi terkompilasi dan dikecilkan untuk pembuatan web yang lebih cepat dan mudah.

Namun, versi yang dikompilasi tidak menyertakan JavaScript tambahan seperti jQuery dan Popper.js.

Unduhan sumber berisi file sumber asli untuk semua CSS dan JavaScript, bersama dengan salinan lokal dokumen tersebut.

Unduh dan unzip Bootstrap yang telah dikompilasi.

Sekarang jika Anda melihat ke dalam folder, Anda akan melihat file CSS dan JS yang dikompilasi (bootstrap. *), serta CSS dan JS yang dikompilasi dan dikompres (bootstrap.min. *).

Gunakan file bootstrap.min.css dan bootstrap.min.js.

Menggunakan versi minified dari file CSS dan JS akan meningkatkan kinerja situs web Anda dan menghemat bandwidth karena permintaan HTTP dan ukuran unduhan yang lebih kecil.

Tip: Harap dicatat bahwa plugin JavaScript Bootstrap membutuhkan jQuery untuk disertakan agar dapat bekerja.

Anda dapat mengunduh file jQuery versi terbaru di sini https://jquery.com/download/. Anda juga perlu memasukkan Popper.js sebelum JS Bootstrap agar tooltips bekerja!

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Template Bootstrap Dasar</title>
    
<!-- Bootstrap CSS only -->
<link href="css/bootstrap.css ">
</head>
<body>
    <h1>Halo Bootstrap ! </h1>

    <!-- JS files: javascript bundle & Popper.js -->
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.bundle.js"></script>

</body>
</html>

Artikel Lainnya

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0