Mempercantik Website HTML Dengan Framework CSS Bootstrap
A.PENDAHULUAN
Pengertian
Bootstrap merupakan sebuah framework atau library css dan javascript yang dapat didownload dengan gratis dan open source dari website bootstrap resmi.
bootstrap populer digunakan untuk frontend developer untuk menambah gaya dalam website mereka.
framework ini sangat populer dikalangan fronend developer karena kemudahan memakainya dan hasilnya yang sangat bagus dan menghasilkan website yang responsif.
website responsif merupakan website yang dapat menyesuaikan element -element didalamnya dengan layar dimana website tersebut ditampilkan.
jadi, website yang menggunakan bootstrap didalamnya akan dapat menyesuaikan size alias ukuran element didalamnya dengan ukuran layar device.
Latar Belakang
setelah membuat web dengan html kita memerlukan css untuk mempercantiknya , seperti menambahkan background mengganti font, warna font, ukuran element, animasi , letak element dan masih banyak lagi.
namun menulis css dari nol sangatlah menyita waktu ,oleh karena itulah kita sebaiknya memakai bootstrap di html. agar menghemat waktu dan menghasilkan website yang responsive.
B.MAKSUD DAN TUJUAN
Maksud
melink-kan html dengan framework css untuk mendesain website kita dan membuatnya menjadi website yang responsif
Tujuan
membuat website yang responsif dan dapat menyesuaikan ukuran element didalamnya dengan ukuran layar device.
C.BATASAN DAN RUANG LINGKUP PEKERJAAN
- mendownload bootstrap
- melink-kan css
- melin-kan javascript
- grid di bootstrap
D.METODE PELAKSANAAN PEKERJAAN
mencari referensi, kemudian mempraktikannya.
E.ALAT DAN BAHAN
- laptop
- internet
- referensi
- folder bootstrap
F.TARGET WAKTU
08:00 - 16:00
G.TAHAPAN PELAKSANAAN
- mendownload bootstrap
hal pertama yang digunakan untuk menambahkan framework bootstrap di website kita adalah mendownload folder dan filenya.
caranya :
1. masuk ke website resminya
2. klik download
3. pilih download compiled css dan js
4. setelah mendownload bootstrap tadi yang terakhir adalah meng-unzip file tersebut.
- melink-kan css
setelah mendownload bootstrap hal yang selanjutnya kita lakukan untuk memakai bootstrap di website kita adalah melink-kan bootstrap tadi ke web html kita.
link adalah menghubungkan file css bootstrap tadi ke html kita. jadi, kapanpun html kita memerlukan style dari bootstrap , html tersebut dapat mengambil style tersebut dari bootstrap.
cara menghubungkan file html dengan css bootstrap adalah:
1. tentukan file html yang akan dihubungkan dengan bootstrap.
2. copy file css dan js di folder bootstrap ke folder tempat kita menyimpan file html.
3. kemudian tambahkan code ini di file html => [ <link rel="stylesheet" href="css/bootstrap.min.js"> ] . tambahkan dibagian akhir sebelum tanda </head>
4. dan tambahkan code ini untuk menyambungkan html ke javascript [ <script src="js/bootstrap.min.css"/> ] . dibagian akhir sebelum tanda </body>.
bootstrap menggunakan sistem grid untuk mengatur element html . di bootstrap terdapat 12 grid yang digunakan untuk membagi posisi element yang ada di html.
H. REFERENSI
0 Komentar