Cara Unduh dan Install Bootstrap 3

Cara Unduh dan Install Bootstrap 3

Cara Unduh dan Install Bootstrap 3 – Bertemu lagi bareng kita Koding Budi yang senantiasa membahas seputar pemrograman. Dan kali ini Koding Budi berkesempatan untuk membahas Cara Unduh dan Install Bootstrap 3.

Ada dua pilihan cara memakai Bootstrap. Disini saya menggunakan bootstrap 3 terlebih dahulu. Cara pertama dengan mengunduh lalu memasang file Bootstrap ke proyek web anda. Cara ke-2 dengan merujuk file-file Bootstrap dengan cara langsung dari CDN ke proyek web, tidak dengan mengunduh file apa pun.

Untuk mengunduh Bootstrap 3, anda bisa mengunjungi situs resmi Bootstrap https://getbootstrap.com/docs/3.3/

Cara Install Bootstrap 3

Untuk menempatkan Bootstrap yang sudah anda unduh, ekstrak terlebih dulu file bootstrap. Anda akan memperoleh 3 folder. yakni css,js serta fonts.

Salin serta letakkan ketiga folder itu ke dalam proyek web anda. Anda dapat meletakkannya di direktori utama web anda, atau buat folder khusus, contohnya folder dengan nama assets. Saat ini bootstrap anda terapkan ke halaman-halaman web di proyek anda. Berikut aturan dasar aplikasi bootstrap ke sebuah halaman web :

  • Pastikan tetap memakai HTML5 untuk membuat halaman web. Dokumen berbasiskan HTML5 diikuti dengan deklarasi <!DOCTYPE html> . Mengenai atribut lang (bahasa) pada tag dapat anda sesuaikan dengan konten web anda, apakah en(Englis), id(Bahasa Indonesia), atau kode ISO bahasa yang lain.
<!DOCTYPE html>
<html lang="id">
...
...
</html>
  • Pastikan tetap menambahkan tiga baris meta berikut, persis dibawah tag pembuka <head> . Baris meta pertama menetapkan penggunaan character encoding UTF-8. Baris meta ke-2 untuk menetapkan browser IE. supaya merender dokumen menggunakan mode IE versi paling baru. Baris meta ketiga untuk kebutuhan web responsive, dengan default rasio perbesaran 1.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Pastikan file css versi ringkas bootstrap (bootstrap.min.css) anda sisipkan di antara tag . Di bawah ini ialah kode pemanggilannya bila bootstrap anda tempatkan di folder assets (Sesuaikan dengan tempat di proyek web anda) :
<link href="assets/css/bootstrap.min.css">
  • Pastikan file javascript versi ringkas dari jquery serta bootstrap anda sisipkan dibagian paling bawah dokumen, persis sebelum tag penutup . Penempatan javascript diakhir dokumen HTML mempunyai tujuan supaya nanti loading halaman web jadi lebih cepat. Jquery merujuk langsng ke Google API, sedangkan javascript bootstrap di panggil dari internal web.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>

Contoh susunan lengkap pemasangan bootstrap dalam suatu dokumen html ialah seperti berikut

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

You May Also Like

About the Author: admin

Tinggalkan Balasan

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