Cara Membuat Website Dengan Bootstrap 5

Admin

 Apa itu Bootstrap?

Bootstrap adalah framework CSS yang digunakan khusus untuk pengembangan front-end website. Framework ini mempunyai nama asli Twitter Blueprint. Ada kata ‘Twitter’ karena pada awalnya dikembangkan untuk sosial media Twitter yang sangat terkenal saat ini dengan pengguna hampir 326 juta orang.
Sebelum Bootstrap muncul, sudah ada framework lain yang tersedia. Namun tingkat konsistensi dalam proses pengembangan buruk dan butuh biaya perawatan mahal. Dengan adanya khasus ini, akhirnya para Developer menemukan Bootstrap yang berbeda dengan framework sebelumnya karena lebih konsisten dan lebih sederhana. 
Bootstrap adalah salah saatu frameework yang memungkinkan developer dapat mengembangkan website dengan mudah dan cepat. Developer hanya perlu memanggil class tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dan lain sebagainya.
Untuk memulai dan lebih jelasnya silahkan kunjungi situs resminya Disini. 


Langsung Kita Mulai saja cara penggunaannya.

Instalasi Secara Online
    Maksud dari instalasi secara online adalah menguhubungkan tag HTML dan bootsrtat dengan cara online, jadi kita tidak perlu download bootstrap yang akan kita gunakan.

1. Pertama buka web server, Disini menggunakan XAMPP bagi yang menggunakan web server lain bisa menyesuaikan. Kemudian jalankan Apachenya.


2. Buat Folder baru Di C:\xampp\htdocs dengan nama bootstrap.


3. kemudian buat file baru didalam folder bootstrap dengan nama index.html (File berekstensi .html) atau lebih tepatnya seperti ini 
4. Selanjutnya edit file index.html dengan text editor yang anda miliki. setalah itu buka bootsrtap di situs resminya klik disini  , dan pilih menu Get started.
5. Pilih menu Startter Template kemudian copy script yang ada di dalamnya dengan cara klik menu copy.
6. Selanjutnya paste script yang sudah di copy tadi kedalam file index.html tadi atau bisa copy 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">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Belajar Bootstrap</title>
  </head>
  <body>
    <h1>Belajar Bootstrap Online</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>


7. Selanjutnya buka browser anda untuk menjakankan hasilnya ketikkan localhost/bootstrap pada kolom URL Browser anda, jika sukses hasilnya seperti ini. 
Keterangan:  
tag <meta name="viewport" content="width=device-width, initial-scale=1"> digunakan untuk membuat responsive meta tag.
tag  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> Digunakan untuk menghubungkan CSS bootstrap 5 secara online.
Sekian tutorial dari Gubok KodingSemoga bermanfaat bagi kita semua. terimakasih.

0 Comments