Cara Mudah Install Framework Bootstrap 4, Khusus Untuk Pemula!
Media Terbuka 18 April 2019 17:02 . 5 menit membaca 
Framework ini memudahkan para developer dan designer untuk membuat sebuah aplikasi web menjadi lebih cepat dan mudah dibandingkan dengan membuatnya dari awal. Berikut sedikit penjelasannya:
Apa Yang Membuat Framework Ini Begitu Membantu Pekerjaan Khususnya Untuk Para Developer dan Designer?
Bootstrap adalah sebuah kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS.
Kerangka Kerjanya Seperti Apa?
Framework ini telah membuat sekumpulan fungsi / prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan, tanpa harus membuat fungsi atau class dari awal.
Fitur Umumnya Pada Sebuah Framework
- Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
- Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat pengguna harus mengikuti pola standar yang ada).
- Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.
- Lebih bebas dalam pengembangan.
Cara Menggunakan Bootstrap
Pertama lakukan instalasi Bootstrap, download filenya ke website resminya di sini.
Pada pembahasan kali ini menggunakan versi terbaru yaitu v4.3. Ada beberapa cara untuk menginstall Bootstrap, admin akan bagikan ke teman-teman semua yaitu cara instalasi secara online dan offline.
Cara Menginstall Bootstrap Secara Online
Disini sudah disediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Gunakan tautan CDN Bootstrap berikut ini:
Complete CSS
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
Complete JavaScript – jQuery first, then Popper.js, then Bootstrap JS
https://code.jquery.com/jquery-3.3.1.slim.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
Template Awalan
Pastikan halaman teman-teman diatur dengan standar desain dan pengembangan terbaru. Itu berarti menggunakan doctype HTML5 dan termasuk meta tag viewport untuk perilaku responsif yang tepat. Gabungkan semuanya dan halaman akan terlihat seperti ini:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
Simpan file dengan nama index.html, jika dijalankan melalui browser akan tampil seperti ini:
Cara Menginstall Bootstrap Secara Offline
Pada bagian instalasi ini sangat banyak di gunakan oleh para developer terutama admin sendiri, perbedaannya jika teman-teman install secara online diwajibkan untuk terkoneksi dengan internet hal ini dikarenakan file Bootstrap-nya terletak pada server luar dan sebaliknya jika install secara offline tidak perlu terkoneksi dengan internet karena file framework Bootstrap sudah kita miliki.
Langkah – Langkah Instalasi
- Ekstrak file Bootstrap yang sudah didownload dan rubah nama foldernya menjadi “Bootstrap” atau apapun sesuai keinginan.
- Buatkan file index.html dan simpan ke dalam folder “Bootstrap”.
- Hubungkan file Bootstrap ke dalam script HTML, seperti di bawah ini:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-3.3.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Perhatikan script HTML di atas adalah standart dari Bootstrap. Jika teman-teman tidak menyisipkan script tersebut, maka Bootstrap tidak akan berjalan, hal ini perlu meletakkan link .css ini di bawah kode <head> dan diatas </head>
<link href="css/bootstrap.min.css" rel="stylesheet">
Kemudian letakkan link .js ini dibawah kode <body> dan diatas </body>
<script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script>
Jika dijalankan maka akan tampil seperti gambar di bawah ini:
Kesimpulan
Doctype HTML5
Bootstrap membutuhkan penggunaan doctype HTML5. Tanpa itu, teman-teman akan melihat beberapa gaya yang tidak lengkap.
<!doctype html> <html lang="en"> ... </html>
Tag meta responsive
Bootstrap dikembangkan terlebih dahulu untuk seluler, sebuah strategi di mana pihak team Bootstrap mengoptimalkan kode untuk perangkat seluler terlebih dahulu dan kemudian meningkatkan komponen yang diperlukan menggunakan kueri media CSS. Untuk memastikan rendering yang tepat dan sentuhan zoom untuk semua perangkat, tambahkan tag meta viewport responsive ke bagian <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Referensi:
https://getbootstrap.com/
Demikianlah pembahasan mengenai Cara Mudah Install Framework Bootstrap 4, Khusus Untuk Pemula! semoga bermanfaat, terima kasih.
Berbagi beragam konten edukatif seputar informasi teknologi.
You might also like