<p>Oke Sebelum kita melangkah ke tutorial <strong>Cara menggunakan Bootstrap Untuk Pemula </strong>ada baiknya kita simak dulu.</p>
<p>Apa itu bootstrap?</p>
<p><strong>Bootstrap</strong> adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.</p>
<p>Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.</p>
<p>OK. Cukup segitu aja. untuk selengkapnya silahkan baca2 di wiki..atau web resminya.</p>
<p>Sekarang kita lanjut ke tutorial cara penggunaan bootstrap.</p>
<p>1. Download dulu bootstrapnya <a href="http://adf.ly/1mZi4R" target="_blank" rel="noopener noreferrer">Disini.</a> versi terbaru untuk saat ini yaitu bootstrap 3.2</p>
<p>2. Ektrak dan taruh dalam satu folder. biarkan strukturnya seperti dibawah ini.</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/bootstrap.png"><img class="aligncenter size-full wp-image-5975" src="https://www.tutorialpedia.net/wp-content/uploads/bootstrap.png" alt="cara menggunakan boostrap" width="373" height="135" /></a></p>
<p> ;</p>
<p>3. Buka text editor seperti notepad, notepad++ ,sublime text dsb.</p>
<p>yang dikira nyaman aja di pake, kalau saya sendiri menggunakan notepad++(karena sekarang cuma ada itu, biasanya pake sublime ð )</p>
<p>4. klik <strong>New </strong>dan buat tag html,head,body seperti biasa.</p>
<p> ;</p>
<p>5. Klik <strong>Simpan</strong>(CTRL+S) lalu tempatkan di file bootstrap yang sudah di ektrak tadi. beri nama</p>
<p>misalkan<strong> latihan.html</strong></p>
<p> ;</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/bootstrap2.jpg"><img class="aligncenter size-full wp-image-5977" src="https://www.tutorialpedia.net/wp-content/uploads/bootstrap2.jpg" alt="cara menggunakan bootstrap" width="272" height="186" /></a></p>
<p>6. Nah sekarang kita panggil CSS bootstap dengan perintah eksternal.</p>
<p>Apa itu perintah external? baca2 dulu <a href="https://www.google.com.sg/#q=perintah+external+untuk+memanggil+css" target="_blank" rel="noopener noreferrer">disini</a>.</p>
<p>7. Masukkan code berikut diantara tag <;head>; dan <;/head>;</p>
<pre class="lang:css decode:true"><;meta name="viewport" content="width=device-width, initial-scale=1.0">; 
<;!-- Bootstrap -->; 
<;link href="css/bootstrap.min.css" rel="stylesheet">; 
<;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
queries -->; 
<;!-- WARNING: Respond.js doesn't work if you view the page 
TUTORIALS POINT 
Simply Easy Learning 
via file:// -->; 
<;!--[if lt IE 9]>; 
<;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/ 
html5shiv.js">;<;/script>; 
<;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/ 
respond.min.js">;<;/script>; 
<;![endif]-->;</pre>
<p>Sehingga akan terlihat seperti ini.</p>
<p> ;</p>
<p>8. Setelah itu masukkan code berikut diatas tag <;/body>;<code><br />
</code></p>
<pre class="lang:css decode:true"><;!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->; 
<;script src="https://code.jquery.com/jquery.js">;<;/script>; 
<;!-- Include all compiled plugins (below), or include individual files 
as needed -->; 
<;script src="js/bootstrap.min.js">;<;/script>;</pre>
<p>Penampakannya akan seperti berikut ini.</p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/bootstrap3.jpg"><img class="aligncenter size-full wp-image-5978" src="https://www.tutorialpedia.net/wp-content/uploads/bootstrap3.jpg" alt="cara menggunakan bootstrap" width="294" height="171" /></a></p>
<p> ;</p>
<p>9. Sekarang Kita buat tulisan di diantara tag <;body>; dan <;/body>;</p>
<p><span style="text-decoration: underline;">Ex:</span></p>
<pre class="font-size:13 lang:css decode:true"><;h1>;<;center>;Hello World!<;/center>;<;/h1>;</pre>
<p> ;</p>
<p><strong>Tampilan HTML biasa tanpa bootstrap</strong></p>
<p><a href="https://s5.postimg.org/x5kj5gbhj/Screenshot_48.png"><img class="aligncenter size-medium" src="https://s5.postimg.org/x5kj5gbhj/Screenshot_48.png" alt="" width="1049" height="409" /></a></p>
<p><strong>Tampilan HTML yang sudah menggunakan bootstrap</strong></p>
<p><a href="https://s5.postimg.org/3rospv8rr/Screenshot_49.png"><img class="aligncenter size-medium" src="https://s5.postimg.org/3rospv8rr/Screenshot_49.png" alt="" width="969" height="387" /></a></p>
<p>itulah tutorial sederhana cara menggunakan bootstrap untuk pemula. Adapun keuntungan apabila kita menggunakan framework css bootstrap adalah kita tidak perlu repot-repot lagi mendesain web dengan css dari awal, cukup gunakan class-class yang sudah di sediakan oleh bootstrap. Untuk lebih detailnya silahkan kunjungi situs resmi bootstrap <a href="http://adf.ly/1mZi5i">disini</a>.</p>
<p> ;</p>

Tutorial Cara Menggunakan Bootstrap Untuk Pemula
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
Related Articles
1 Comment
Leave A Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
sebenarnya aq cukup tertarik untuk belajar ttng topik yg seperti ini