Belajar membuat tampilan web lebih responsive dengan Bootstrap

Belajar membuat tampilan web lebih responsive dengan Bootstrap

Hello guys kali ini mimin akan membagikan tutorial bagaimana cara membuat tampilan web lebih responsive dengan menggunakan framework bootstrap.

Sebagai calon web developer yang baik sudah pasti kita harus bisa membuat tampilan sendiri pada web yang akan kita buat dan tentunya lebih mengedepankan User Experience dalam web yang akan kita buat untuk mempermudah dan membuat pengalaman user lebih menyengankan.

Dalam membuat tampilan web kini kita dipermudah dengan adanya bootstrap sebagai framework yang dapat digunakan pada laman web yang akan kita buat nantinya dan dapat digabungkan dengan css yang kita buat sendiri untuk memperindah laman web kita

Terus apa kelebihan dari penggunaan bootstrap?

Dengan memakai framework bootstrap laman web yang akan kita buat dapat menjadi lebih responsive ( Dapat menyesuaikan bentuk laman web dengan ukuran layar yang dibuka pada setiap device )

Bagaimana cara memakainya?

Sebelum kita belajar memakainya kita akan memulai dengan bagaimana cara menginstall bootstrap tersebut pada web yang akan kita buat.

Untuk menginstal bootstrap pada laman web yang akan kita buat ada 2 cara yaitu :

1. Menggunakan eksternal Bootstrap
2. Dan Cloud Bootstrap

Nah mimin akan membagikan tutorial bagaimana cara menginstal bootstrap secara eksternal dan cloud

Cara menginstall Bootstrap Eksternal

Untuk menginstal bootstrap secara eksternal ikuti langkah - langkah dibawah ini :

1. Download Source code bootstrap versi 3.3.7 karena versi ke 4-nya masih alpha ( Belum disempurnakan ) Download disini
2. Setelah di download tambahkan Jquery juga agar mempermudah penggunaan javascript Download disini
3. Setelah itu ekstrak Bootstrap dan masukkan Jquery ke dalam menu js pada bootstrap dan ganti namanya menjadi jquery.js ( anda dapat langsung mengekstraknya pada computer localhost ataupun hosting milik anda )
   
   
   
   
   
4. Setelah itu tambahkan kode pada bagian head dalam laman codingan anda untuk memanggil kode bootstrapnya
   
   
   
   
5. Untuk memanggil jquerynya masih dengan cara yang sama hanya dengan mengganti kodenya menjadi
   
     <script src="https://Folder/jquery.min.js"></script>

     <script src="https://Folder/bootstrap.min.js"></script>


6. Selesai

Nah agar lebih mudah kita juga dapat menggunakan bootstrap dan jquerynya menggunakan cloud hanya dengan menambahkan kode berikut pada bagian headnya

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Untuk pemakaiannya kita dapat menyandingkan class pada framework bootstrap dengan framework CSS yang telah kita buat. Untuk mempelajari class pada bootstrap dapat kalian pelajari melalui link berikut ini KLIK DISINI

Ok gan selamat berkreasi dan terimakasih telah menyempatkan waktu untuk membaca artikel diblog ini

- Semoga Bermanfaat -