PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter...
Transcript of PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter...
PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP
Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-
end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling
populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang
responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor
device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari
browser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan
Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di alat internal.
Dengan menggunakan Bootstrap seorang developer dapat dengan mudah dan cepat dalam
membuat front-end sebuah website. Anda hanya perlu memanggil class-class yang diperlukan,
misalnya membuat tombol, grid, tabel, navigasi dan lainnya.
Bootsrap telah menyediakan kumpulan komponen class interface dasar yang telah dirancang
sedemikian rupa untuk menciptakan sebuah tampilan yang menarik dan ringan. Selain komponen
class interface, bootsrap juga memiliki grid yang berfungsi untuk mengatur layout pada halaman
website. Selain itu developer juga dapat menambahkan class dan CSS sendiri, sehingga
memungkinkan untuk membuat desain yang lebih variatif. Salah satu contoh website yang
menggunakan framework bootsrap yaitu twitter. Bootstrap sendiri sebenarnya dikembangkan
oleh developer twitter sehingga bootsrap sering juga disebut dengan “ twitter bootsrap “.
Bootstrap sendiri sudah kompatibel dengan versi terbaru dari beberapa browser seperti google
chrome, firefox, internet explorer, dan safari browser. Meskipun beberapa browser ini tidak
didukung pada semua platform.
CARA MENGGUNAKAN BOOTSTRAP
Untuk menggunakan bootstrap yang pertama kali dilakukan adalah melakukan instalasi bootstrap. Anda
dapat langsung mendownload bootstrap pada website resminya di
https://getbootstrap.com/docs/3.3/getting-started/ .
Setelah anda membuka website tersebut langsung aja anda mengklik tombol download bootstrap
tersebut. Lihat lingkaran pada gambar dibawah ini .
Setelah di klik akan langsung muncul simpan berkas langsung aja klik oke.
CARA MENGINSTAL BOOTSTRAP
Setelah anda mendownload framework css bootstrap kemudian ekstrak pada project anda. Disini saya
meletakkannya di Local Disk (C:) ---> www . setelah di ekstrak , anda langsung saja mengganti nama
folder nya menjadi yang anda ingingkan , disini saya memberi nama belajar bootstrap . Untuk lebih
Jika sudah di rename anda langsung aja buka folder tersebut . difolder tersebut akan terdapat 3 folder
seperti gambar di bawah ini .
Oke setelah proses instal selesai ,kita langsung saja membuka text editor yang anda punya seperti
intype, Sublime, Php Strom, Notepad, Notepad ++, Dll . Kalau Disini saya menggunakan text editor nya
yaitu intype . setelah terbuka , langsung saja kita buka Project ->> Open Project ->> Arahkan dimana
folder yang telah anda ekstrak tadi . Perhatikan gambar di bawah ini .
Setelah kita buka project kita/ sampai muncul 3 folder disudut kiri seperti pada gambar diatas, kita
langsung saja ngoding untuk memanggil boostrap tersebut , Serta di part 1 ini kita membuat tombol .
Ikuti codingan seperti gambar di bawah ini .
Setelah di ketik coding nya , lanjut kita save dengan menekan tombol pada keyboard yaitu tombol CTRL
+ S , atau bias juga dengan mengklik MENU FILE di sudut kiri lalu klik SAVE . Lalu buat nama nya dengan
nama “index.html ” atau bias juga “index.php” ,lalu Arahkan simpannya di folder tempat Project anda
berada . Perhatikan gambar di bawah ini .
Jika sudah di save lanjut kita buka Menu Project ->> Update Project . jika sudah akan muncul file
index.html kita di project sudut kiri kita . untuk lebih jelas nya perhatikan gambar di bawah ini .
Selanjutnya langkah Terakhir kita langsung saja lihat hasil di browser . sebelumnya kita jangan lupa
terlebih dahulu kita Aktifkan SERVER OFFLINE nya ,Seperti Xampp, Wamp, DLl . setelah di aktifkan kita
langsung saja buka browser yang anda miliki, disini saya menggunakan MOZILLA FIREFOX . Lalu kita ketik
di url nya “localhost” tekan enter. Jika sudah terbuka akan terlihat folder “belajar bootstrap” . Langsung
saja dibuka dan lihat hasil nya . Untuk lebih jelasnya lihat gambar dibawah ini ! .