Pengertian fungsi contoh dan function class pada bootstrap
Halo selamat bertemu kembali ! Kali ini kita akan belajar tentang pengertian fungsi contoh dan function class pada bootstrap. Pada masa sebelum adanya bootstrap seorang desaigner website akan membuat desain website dari awal yaitu dengan cara membuat file css, html dan javascript nya terlebih dahulu. Tentunya hal tersebut akan memakan waktu dan menambah beban pekerjaan. Maka dari itu Mark Otto dan Jacob Thornton di Twitter mengembangkan bootstrap. Bootstrap ?? Apa sih bootstrap.. ! Oke untuk penjelasan lebih lanjut beresin bacanya sampe akhir ya teman.
- Apa yang dimaksud dengan bootstrap ?
Bootstrap adalah sebuah framework css, html dan javascript yang dibuat untuk mempermudah mengkonsistenkan pembuatan design website yang sedang didevelop. Tujuan pembuatan pembuatan bootstrap ini adalah untuk mempercepat waktu pembuatan website karena dalam pemakaiannya pengguna hanya mengcopi paste fungsi yang ada di dalam bootstrap tersebut. Telah banyak orang yang mengembangkan framework bootstrap ini, temen temen bisa dilihat dengan banyaknya themplate baik themplate backend atau frontend yang beredar di pasaran ada gratis ataupun berbayar. Dibawah ini adalah beberapa website yang menyediakan themeplate bootstrap
Dan banyak lagi yang lainnya silahkan kunjungi website diatas beberapa theme di tawarkan secara gratis dan terdapat demo untuk melihat tampilan sebelum di download.
- Fungsi bootstrap
Setiap yang diciptakan pasti ada fungsinya ya kan ?? Nah begitupun dengan bootstrap. Beberapa fungsi bootstrap yang saya ketahui adalah sebagai berikut :- Bootstrap membantu anda membuat ataupun mengembangkan website yang bersifat dinamis ataupun statis silakan tentukan sendiri penggunaan bootstap tersebut.
- Boostrap mempunyai fungsi yang simpel karena menyediakan class yang bisa diakses oleh develover agar website yang di buatataupun dikembangkannya menjadi ringan saat diakses user
- Bootstrap membantu desaigner menata dan membuat desain website dengan cepat dinamis dan responsive. Responsive itu apa bos ?? Zaman sekarang user mengakses website bukan hanya dari desktop atau pc saja melainkan dari smartphone juga. Nah responsive itu berarti layout atau ukuran layar pada website mengikuti ukuran layar pada smartphone hal ini memungkinkan design website tidak acak acakn saat user mengakses website tersebut dari smartphonenya.
- Fitur grid pada bootstrap membantu designer mengatur layout
- Designer bisa menambahkan class css tambahan apabila class bootstrap dirasa kurang memenuhi keinginan dalam mendesign websitenya.
- Contoh penggunaan bootstrap
Untuk penggunaan booststrap temen temen bisa menggunakan file bootstrap dengan cara online maupun offline. Kali ini saya akan menggunakan file bootstrap dengan menggunakan file offline. Apabila temen temen perlu file offline bootstrap temen temen bisa download disini
Dalam contoh penggunaan bootstrap saya akan menggunakan fungsi css bootstrap dalam membuat jumbotron. Jumbotron adalah sebuh kotak yang biasanya saya difungsikan untuk membuat pemberitahuan.
Berikut langkah langkah pembuatan jumbotron
- Download file bootstrap yang sudah saya sediakan extract dan simpan di webserver kalian. Saya asumsikan menggunakan xampp yaitu di folder htdocs
- Buatlah sebuah file bernama jumbotron.html dalam folder bootstrap/bootstrap
- Buatlah sebuah file seperti di bawah ini
- Perhatikan script di bawah ini script ini adalah core dari bootstrap
- Lalu buka browser ketikan dalam url seperti berikut http://localhost/bootstrap/bootstrap/file.html maka akan tampil seperti berikut
- Macam macam function class bootstrap
Bootstrap menyediakan Function class yang sangat lengkap dan bisa dengan mudah digunakan oleh designer dalam membuat ataupun mengembangkan tampilan websitenya. Funtion class bootstrap dibagi kedalam 3 bagian yaitu CSS, Komponen dan Javascript. Function class bootstrap akan dijabarkan dalam bentuk tabel seperti di bawah ini.
No
|
CSS
|
Component
|
Javascript
|
1
|
Overviewer
|
GlyphIcons
|
Transitions transition.js
|
2
|
Grid system
|
Dropdowns
|
Modals modal.js
|
3
|
Typograpy
|
Button Groups
|
Dropdowns dropdown.js
|
4
|
Code
|
button dropdowns
|
ScrollSpy scrollspy.js
|
5
|
Tables
|
Input groups
|
Togglable tabs tab.js
|
6
|
Forms
|
Navs
|
Tooltips tooltip.js
|
7
|
Buttons
|
Navbar
|
Popovers popover.js
|
8
|
Images
|
Breadcrumbs
|
Alert messages alert.js
|
9
|
Helper classes
|
Pagination
|
Buttons button.js
|
10
|
Responsive Utilities
|
Labels
|
Collapse collapse.js
|
11
|
Using Less
|
Badges
|
Carousel carousel.js
|
12
|
Using Sass
|
Jumbotron
|
Affix affix.js
|
13
|
Page header
|
||
14
|
Thumbnails
|
||
15
|
Alerts
|
||
16
|
Progress bars
|
||
17
|
Media object
|
||
18
|
List group
|
||
19
|
Panels
|
||
20
|
Wells
|
Nah segitu dulu teman teman pemaparan dari saya tentang pengertian fungsi contoh dan function class pada bootstrap. Rencananya saya akanmembahas satu persatu function class bootstrap diatas. Doain aja ya mudah mudahan gak males. hee
Belum ada tanggapan untuk "PENGERTIAN FUNGSI CONTOH DAN FUNCTION CLASS PADA BOOTSTRAP"
Post a Comment