Bootstrap menggunakan bahasa apa?
|
 Show
Masuk Gratis dan Cepat Sekarang dengan Google. Hapus Komentar Kamu Komentar yang kamu pilih akan dihapus Bergabunglah sekarang, gratis! Bergabunglah sekarang, gratis ! Selamat kamu sudah berhasil mendaftar di webinar Catatan: Mohon untuk mengikuti webinar ini sesuai dengan jadwal yang sudah ditentukan Download Aplikasi QuBisa Yuk download aplikasi QuBisa untuk mendapatkan benefit yang lebih banyak:
Download Bootstrap merupakan salah satu jenis framework untuk CSS (Cascading Style Sheet) yang digunakan untuk perancangan situs website. Pengunaan bootstrap
sangatlah membantu progammer dalam membangun tampilan sebuah website. Hal tersebut tertulis di buku Bootstrap: Responsive Web Development karangan Jake Spurlock. Menurut Jake Spurlock keunggulan dari penggunaan Bootstrap adalah dapat menyesuaikan dengan kebutuhan website, dimana dapat memilih fitur CSS dan JavaScript sesuai dengan kebutuhan. Contohnya CSS pada Bootstrap juga menyediakan fitur form, tombol, navigasi dan komponen-komponen lainnya dan
JavaScript yang membantu pembuatan antarmuka lebih mudah dan stabil. Bootstrap juga menyediakan banyak sekali class-class CSS dan plugin yang siap dipakai untuk membantu dalam membuat tampilan sebuah website. Karena sangat membantu, maka Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan. Walaupun sebagai sebuah framework, penggunaan bootstrap juga harus dikolaborasikan dengan penggunaan stylesheet. Hal tersebut dikarenakan class-class dan plugin yang
tersedia didalamnya belum bisa memenuhi semua kebutuhan programmer. Jika semua progamme hanya mengandalkan bootstrap dalam pembuatan tampilan sebuah website, dapat dipastikan bahwa akan terjadi kemiripan antara tampilan website satu dengan lainnya. Untuk menerapkan bootstrap, perlu adanya penambahan code berikut ini pada lembar HTML: Di bawah ini merupakan contoh class pada bootstrap yang dapat digunakan untuk membua tsebuah button. Dengan menerapkan potongan kode diatas, output yang dihasilkan adalah sebagai berikut: Dengan penggunaan class yang berbeda pada gambar di atas, didapatkan hasil yang berbeda pula. Class yang digunakan dapat disesuikan dengan kebutuhan yang ada. Untuk memaksimalkan penggunaan bootstrap, maka harus diimbangi dengan penggunaan style sheet yang dapat dibuat secara manual yang disesuikan dengan kebutuhan. REFERENSI: Spurlock, J. (2013). Bootstrap: Responsive Web Development. Sebastopol: O’Reilly Media, Inc. Dipetik November 09, 2018, dari https://books.google.co.id/books?id=LZm7Cxgi3aQC&printsec=frontcover&dq=bootstrap&hl=en&sa=X&ved=0ahUKEwiIp5KJ3sbeAhVJb30KHUmICTQQ6AEIMTAB#v=onepage&q=bootstrap&f=false https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp Penulis: Supervised by: Published at : 19 March 2019 Untuk seorang front end developer membuat sebuah tampilan web ataupun aplikasi yang menarik akan menjadi salah satu tanggung jawab yang harus dilakukan. Di sinilah seorang front end developer akan sangat sering berhubungan dengan CSS. Tentu akan sangat menyusahkan jika harus membuat syntax setiap kali akan mendesain dengan menggunakan CSS. Apalagi untuk membuat tampilan yang interaktif seperti pada website Makinrajin. Hal ini lah mengapa seorang developer membutuhkan sebuah framework dalam pekerjaannya. Framework akan sangat membantu karena seorang developer menjadi tidak perlu menuliskan syntax setiap kali akan bekerja. Pada CSS ini salah satu framework yang sangat banyak digunakan adalah bootstrap. Bootstrap sendiri merupakan salah satu framework yang berjalan dengan menggunakan bahasa pemograman CSS yang bersifat open source. Hal ini juga yang membuat framework ini memiliki banyak pengguna. Apa Itu BootstrapBootstrap merupakan salah satu framework yang sering digunakan dalam bahasa pemograman CSS. Untuk seorang web developer, framework tentu saja merupakan salah satu hal yang akan sangat sering digunakan. Menggunakan framework akan sangat mempersingkat waktu kerja bagi seorang developer. Bootstrap sendiri merupakan framework yang bersifat open source yang sering digunakan oleh para front end developer terutama untuk kebutuhan pengembangan web ataupun aplikasi. Bootstrap sendiri sering digunakan untuk membuat berbagai fungsi dan komponen seperti grid, navigasi, button, dan lain – lain. Framework ini dianggap memiliki kelebihan karena mampu membuat web ataupun aplikasi menjadi lebih responsif dan juga user interface menjadi lebih optimal pada berbagai dimensi. Bootstrap sendiri merupakan salah satu CSS framework yang sangat sederhana dan pengembangan sistemnya sangat konsisten. Hal ini juga merupakan karena framework ini memiliki banyak pengguna. Salah satu alasan mengapa bootstrap banyak digunakan juga karena bisa membuat web ataupun aplikasi menjadi lebih ringan secara ukuran karena memiliki struktur yang lebih teratur. Bootstrap Versi 3 dan Versi 4Untuk saat ini, ada 2 versi bootstrap yang sering digunakan yaitu bootstrap versi 3 dan bootstrap versi 4. Ada sedikit perbedaan antara kedua versi ini. Beberapa perbedaan ini bisa dilihat dari beberapa sisi seperti grid salah satunya. Beberapa perbedaan yang terlihat diantara keduanya seperti : 1. Secara GlobalSecara global perbedaan dari keduanya bisa dilihat dari ukuran font. Pada versi yang ke 3 bootstrap menggunakan font dengan ukuran 14 px sementara pada versi terbarunya bootstrap ini menggunakan font dengan ukuran 16 px. Selain masalah ukuran, type font bawaan dari kedua versi ini juga berbeda. 2. Secara GridGrid merupakan salah satu ciri khas dari bootstrap. Jelas perbedaan kedua versi ini pada bagian grid akan sangat terlihat. Untuk setiap class grid misalnya, pada bootstrap versi tidak lagi diperlukan col-. Berbeda dengan bootstrap versi 3 yang masih memerlukan col- di depannya seperti “col-sm” untuk pembuatan baris. Selain itu, jika pada bootstrap versi 3 hanya ada 4 grid maka pada bootstrap terbaru ada 5 grid. Grid terbaru itu adalah col-* yang berfungsi untuk mendefinisikan semua perangkat tanpa harus ditentukan sebelumnya. Secara mudah, perubahan pada versi yang terbaru ini dibuat untuk lebih meringkaskan penggunaan baris dibanding dengan versi – versi sebelumnya. 3. Secara TabelSalah satu masalah pada bootstrap versi 3 adalah tidak bisa merubah tampilan header dan juga membuat judul untuk tabel. Masalah ini tidak akan terjadi lagi pada versi terbaru karena pada versi bootstrap 4 sudah mendukung untuk merubah tampilan header dan juga membuat judul tabel. Pada bootstrap versi 4 juga jika ingin membuat tabel menjadi responsif bisa langsung dilakukan di dalam tag
Dengan script seperti itu maka yang akan dihasilkan adalah tampilan seperti ini. Ini merupakan tampilan tabel standard yang dibuat menggunakan bootstrap. Jika anda ingin merubah tampilan dari table maka anda cukup merubah table class nya saja. Untuk tampilan seperti di atas maka “table class = table”. Class table lain yang bisa anda gunakan adalah .table-striped untuk membuat bentuk tabel di mana warna setiap baris menjadi berbeda – beda seperti pola zebra .table-bordered untuk membuat border atau garis batas untuk setiap tabel .table-hover berfungsi untuk membuat efek pada setiap kolom. Efek akan terlihat ketika anda meletakan mouse di suatu kolom pada tabel .table-dark untuk memberikan background warna gelap pada tabel Itu adalah beberapa contoh dari class table yang bisa anda gunakan pada bootstrap. Selain itu juga masih ada banyak class table yang bisa anda coba. 2. AlertIni merupakan salah satu komponen yang biasa ada pada website yang fungsinya adalah memberikan peringatan atau tanda. Ini merupakan contoh alert yang mungkin sering terlihat Tampilan di atas didapat dengan menggunakan script seperti di bawah ini Script seperti di atas biasa nya digunakan untuk membuat tanda peringatan dengan tampilan standard. 3. ButtonJika anda membutuhkan tombol pada website yang sedang anda buat maka anda juga bisa membuatnya menggunakan bootstrap. Ini merupakan script yang digunakan untuk membuat button atau tombol Script seperti di atas akan menghasilkan tampilan seperti di bawah ini Contoh seperti di atas terdiri dari beberapa button atau tombol dengan berbagai class button. Beberapa button class yang ada pada script diatas adalah .btn berfungsi untuk membuat button standar .btn-primary berfungsi untuk membuat tombol utama dengan warna biru. Biasa digunakan untuk membuat tombol login .btn-secondary berfungsi sebagai pendamping dari tombol primary. .btn-success berfungsi untuk membuat tombol yang menginformasikan keberhasilan sebuah program atau perintah. .btn-info berfungsi untuk membuat tombol untuk menuju sebuah informasi. Biasa digunakan pada website ketika pengunjung mungkin membutuhkan informasi lebih banyak dari yang ditampilkan. .btn-warning berfungsi untuk membuat tombol peringatan .btn-danger berfungsi untuk membuat tombol yang akan mengindikasikan sebuah bahaya .btn-dark berfungsi untuk membuat tombol dengan latar warna gelap .btn-light berfungsi untuk membuat tombol dengan latar warna yang terang .btn-link berfungsi membuat tombol yang akan berisi link dan menyambungkan ke tujuan link tersebut. Selain tipe class button seperti di atas, ada juga tipe class button lain seperti .btn-primary btn-lg berfungsi untuk membuat button dengan ukuran besar .btn-primary berfungsi untuk membuat button dengan ukuran default .btn-primary btn-sm berfungsi untuk membuat button dengan ukuran kecil 4. NavigasiSalah satu komponen lain yang juga bisa dibuat dengan bootstrap adalah navigasi. Mungkin anda sering melihat navigasi seperti ini Hal seperti menu, home, dan navigasi lain yang sering anda lihat pada website bisa juga dibuat dengan bootstrap. Pada tampilan navigasi seperti di atas bisa dibuat dengan menggunakan script seperti ini Script di atas merupakan contoh untuk membuat navigasi standard yang biasa digunakan. Pada pengembangannya navigasi ini juga bisa dibuat dengan berbagai desain dan bentuk. Itulah beberapa hal tentang bootstrap yang harus anda ketahui sebelum mulai untuk mencobanya. Saat ini bootstrap merupakan salah satu framework yang banyak digunakan oleh para front end developer. Menguasai bootstrap akan sangat membantu banyak hal dalam pekerjaan anda sebagai developer. Bootstrap bahasa apa?Bootstrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk mendesain website responsive dengan cepat dan mudah. Framework open source ini diciptakan pada tahun 2011 oleh Mark Otto dan Jacob Thornton dari Twitter.
Bootstrap termasuk apa?Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript yang dirancang untuk mempercepat proses pengembangan web responsive dan mobile-first (memprioritaskan perangkat seluler).
Bootstrap digunakan untuk apa?Bootstrap adalah sebuah framework HTML, CSS, dan JavaScript yang berfokus untuk menyederhanakan pengembangan halaman web atau website. Pada umumnya, Bootstrap digunakan untuk mengimplementasikan berbagai pilihan warna, ukuran, font, dan layout yang ada dalam framework tersebut ke dalam sebuah website.
Kenapa bootstrap bisa di katakan sebuah framework?Bootstrap juga sering disebut sebagai CSS framework karena berisi sebuah “kerangka kerja” (framework) bagaimana cara menyusun kode HTML dan CSS sesuai dengan aturan dari Bootstrap. Namun karena Bootstrap juga menggunakan JavaScript, maka lebih pas disebut sebagai front-end framework.
Bài Viết Liên Quan
|
