Bootstrap
apa itu bootstrap, BOOTSTRAP adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website dinamis dengan menggunakan bahasa script CSS
Kerangka Kerja (Framework) secara sederhana diartikan sebagai kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class dari awal.
Fitur Umum Framework:
Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
- Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
- Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.
- Lebih bebas dalam pengembangan jika dibandingkan CMS
cara membuat BOOTSRAP
hal pertama yang perlu dilakukan sebelum membuat bootstrap adalah medownload framwork nya di
https://getbootstrap.com/docs/4.1/getting-started/download/ pilih download yang
Compiled CSS and JS# lalu Download notepad++ di
https://notepad-plus-plus.org/download/v7.5.6.html yang ketiga download
XMAPP di https://www.apachefriends.org/download.html disitu kalian pilih yang sesuai dengan OS kalian masing2
lalu install XMAPP yang sudah kalian download tadi
kedua Buka folder aplikasi yang tadi kamu instal EX: D:\XAMPP\hotdocs
lalu cut semua folder yang ada disitu lalu buat folder baru Ex 1.backup lalu masukan semua file nya disitu
Extract file bostrap yang tadi sudah kamu download lalu buka file tsb lalu buka aplikasi notepad++
buat baru dan ketikan
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Membuat Template Website Bootstrap</title> |
| <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> |
| <!-- HTML5 shim and Respond.js for IE8 support of |
| HTML5 elements and media queries --> |
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
| <link href="assets/style.css" rel="stylesheet"> |
| <!-- jQuery online menggunakan CDN --> |
| <script src="assets/jquery/jquery.min.js"></script> |
| <script src="assets/bootstrap/js/bootstrap.min.js"></script> |
| <script src="assets/custom.js"></script> |
</
html>
Dari script html di atas kita dapat melihat ada komentar tentang jquery
lokal dan jquery online maksudnya kita dapat memilih salah satu dari
kedua jquery tersebut sesuka hati. kita bisa menggunakan jquery online
atau cdn dengan asumsi kita membuat template website dengan bootstrap
ini dalam kondisi terhubung dengan internet, jika tidak terhubung maka
sebaiknya gunakan jquery lokal saja karena jquery online tidak dapat di
unduh jika dalam kondisi offline.
Langkah berikutnya adalah membuat layout website dengan bootstrap bagian
header, content dan sidebar serta footer dengan menambahkan kode
berikut ini di atas komentar
<!--happy code-->
| <div class="col-md-12 header" id="site-header"> |
| <!-- End Bagian Header --> |
| <!-- Bagian Wrapper 2 kolom --> |
| <div class="col-md-8 articles" id="site-content"> |
| <div class="col-md-4 sidebar" id="site-sidebar"> |
| <!-- End Bagian wrapper --> |
| <div class="col-md-12 footer" id="site-footer"> |
| <!-- End Bagian footer --> |
</
div>
Kode baru di atas adalah kode yang akan membagi header, content,
sidebar, dan footer. di dalam system grid bootstrap total lebar layar
atau lebar kerja diberi nilai 12 kolom.
Kita akan memulai mengisi bagian header dengan mengganti komentar
<!-- isi header--> dengan kode berikut :
</
nav>
kemudian kita akan mengisi kolom konten dengan mengganti komentar
<!-- isi content --> dengan kode berikut :
</
nav>
kemudian pada kolom sidebar silahkan ganti komentar
<!-- isi sidebar --> dengan kode berikut :
| <h3 class="widget-title">Latest Posts</h3> |
| <li><a href="#">Lorem Ipsum</a></li> |
| <li><a href="#">Lorem Ipsum</a></li> |
| <li><a href="#">Lorem Ipsum</a></li> |
| <li><a href="#">Lorem Ipsum</a></li> |
| <li><a href="#">Lorem Ipsum</a></li> |
</
aside>
kemudian pada bagian footer silahkan ganti <!– isi footer –> dengan kode berikut :
<footer class=”copyright text-center”><p>© 2015 onphpid.com</p></footer>
dan untuk sentuhan terakhir kita akan memberikan style secara custom
agar halaman kita tampak lebih baik. silahkan tulis kode berikut di file
style.css
| background-color: #e5e5e5; |
| background-color: #e74c3c; |
| nav.menus ul li a:hover, nav.menus ul li a:focus{ |
| background-color: #c0392b; |
| border-bottom: 4px solid #E74C3C; |
}
selesai silakan kalian lihat hasil nya seperti apa semoga beruntung.
0 comments:
Post a Comment