Tutorial Bootstrap: Cara Menggunakan Bootstrap

Tutorial Bootstrap: Cara Menggunakan Bootstrap Bagi Pemula

Cara menggunakan bootstrap – membuat tampilan/style sebuah halaman web memerlukan ketelitian, kita harus memperhatikan perpaduan warna, kerapiaan, responsive dan tentunya melihat apakah desain tersebut mudah digunakan pengguna?.




Dalam pembuatan tampilan menggunakan css manual anda akan dituntut untuk sangat teliti sehingga mau tidak mau anda harus sering mengecek di browser apakah tampilan yang anda buat sudah baik.

Hal yang cukup melelahkan dan memakan banyak waktu jika anda harus mengetik kode secara manual dan serta membuat tampilannya responsive.

Namun semua itu bisa anda minimalisir jika menggunakan bootstrap, dengan menggunakan css framework bootstrap anda tidak usah terlalu repot memikirkan apakah desain yang anda buat responsive

Karena dengan menggunakan bootstrap desain yang telah anda buat akan otomatis responsive, dan tentunya anda tidak perlu repot-repot mengetik kode css panjang lebar

Anda cukup mengincludekan bootstrap css kemudian ketik class pada atribut html anda dan css akan tergenerate secara otomatis.

Bagaimana Cara Menggunakan Bootstrap Bagi Pemula?

Cara penggunaannya sangat mudah, berikut ini contohnya:

  1. Download Compiled Bootstrap

    Pertama anda silahkan unduh dulu compiled bootstrap kemudian ekstrak, proses ekstrak akan menghasilkan 2 buah folder css dan js => pindahkan pada satu folder.
    bootstrap css

  2. Buat file index.html

    Buatlah sebuah file index.html didalam folder yang sama.

  3. Menggunakan class Untuk Perintah Bootstrap

    Cara penggunaannya anda hanya perlu memanggil nama classnya saja, contohnya anda akan membuat sebuah navbar, maka anda hanya perlu memasukkan kode dengan class berikut pada tag <body> disini… </body>, contoh :

    <body>
    
    <nav class="navbar navbar-light bg-light">
    
    <a class="navbar-brand" href="#">Navbar</a>
    
    </nav>
    
    </body>

    selanjutnya anda tinggal panggil file bootstrap cssnya (jika anda ingin menambahkan konten lain seperti button, carousel dan dropdown anda bisa memasukkan code perintah yang bisa anda lihat di dokumentasi bootstrap)

  4. Contoh Membuat sebuah navbar dengan bootstrap

    Silahkan anda buka file index.html menggunakan notepad atau html code editor dan masukkan kode berikut, :

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
    
    </head>
    
    <body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    
    <a class="navbar-brand" href="#">Navbar</a>
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    
    <span class="navbar-toggler-icon"></span>
    
    </button>
    
    <div class="collapse navbar-collapse" id="navbarNav">
    
    <ul class="navbar-nav">
    
    <li class="nav-item active">
    
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    
    </li>
    
    <li class="nav-item">
    
    <a class="nav-link" href="#">Features</a>
    
    </li>
    
    <li class="nav-item">
    
    <a class="nav-link" href="#">Pricing</a>
    
    </li>
    
    <li class="nav-item">
    
    <a class="nav-link disabled" href="#">Disabled</a>
    
    </li>
    
    </ul>
    
    </div>
    
    </nav>
    
    </body>
    
    </html>
  5. Masukkan (include) Bootstrap CSS

    langkah selanjutnya silahkan anda masukkan/include bootstrap.css menggunkan perintah <link rel=”stylesheet” href=”css/bootstrap.css”> pada tag <head> … include disini </head> kemudian save proyek, contoh :
    menggunakan bootstrap

  6. Buka index.html Dengan Google Chrome

    Langkah selanjutnya silahkan anda buka file index.html dengan google chrome, begini tampilannya:
    3

Nah begitulah, jadi intinya menggunakan bootstrap hanya tinggal mencocokkan nama class yang ada di dokumentasi bootstrap, kemudian panggil class itu kedalam tag <body> disini… </body>, selanjutnya kita include/panggil file css bootstrapnya, selanjutnya kita tinggal jalankan.

Untuk konfigurasi merubah warna, maupun menambah konten lain supaya tidak campur aduk akan saya bahas di tutorial berikutnya.

Mungkin Anda juga menyukai

Tinggalkan Balasan

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