Cara menggunakan bootstrap

Cara menggunakan bootstrap

Cara menggunakan bootstrap pada seri kali ini kita akan membahas bagaimana cara menggunakan bootstrap, namun sebelum itu silahkan baca terlebih dahulu mengenai bootstrap. Cara menggunakan bootstrap sangat lah mudah kita hanya memanggil class-class yang sudah di sediakan oleh bootstrap itu sendiri, namun untuk menggunakan bootstrap tersebut tentunya harus kita instalasi terlebih dalu, untuk melakukan instalasi bootstrap silahkan salin code dibawah ini kemudian letakkan di antara tag head.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
link diatas digunakan untuk memanggil css dari bootstrap secara online, selain css kita juga akan melakukan instalasi javascript  yang di sediakan oleh bootstrap.
Cara menggunakan bootstrap
Untuk memanggil javascript yang disediakan bootstrap letakkan script dibawah ini diantara tag body.
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Dari kedua script diatas kita telah berhasil melakukan instalasi freamwork bootstrap,dan selanjut nya tinggal memanggil class yang telah disediakan bootstrap.

Cara menggunakan basic template bootsrtap

Dari penjelasan diatas kita telah melakukan bagaimana instalasi css dan javascript yang disediakan oleh bootstrap, selanjut nya kita akan menggabungkan kedua cara tersebut kedalam satu dokumen html, untuk melakukan nya silahkan ikuti code dibawah 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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>
sekian pembahasan mengenai cara menggunakan bootstrap semoga bermanfaat, untuk mengecek secara lengkap mengenai bootstrap ini silahkan kunjungi dokumentasi nya disini dan jangan lupa untuk mengecek daftar isi serba ngoding untuk mengetahui update tutorial terbaru mengenai pemrograman web. 

0 Response to "Cara menggunakan bootstrap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel