Selamat Datang

Mudahnya Membuat Desain Web Dengan Twitter Bootstrap

Membuat desain website dengan Twitter Bootstrap memang cukup menarik, framework html & css ini semakin populer dan digemari karena memudahkan web designer dalam membuat layout, twitter bootstrap menggunakan sistem grid untuk pengaturan layout, tersedia juga fitur untuk membuat responsive website agar tampilan website bisa dibuka di mobile (Tablet PC/Handphone), selain itu Twitter bootstrap juga menyediakan kode-kode siap pakai yang bisa dengan mudah digunakan seperti tabel, tombol, form, dll.

Twitter Bootstrap tercatat sebagai kode yang paling banyak di download di Github sekarang ini, komunitasnya pun semakin banyak dan terus berkembang. Tools yang berkaitan dengan kostumasi twitter bootstrap pun sangat banyak.

FYI: Website http://www.tutorial-webdesign.com ini juga dibuat dengan menggunakan Twitter Bootsrap

Namun dengan begitu banyaknya fitur yang dimiliki Twitter Bootstrap ternyata masih ada saja yang kurang puas, manusia memang selalu mencari cara agar semua bisa lebih praktis, walaupun sebenarnya twitter bootstrap sudah lumayan mempersingkat waktu.

Layoutit (http://www.layoutit.com)

Disini Tutorial Web Design akan memperkenalkan sebuah website yang akan semakin mempermudah anda untuk bekerja dengan twitter bootstrap.

start-now

Dengan layoutit membuat desian degan twitter bootstrap terasa semakin mudah, kita tinggal melakukan drag & drop untuk membuat layout yang diinginkan.

Tim Tutorial Web Design sudah mencoba dan ternyata sangat mudah menggunakan layoutit. Kita tinggal buka website http://www.layoutit.com setelah itu tekan tombol Start Now, lalu mulailah dengan melakukan Drag & Drop menu yang ada di kiri dan letakan di kanan sampai desain yang anda inginkan selesai.

Twitter Bootsrap Layoutit

Twitter Bootsrap Layoutit

Jika sudah selesai tinggal klik tombol Download, anda akan disuguhkan kode yang bisa di download atau sekedar meng-copy code yang sudah di generate.

Sekian Info Menarik ini, semoga semakin memudahkan dalam pembuatan desain website.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

33 thoughts on “Mudahnya Membuat Desain Web Dengan Twitter Bootstrap

  1. gang says:

    wah, mantep ni infonya. saya coba ni yah.. :D

    • technocrat says:

      mantaps gan, nice artice, mampir juga dimari gan buat tambahan referensi :

      Substansi :
      -Pengertian atau definisi bootstrap
      -Sejarah atau asal-usul bootstrap
      -Pembuat bootstrap
      -Tempat download bootstrap
      -Struktur bootstrap
      -Memahami cara menggunakan bootstrap
      -Memahami cara menggunakan class css bootstrap
      -Memahami cara menggunakan icon-icon pada bootstrap
      -Memahami cara mengintegrasikan javascript pada bootstrap
      -Memahami cara menerapkan design form registrasi dengan bootstrap

      httx://gatewawan.blogspot.com/2014/09/tutorial-bootstrap-twitter-framework.html

      semoga bermanfaat, thanks

  2. Padangilalang says:

    kerennnn……..
    nice info

  3. Afdhal says:

    Mantap Gun ???

  4. kucingbelang4 says:

    waduh… makin males aja nih orang belajar css nya …

    • Aryandhani says:

      gak gitu juga masbro. malahan kita bisa mengembangkan nya menjadi yang lebih baik. bootstrap ini kan sekedar framework saja.. yang penting berimajinasi saja masbro! =D

  5. waduh… makin males aja orang belajar css ni :/

  6. zul fikar says:

    menambah wawasan tentang bootstrap… tapi knpa namanya twitter bootstrap?

  7. santo says:

    Mau tanya, kalau menggunakan Twitter Bootstrap ngk perlu taruh link difooter ya untuk license jenis CC nya?
    Lalu kalau free apa ada batasannya?

  8. ambrizal suryadinata says:

    mantap mas bro

  9. Deddy says:

    Terima kasih info nya sangat bermanfaat…

  10. […] Mudahnya Membuat Desain Web Dengan Twitter Bootstrap […]

  11. yanto says:

    thx sharing gan, jadi setelah di download baru di edit iya css nya di sesuaiin?

  12. Lowongan 24 says:

    Bootsrtap tu kek CMS ya?

  13. Egi says:

    om, kenapa ya pas saya mau download file nya jd zip , file nya jadi corupt gitu ??

  14. Hadi says:

    Keren gan, mksh infonya

  15. hardi says:

    makasih banget mas infonya

  16. hapit says:

    Min mau tanya, kalo bikin beberapa warna (background) dalam satu page pake bootstrap seperti tampilan awal layoutit itu caranya gimana ya? Jadi dalam satu container ada 4 warna dengan tinggi yang berbeda dan bisa penuh sampai batas pojok container. Kalo dibuat 3 row kan warnanya mentok sampai batas row-nya aja ga sampai batas containernya.

  17. hapit says:

    Jadi kan tampilan awal website layoutit itu ada 4 warna dalam satu halaman, biru tua (header), biru, abu-abu, dan kecoklatan (footernya). nah caranya bikin ky gitu pake bootstrap gimana ya? klo strukturnya saya buat
    div container
    div row untuk header
    div row warna biru
    div row warna abu-abu
    div row footer

    kan ga bisa mirip. jadinya kotak-kotak karena ada jarak antara batas margin sisi kanan kiri “row” dengan “container”
    hehe, maaf membingungkan

  18. callist says:

    semakin mudah aja buat website dengan bootstrap, apa ada yang sudah berhasil buat template via layoutit untuk wordpress? bisa share disni nih, makasih gan udah share ….salam kenal

  19. fuking says:

    JUDUL ARTIKEL DENGAN ISINYA BEDA JAUH. BLOG SAMPAH.

  20. freemining says:

    wah,
    sekarang sdh serba instan,
    makan apa saja tidak tau bahan pembuatnya, tau2 mati sendiri………
    nice artikel tapi tidaksesuai harapan :(

  21. champchimp says:

    keren,,,,

  22. mantep gan artikelnya

  23. Erik says:

    nice article..btw bro, cara buat navbar bootsrap berubah menjadi tombol menu kecil bagimana ya? soalnya kalau di mobile menu nav kayaknay nutupin konten…

  24. mantap nih gan, harus dicoba dulu ini

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development