Bootstrap adalah sebuah framework css yang menyediakan kumpulan komponen-komponen antar muka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antar muka , bootstrap juga menyediakan sarana untuk membangun layout 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 :
- bootstrap.css
- bootstrap.min.css
- bootstrap-responsive.css
- bootstrap-responsive.min.css
2. direktori "img memiliki dua buah file didalamnya yaitu :
- glyphicons-halflings.png
- glyphicons-halflings-white.png
3. direktori "js" memiliki dua buah file didalamnya yaitu :
- bootstrap.js
- bootstrap.min.js
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.
Semoga bermanfaat bagi kalian ^_^
0 Comments