Jumat, April 04, 2014

Bootstrap - Web UI Framework - Speed up your web development !!

Bootstrap Logo
Artikel kali ini akan sedikit membahas tentang Web UI Framework, Jika kamu Web designer pasti sedikit banyak sudah mengenal apa itu Bootstrap.  Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.

Ingin tahu lebih dalam tentang Bootstrap ?

Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.

Bootstrap di inisialisasikan oleh Designer dan Developer dari Twitter yaitu @mdo and @fat sebagai project open source yang menjadikannya bebas di modifikasi dan digunakan oleh semua orang di dunia. Dan banyak sekali Web profesional yang sudah mengimplementasikan Bootstrap sebagai dasar dari design mereka, kamu bisa melihat sendiri di Bootstrap Expo.

Ingin tau lebih lanjut ? Silahkan simak artikel ini :)

What exactly this Bootstrap ?
Apa sebenernya Bootstrap ini ?
Kenapa saya harus memakai Bootstrap ?
Dimana peranan Bootsrap dalam sebuah Web ?

Mungkin beberapa pertanyaan di atas terlintas dibenak kamu semua, jika kalian ingin belajar tentang Web Design atau mungkin kalian seorang developer, Bootstrap bisa memudahkan pekerjaanmu disini. Yap! mendesign sebuah web akan jauh lebih mudah karena Bootstrap sudah menyediakan komponen-komponen UI seperti Navigation Bar, Web Icon, Dropdown Button, Badges, Label, Panel dsb. yang siap pakai untuk Web kamu. Ibaratnya kita tinggal merakit component-component yang terpisah menjadi sebuah Web yang sesuai dengan keinginan kita, sehingga bagi seorang developer murni yang tidak tahu cara mendesign Web UI, maka dengan Bootstrap kita akan terbantu sekali untuk membuat suatu Web secara utuh dengan tampilan yang professional.

Apa saja Feature utama dari Bootstrap ?

  1. Selain Vanilla CSS, Bootstrap juga mendukung untuk dua preprocessors CSS yang paling populer yaitu Less dan Sass.
  2. Bootsrap sudah mendukung Responsive UI, sehingga akan memberikan kemudahan serta efisiensi untuk Project kita yang mungkin mempunyai dukungan terhadap beberapa tipe device seperti Mobile dan Desktop.
  3. Bootstrap mempunyai  dokumentasi yang ekstensif dan indah dengan ratusan contoh nyata penerapannya, source kode, dan banyak lagi. Sehingga akan memudahkan bagi para beginner yang baru akan belajar tentang UI Framework.
  4. Menggunakan Responsive Grid Sistem berdasarkan dari CSS Media Query sehingga kita bisa dengan mudah mereplace dan memodifikasi Tampilan sesuai keinginan kita. Bootstrap juga sudah menyediakan standart Grid yang bisa dengan mudah kita implementasikan dalam struktur Web kita, sehingga akan mempercepat development.
  5. Basic pengguna dan komunitas yang besar, cara atau contoh pemakaian yang banyak, Feature yang selalu update baik yang mendasar atau hanya sekedar tampilan, dan Web yang menyediakan Thema gratis atau premium yang bisa memberikan inspirasi untuk kita dalam mendesain Web, contohnya seperti WrapBootstrap.com.

Berikut list component-component Bootstrap yang bisa kita pergunakan untuk Web kita :
  • Dropdowns
  • Button groups
  • Button dropdowns
  • Input groups
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Labels
  • Badges
  • Jumbotron
  • Page header
  • Thumbnails
  • Alerts
  • Progress bars
  • Media object
  • List group
  • Panels
  • Wells
Dan berikut adalah component yang memanfaatkan Javascript yang bisa memunculkan efek-efek khusus, dan kita hanya tinggal merakitnya untuk dapat memanfaatkannya, tanpa harus report membuat dari awal :
  • Transitions
  • Modal
  • Dropdown
  • Scrollspy
  • Tab
  • Tooltip
  • Popover
  • Alert
  • Button
  • Collapse
  • Carousel
  • Affix


 Kesimpulan

Sebagai designer web yang bagus kita tidak hanya di tuntut untuk bisa memberikan keindahan dari sebuah Web, tetapi juga ketepatan waktu designnya, sehingga sedikit banyak kita juga harus mengenal Web UI Framework seperti Bootsrap ini. Tidak hanya akan mempercepat proses development kita, tetapi juga akan memberikan banyak ide-ide bagi kita, sehingga Web yang intuitif bagi end user akan lebih mudah kita ciptakan.

Bagi yang ingin lebih mendalami tentang Bootstrap, silahkan di akses langsung website utamanya di GetBootstrap.com, dan saya mengajak kalian untuk berbagi pengalaman disini jika sudah pernah mencobanya, hanya dengan berbagi pengalamanlah ilmu kamu akan bermanfaat untuk semua orang.

Saya membuka selebarnya pintu kritik dan saran agar Artikel ini bisa bermanfaat bagi pembaca semua, CMIIW :)


Referensi :


Silahkan share artikel ini jika menurut Sobat bermanfaat :)

59 komentar :

  1. Wuihh nais inpoh mas kharis,
    Jadi kegunaan bootstrap dapat membantu untuk membuat design web ya mas.

    BalasHapus
    Balasan
    1. Benar Mas Agung, jika ingin membuat Web silahkan coba Bootstrap ini, dijamin akan mempercepat proses development Web Mas Gung :)

      Hapus
  2. jadi static web kah? atau dynamic mas kharis?

    jangan lupa komeng balik di www.rzdraco.wordpress.com :D

    BalasHapus
  3. Apakah Bootstrap ini dapat dengan mudah dipahami oleh para pemula yang belum banyak mengetahui dasar pemrograman web, sehingga dapat membuat desain web sendiri ?

    BalasHapus
  4. Bootstrap ini sudah bisa di aplikasikan dengan phonegap ?

    BalasHapus
  5. terima kasih sik haris... bermanfaat banget buat saya

    BalasHapus
  6. Thanks sob artikelnya bermanfaat, silahkan di cek sob aplikasi akunting buatan anak Indonesia yang gak kalah keren ama buatan luar di kiper.co.id

    BalasHapus
  7. makasi sob, ane baru mengerti ttg hal ini

    BalasHapus
  8. thank's atas informasinya yang sangat bangus. semoga sukses selalu.

    BalasHapus
  9. makasih artikelnya sangat menambah wawasan dan infonya yang di kemas menarik

    BalasHapus
  10. bermanfaat sekali informasinya gan :-)
    terima kasih

    BalasHapus
  11. makasih infonya menambah wawasan saya makasih

    BalasHapus
  12. kunjungan pagi yang bermanfaat dan menambah wawasan makasih

    BalasHapus
  13. sangat bermfaat menambah ilmu dan wawasan para pembacanya makasih

    BalasHapus
  14. mantp deh info dan artikelnya makasih banyak infonya

    BalasHapus
  15. sip...sip ... mantafnya mas .... waduh ada lagi tambahan bootsrap ... atu aja belum paham mas .... nambah puyeng aku masss.... tapi wes tak aku bukmak ae mas ,,,,,.....

    BalasHapus
  16. saya coba deh mas tuh butsrap ama web ane... kali aja nambah kerren mas...

    BalasHapus
  17. keren dan juga bermanfaat sekali infonya

    BalasHapus
  18. keren dan menambah wawasan sekali infonya

    BalasHapus
  19. mantap mas , ikut bertamu yang mas ..............

    BalasHapus
  20. Mantap Gan.!!!
    Download kumpulan videos Hot terbaru dan terlengkap 2015 kunjungi link di bawah:
    1. http://Xvideos.blog33.com
    2. http://Mobile9.satu.mobi
    3. http://Waptrick.blog2an.com
    4. Kumpulan Videos Hot 2015

    BalasHapus
  21. Hai your post is really informative or helpful for me keep it up and check also my blog is very informative i write itself .

    BalasHapus
  22. Hai your post is really informative or helpful for me keep it up and check also my blog is very informative i write itself .

    BalasHapus
  23. perlu dibaca pelan2 nih... hmmm nicee

    BalasHapus
  24. Makasih banget infonya mas,,,,
    Salam kenal.

    BalasHapus
  25. Sepertinya kok mudah ya,ga ribet ..coba dulu mas bebas jerawat

    BalasHapus