Bootstrap adalah sebuah framework CSS yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangunlayout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Bagaimana Cara instalasi Bootstrap ?
Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap, http://getbootstrap.com/ dan klik tombol "Download Bootstrap" untuk memulai download bootstrap.
Selesai download, anda akan memiliki file bootstrap.zip yang berisi file-file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut pada tempat yang sama dengan bootstrap.html , sehingga sekarang kita memiliki file seperti berikut:
Yang masing - masing direktori berisi :
1. direktori "css" memiliki empat buah file didalamnya yaitu :
3. direktori "js" memiliki dua buah file didalamnya yaitu :
- bootstrap.css
- bootstrap.min.css
- bootstrap-responsive.css
- bootstrap-responsive.min.css
- glyphicons-halflings.png
- glyphicons-halflings-white.png
3. direktori "js" memiliki dua buah file didalamnya yaitu :
- bootstrap.js
- bootstrap.min.js
Setelah itu Siapkan Aplikasi Notepad++ jika saudara belum punya maka download dihttp://notepad-plus-plus.org/download/v6.7.4.html setelah itu pilih :
kemudian download dan apliksi langsung bisa digunakan.
Berikut contoh script html untuk membuat tampilan seperti facebook :
- buka aplikasi notepad++
- kemudian klik file new atau Ctrl + n
- beri nama latihanbootstrap.html
- kemudian ketikkan program ini
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="icon.png" />
<title>Face-mu</title>
<link rel="stylesheet" href="facemu.css" type="text/css" />
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="facemu.png"></div>
<div class="kotak">
<br />
<input type="button" value="Masuk" id="button_masuk">
<br />
</div>
<div class="kotak">
Password :
<br />
<input type="text" size=20>
<br />
Lupa kata sandi Anda?
</div>
<div class="kotak">
Email :
<br />
<input type="text" size=30>
<br />
<input type="checkbox">Biarkan saya tetap masuk
</div>
</div>
<div class="isi">
<div class="isi_kiri">
<br />
<br />
<br />
Face-mu membantu Anda terhubung dan berbagi<br />
dengan orang-orang dalam kehidupan Anda di<br />
Indonesia.
<br />
<br />
<br />
<img src="indonesia.png" width=400>
</div>
<div class="isi_kanan">
<br />
<font size=5><b>Mendaftar</b></font><br />
Gratis, sampai kapanpun
<hr color="#4283d4" width=400 align="left"/>
<table cellpadding=5>
<tr>
<td>Nama Depan</td>
<td> : <input type="text" size=25 /></td>
</tr>
<tr>
<td>Nama Belakang</td>
<td> : <input type="text" size=25 /></td>
</tr>
<tr>
<td>Email Anda</td>
<td> : <input type="text" size=25 /></td>
</tr>
<tr>
<td>Masukkan Ulang Email</td>
<td> : <input type="text" size=25 /></td>
</tr>
<tr>
<td>Kata Sandi Baru</td>
<td> : <input type="text" size=25 /></td>
</tr>
<tr>
<td>Saya Seorang</td>
<td> : <select name="kelamin">
<option>Wanita</option>
<option>Pria</option>
</select></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td> : <select name="tanggal">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="bulan">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<select name="tahun">
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><font size=1>Mengapa saya perlu mengisinya?</font></td>
</tr>
</table>
<center><input type="button" value="Mendaftar" id="button_masuk"></center>
<hr color=#4283d4 width=400 align="left"/>
<font size=1>Buat halaman <font color="black">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>
<div class="footer" align="center">
<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="left" bgcolor="#4283d4">Belajar Boostrap</marquee>
</div>
Setelah itu simpan file tersebut dan jalankan . jika benar maka hasil Outputnya Seperti ini.
sTerima Kasih dan semoga bermanfaat
11 komentar:
makasih buat ilmunya mas . akhirnya saya bisa menggunakan bootstrap :)
Sangat lengkap sekali infonya gan jadi sangat mudah untuk di mengerti.
bagi agan yang berminat belajar membuat web responsive bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
Mantaf gan. ijin buat ref belajar bootstrap di situs ane onphpid.com
Belajar Membuat Template Web Menggunakan Bootstrap
thanks gan, ane jadi tau bootstrap.. padahal udah sering pake juga
Pusing liat tutorial berbahasa asing? Primaindiosft menyediakan berbagai tutorial berbahasa Indonesia. Yuk kunjungi… … tutorial-tutorial gratis
kok punyaku tampilanya beda siech?
Sipp gan tolong ikuti fanspage saya di jogjabudyweb.com ya gan trimaksih
Sipp gan tolong ikuti fanspage saya di jogjabudyweb.com ya gan trimaksih
salam kenal,
artikelnya bagus2 nih gan.. kunjung balik ya
jasa pembuat website di bali
harga pembuatan website di bali
artikelnya sangat membantu bagi pemula seperti saya. berarti ini mirip kayak wordpress ya gan?
min masih aktifkah posting artikelnya. mau tanya gimana ya cara ngilangin setiap file ektensi .html di localhost pada bootstrap? apakah bisa offline atau harus online dengan memanfaatkan file .htaccess
saya telah mempelajarinya namun masih nihil. tidak seperti wordpress yang tidak ada ektensi setiap file postingnya. trims
Posting Komentar