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 :
- bootstrap.css
- bootstrap.min.css
- bootstrap-responsive.css
- bootstrap-responsive.min.css
- glyphicons-halflings.png
- glyphicons-halflings-white.png
- 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.
s
Terima Kasih dan semoga bermanfaat
Tidak ada komentar:
Posting Komentar