Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blog

Apa Sebenarnya Bootstrap Itu? Dan Bagaimana Cara Memulainya?

    Bootstrap biasanya disebut sebagai sebuah framework CSS yang menyediakan komponen-komponen antarmuka yang dapat kita gunakan dalam pembuatan website yang dapat kita modif sesuai dengan keinginan kita.

    Pada awalnya Bootstrap di kembangkan pada pertengahan tahun 2010  di Twitter oleh Mark Otto dan Jacob Thornton .

    Setelah itu Bootstrap bisa dibilang menjadi  sangat populer di kalangan para web depelover, bahkan hampir semua pengembang web menggunakan framework yang dikembangkan oleh perusahaan twitter ini. 

    Kenapa begitu, ya yang jelas karena banyaknya kemudaan dan menurut saya sendiri sebih simple dalam penggunaanya. Dan dengan menggunakan framework bootstrap ini kita membuat website lebih cepat dan responsive tentunya.

    Kelebihan bootstrap

    Kalo ditanya apa kelebihan bootstrap , menurut saya ada banyak kelebihan yang kita dapatkan dalam menggunakan bootstrap. Diantaranya :

    • Kita dapat menggunakan fitur responsive Layout. Dengan adanya fitur ini kita dapat lebih mudah dalam mendesain ke responsivan website kita. Jadi, dengan menggunakan Bootstrap kita hanya perlu melakukan setingan sederhana maka Bootstrap akanlangsung melakukan penyesuaian lebar dari perangkat yang kita gunakan.
    • Yang paling bikin seneng lagi, kita sudah disediakan komponen-komponen yang akan kita gunakan dalam website kita. Dan kita langsung diberi gambaran bagaimana bentuk dari komponen tersebut.


    Cara menggunakan Bootstrap 

    Untuk menggunakan bootstrap langkah awal kita harus melakukan instalasi. Kita cukup pergi ke website resminya lalu mendownload semua yang kita butuhkan. http://getbootstrap.com/getting-started/
    Proses pemasangan Bootstrap sangatlah mudah, Kita hanya  menginclude file Bootstrap ke dalam file HTML. Silahka bikin file html dan masukka script berikut.

    • Untuk  memulai, silahkan gunakan aplikasi editor yang biasanya digunkan. Saya biasanya menggunkan NotePad++ dan Visual Studio Code. Kalau belum punya bisa menggunakan NotePad biasa.
    • Bikin file baru lalu copykan code dibawah ini. Setelah itu save dengan format Html

    <!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>Belajar Bootstrap Pemula</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>

    • Setelah anda selesai silahkan save. Dan tinggal kita dijalankan di browser maka akan terlihat hasilnya.

    Selamat Mencoba, semoga bermanfaat.