Cara Penggunaan Framework Bootstrap terbaru 2017


1. Persiapan

      Langkah pertama untuk memulai adalah men download file framework bootstrap, download dimana di situs resminya di www.getbootstrap.com . dan langkah kedua adalah download jquery, download di situs resminya di www.jquery.com . yang sudah melakukan ini sebelumnya silahkan step ini di skipp aja.

         Langkah selanjutnya ialah menaruh file bootstrap dan jquery tadi di dalam folder. Jadi silahkan buat folder di ( saya disini mengunakan xampp ) silahkan disesuaikan saja ya dengan yang anda pakai.
Buat folder baru di 
c:/xampp/htdocs/ dan kasih nama “belajar” 
jadi urutannya jadi 
c:/xampp/htdocs/belajar
Pada defaultnya susunan file bootstrap seperti ini :

      Silahkan kalian pindah pindah / copy semua file ini kedalam folder “ belajar “ yang sudah di buat tadi. Dan untuk file jquery yang sudah di download tadi silahkan pindah juga kedalam folder “ js “ bawaan bootstrap tersebut dan rename menjadi “ jquery.js “ agar memudahkan pemanggilan nantinya, pada defaultnya nama jquery masih ada embel embel di belakangnya sesuai dengan versi yang anda download, jadi lebih baik rename aja menjadi “ jquery.js “ taruh di dalam folder 
/belajar/js/jquery.js 

2. Memulai

        Silahkan buat file baru dengan editor kesayangan kalian ( disini saya menggunakan sublimetext2 free version ) simpan di folder c:/xampp/htdocs/belajar beri nama index.html jadi 
c:/xampp/htdocs/belajar/index.html
Langkah pertama ialah membuat code awalan seperti biasa, silahkan ketikan kode di bawah ini. 
<!DOCTYPE html>
<html lang="en">
      <head>
        <title>belajar bootstrap</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet"href="css/bootstrap.css">
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap.js"></script>
</head>
<body>
</body>
</html>
Penjelasan : 
     jadi standard dokumen pertama adalah seperti code di atas, please jangan buka karna tidak akan ada apa apa nya melainkan hanya ada title. 
Perhatikan code ini 
<meta name="viewport" content="width=device-width, initial-scale=1">
     code di atas adalah code agar desain kita responsive. Dan perlu di perhatikan pemanggilan bootstrap.js harus sesudah pemanggilan jquery.js , jadi jangan sekali kali memanggil file bootstrap.js terlebih dahulu sebelum jquery.js kalau javascript bootstrap ingin berjalan.

3. Container
         Container di bootstrap ada dua class, pertama .container container ini lebarnya tidak full kedua .container-fluid . container ini lebar nya full langsung ke code nya aja yah biar faham, saya juga bingung jelasinnya :p.

 <!DOCTYPE html>
 <html lang="en">
     <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"href="css/bootstrap.css">
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.js"></script>
      </head>
<body>
     <div class="container">
        <h1>halaman pertama belajar bootstrap</h1>
        <p>hallo. . ini adalah halaman pertamaku menggunakan bootstrap</p>
     </div>
</body>
</html>
Coba code di atas modifikasi, yaitu class="container"> ubah mejadi class="container-fluid"> .
Sudah tau bedanya ?

4. Column bootstrap

Ini adalah hal penting dan hal yang sangat berguna dari framwork bootsrap itu sendiri.
Bootstrap menggunakan sampai dengan 12 column . yaitu column 3 , column 4 , column 6 , column 8 , column 12 .
Itu sih sudah standard lebar lebar yang biasanya kita gunakan saat desain website. Sebenarnya bisa saja kita gunakan column 1 , column 2 dst jika di butuhkan. 
Contoh lengkapnya seperti ini: 

Jadi bisa kita simpulkan, jika di dalam web kita menginginkan ada konten dan sidebar, kita bisa gunakan column 8 untuk konten, dan column 4 untuk sidebar. Bisa di pahami kan ? gunakan sesuai kebutuhan aja,
struktur Kodenya seperti ini:

 <div class="row">
      <div class="col-*-*"></div>
 </div>
<div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
     <div class="col-*-*"></div>
</div>
<div class="row"> ...</div>

    Class row memungkinkan kita menyusun column menjadi rowspan / kebawah, Column di bootstrap itu sendiri ada beberapa , ada extra small, small, medium dan large. Implementasinya seperti ini.
<div class=”col-xs-4”> column extra small </div>
<div class=”col-sm-4”> column small </div>
<div class=”col-md-4”> column medium </div>
<div class=”col-lg-4”> column large </div>

     Di antara column empat di atas lebarnya sama, perbedaannya di hal responsive desain. Jadi jika di device ekstra small, gunakan “ xs “ jika di device small, maka gunakan “ sm “ dan seterusnya sesuai kebutuhan,
Bisa juga anda gunakan semua, contohnya
<div class=”col-xs-4 col-sm-4 col-md-4 col-lg-4”>
</div>
    Untuk menggunakan column column di bootstrap cukup memanggil seperti di atas, misal column 4 <div class=”col-md-4”> artikel dsb disini </div> misal column 8 <div class=”col-md-8”> artikel dsb disini </div> dan seterusnya sesuai kebutuhan . biar ga bingung akan saya kasih contohnya silahkan di praktekan.

<!DOCTYPE html>
<html lang="en">
<head>
     <title>Bootstrap Example</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet"href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
  <div class="container">
      8 Ebook bootstrap bahasa indonesia | www.bungloon.com
  <div class=”col-md-8”>
      <h1>ini adalah konten pertama</h1> <p>hallo. . ini adalah isi konten bootstrap ini           adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap ini adalah isi konten bootstrap </p>
     </div>
     <div class=”col-md-4”>
ini adalah sidebar pertama ku ini adalah sidebar pertama ku ini adalah sidebar pertama ku ini adalah sidebar pertama ku ini adalah sidebar pertama ku ini adalah sidebar pertama ku
    </div>
 </div>
 </body>
</html>

Sekian yang dapat saya share kali ini, semoga bermanfaat bagi kalian semua. 
Cara Penggunaan Framework Bootstrap terbaru 2017 Rating: 4.5 Diposkan Oleh: Mambaur Roziq Alwi

No comments:

Post a Comment