Top Banner
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 .
9

PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

Mar 18, 2019

Download

Documents

hatu
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan 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 .

Page 2: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

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

Page 3: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

jelasnya langsung saja lihat gambar dibawah ini .

Page 4: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

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 .

Page 5: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

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 .

Page 6: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

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 .

Page 7: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

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 ! .

Page 8: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter

Akhirnya Tutorial Cara menggunakan Bootstrap Part 1 Untuk membuat tombol bootstrap pun Sukses

Page 9: PENGERTIAN DAN CARA MENGGUNAKAN BOOTSTRAP … filebrowser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Pada mulanya bootstrap bernama "Twitter