Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Tutorial Bootstrap untuk Pemula

Tutorial Bootstrap untuk Pemula

Hai teman-teman, kali ini saya akan membuat tutorial bagaimana caranya membuat aplikasi web berbasis bootstrap, sebelumnya saya akan menjelaskan secara singkat apa itu bootstrap?

Bootstrap adalah sebuah Framework yang dikembangkan di Twitter oleh @mdo dan @fat, Bootstrap menggunakan LESS CSS, yang di-compile via Node, dan dikelola melalui GitHub untuk membantu nerds membangun web yang keren. Sekilas tentang Bootstrap Creator: @mdo (Mark Otto) dan @fat (Jacob) adalah desainer dan programmer Twitter yang membuat dan mengembangkan bootstrap.

Bootstrap sendiri telah berkembang kedalam beberapa versi, sampai saat ini sudah ada versi 3.3.2 (mungkin versi terbarunya) namun pada kali ini kita menggunakan bootstrap versi 3.3.2, karena versi 3.3.2 ini memiliki dokumentasi yang lengkap dan merupakan dasar bagi versi - versi selanjutnya.

berikut ini adalah langkah-langkah yang harus kita lalui untuk menggunakan bootstrap:

1. download Bootstrap

Anda dapat mendownload bootstrap versi 3.3.2 di  GetBootstrap.com, selain itu bootstrap juga menyediakan JQueryy, dan plugin-plugin javascript* (membutuhkan JQuery) dan file-file tambahan lainnya.

2. Membuat Folder dan Copy-Paste File Bootstrap

Sebelum latihan dengan Bootstrap, buatlah folder latihan di localhost. Kemudian setelah folder dibuat kita dapat mengextract file bootstrap yang telah kita download, dan mengcopykan ke dalam folder latihan tersebut.


Setelah itu dapat dibuat file index.html di dalam folder Latihan. Pertama kitamengunakan Basic HTML Template.

3. Basic HTML Template

Untuk dapat menggunakan bootstrap maka kita perlu membuat file index.html menggnakan adobe dreamweaver atau editor yg biasa anda gunakan dan meletakkannya di dalam folder latihan agar dapat memasukkan file-file css dan javascript kita ke dalam file html. Berikut adalah contoh file html dengan bootstrap.

Kita copy code dari getbootstrap.com, pada menu Getting Started, copylah bagian Basic Template berikut pada file index.html yang telah anda buat.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Bootstrap 101 Template</title>



    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Hello, world!</h1>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Setelah code dicopykan, save file tersebut, dan jalankan pada bowser hingga menghasilkan teampilan berikut.


Sekian dulu untuk kali ini, Terima kasih atas kunjungannya, dan semoga tutorial kali ini bermanfaat untuk teman-teman sekalian.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara setting bias

Gambar
Cara setting bias dan DC Offset pada power amp kelas AB  Assalamu'alaikum Wr.Wb. Para pengunjung yg budiman,beberapa pertanyaan tentang bias dan DC ofset sering ditanyakan oleh tema² yg akan merakit amplifier,utk itulah kali ini Saya mencoba utk membuat posting ttg itu.Namun perlu dicatat bahwa sebagai manusia g masih bnyk kekurangan tentunya sangat mungkin ada kesalahan. Jadi kritik dan saran masih sangat diharapkan. Pengunjung sekalian,kemampuan melakukan setting pada power amp merupakan yg hrs dikuasi jika kita merakit sebuah power amp TR berdaya besar,mengapa demikian ? Mungkin itu pertanyaannya. Krn jika kita tdk menguasainya akan mengakibatkan kerusakan pada power TR dan juga bisa membakar spul /gulungan speaker.Melakukan setting bias dan DCoffset pada power amp kadang² menjadi hal yg gampang² susah. Oleh krn itu sebelum mencoba power amplifier maka pastikan bhw kita bisa konsentrasi penuh ke amp yg sedang kita hadapi.Pada umumnya sebuah power amplifier TR terdiri dari tiga b...
Terus membaca

CARA MODIFIKASI POWER OCL 150 W

Gambar
Dalam modifikasi Power Amplifier 150 Watt ada beberapa komponen yang ada pada rangkaian Power Amplifier 150 Watt yang harus kita ganti atau kita rubah dengan ukuran yang lain, ada pun cara Power Amplifier 150 Watt serta komponen yang harus di ganti meliputi : Ganti ukuran 4 elco yg ada di pcb power amplifier 150 watt yg umumnya 47uf/50v ganti ukuran 100uf/100v. Ganti Transistor / TR driver BD 139-140 dgn TIP 41-TIP 42 atau TIP 31 - TIP 32,B507-D313. Ganti juga C milar yg ukuran 104N dgn 154N / 200N. Lepas atau copot 2 dioda yg ada di pcb.Lepas juga untuk transistor / TR A564 dan kaki atau jalur emitor ( E ) dengan colektor ( C ) jumper atau pasang resistor / R ukuran 12K. Ganti ukuran resistor / R dengan ukuran berikut : 560 ganti 220 33k ganti 47k 330 ganti 390 100k ganti 10k Sekian pencerahan dari admin, Semoga bisa bermanfaat dan Berguna tentunya bagi agan2 yang menyimak. Jangan Lupa Update terus Informasi seputar Elektronika Audio Sound System Lainnya yg tentunya Bermanfaat bagi k...
Terus membaca

Pengertian Konsep Dasar Datasheet

Gambar
Pengertian Konsep Dasar Datasheet Dalam Dunia Teknik Elektronika Analog dan Digital.Bagi anda yang memiliki basic dalam bidang keilmuan ini pasti sudah tidak asing lagi dengan datasheet, Karena dalam teknik elektro pada kelas / fase tertentu, ini lebih menjadi fokus akan kompetensi.  Berikut ini ada beberapa segmen dan pengertian dasardatasheet yg sudah biasa anda temukan. Datasheet Adalah dokumen yang berisi ringkasan kinerja dan karakteristik lain dari komponen (misalnya komponen elektronik), sub-sistem (misalnya power supply) atau perangkat lunak yg cukup terinci untuk digunakan oleh seorang enginer utk merancang komponen ke dalam system, Biasanya datasheet diciptakan oleh produsen dimulai dengan halaman pengantar yang menggambarkan keseluruhan dokumen,diikuti dengan daftar komponen tertentu, dengan informasi lebih lanjut tentang konektivitas perangkat. Dalam kasus-kasus dimana terdapat source code yang relevan untuk memasukkan, biasanya disertakan di dekat akhir do...
Terus membaca