Cara Instalasi Bootstrap Dan Pengertian Bootstrap
Pengertian Bootstrap dan cara menginstal Bootstrap
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
Sumber :http://pengertianbootstrap.blogspot.co.id
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 komentar:
Posting Komentar