Selamat Datang

Review dan Cara Migrasi Ke Twitter Bootstrap 3

Cara Migrasi dari Twitter Bootstrap versi 2 ke Twitter Bootstrap versi 3 ternyata tidak semudah biasanya, di versi 3 ini sangat banyak perubahan dan bahkan harus merubah secara menyeluruh untuk menyesuaikan aturan-aturan penulisan kode di versi 3.

Bootstrap3

Seperti kita ketahui, Twitter Bootstrap baru saja memperkenalkan Twitter Bootstrap 3 RC 1, versi ini belumlah versi final, namun gambaran versi full release nya ya kira-kira akan seperti itu, walaupun bisa jadi nanti akan ada perubahan (tapi rasanya hanya perubahan minor).

Apa Yang Baru Di Twitter Bootstrap 3?

Ada banyak sekali perubahan di Twitter Bootstrap 3, di kabarkan bahwa ada 1.600 Commit di Github, 72.000 penambahan/pengurangan, dan 300 file yang dirubah.

Mobile First

Hampir semua framework berkualitas baik memikirkan ini, dimana tampilan dan performa di mobile sangat diutamakan dalam pembutan sebuah website. Di Bootstrap 3 tidak ada lagi pemisahan file seperti bootstrap-responsive.css, sekarang semua ada dalam satu file bootstrap.css saja, dengan satu file tersebut kita sudah bisa membuat tampilan website untuk desktop, tablet dan handphone.

Grid.

Yang cukup penting untuk disoroti  adalah perubahan Grid di Twitter Bootstrap 3, dimana Bootstrap 3 kini hadir dengan Fluid Grid yang semakin canggih, dimana sekarang ukuran gridnya hadir dalam tiga macam, yaitu:
Tiny  (untuk smartphone menggunakan .col-* )
Small (untuk tablet menggunakan .col-sm-* )
Large (untuk laptop/desktop menggunakan .col-lg-* )

Berbeda dengan versi 2, sekarang bootstrap tidak menyediakan grid dengan ukuran tetap yang menggunakan pixel, karena class .container dan .row secara otomatis fluid (sedangkan dulu menggunakan pixel). Jadi jangan gunakan .container-fluid dan .row-fluid lagi di twitter bootstrap 3.

Lebih Ringan

Tidak seperti versi sebelumnya, kini bootstrap hanya akan ditangani oleh 1 file css yang hanya berukuran ~66 KB (Belum menggunakan minify atau belum di kompres) WAW!!!

Migrasi Dari Versi 2.x ke versi 3.x

Yang pertama perlu diketahui yaitu, tidak ada lagi class .span*, sekarang sudah diganti dengan .col-lg-*. Namun jika ingin lebih responsive bisa menggunakan class .col-* untuk smartphone dan .col-sm-* untuk tablet.

Jika dahulu kita menggunakan class .span* yang akan menghasilkan div bertumpuk secara vertical ketika tampil dilayar yang lebih kecil, namun sekarang kita bisa menghindari tumpukan secara vertical tersebut dengan class .col-* dan .col-sm-* agar lebih leluasa menentukan tampilan.

Untuk migrasi dari versi 2.x ke versi 3  perlu mengubah span* menjadi col-lg-*.

  • Ganti .span* dengan .col-lg-*
  • Ganti .row-fluid dengan .row
  • Ganti .container-fluid dengan .container

Jadi jika ingin membuat fluid pada desktop dan tablet, namun bertumpuk vertikal pada smartphone maka

Rubah .span* menjadi .col-sm-*

Untuk membuat fluid pada semua layar (tidak pernah menumpuk)

Rubah .span* menjadi .col-*

Kostumasi

Untuk kostumasi, kita bisa mengkombinasikan Large, small atau tiny grid, jadi dengan 3 grid berbeda tersebut maka akan memudahkan dalam memanipulasi tampilan horizontal dan vertical sebuah element dalam beberapa device.

Sebagai contoh, ini akan memungkinkan tata letak menggunakan 2 kolom (50%) pada desktop, dan kemudian beralih ke satu baris 25% kolom lebar pada tablet ..

    <div class="row">
        <div class="col-lg-6 col-sm-3"> </div>
        <div class="col-lg-6 col-sm-3"> </div>
        <div class="col-lg-6 col-sm-3"> </div>
        <div class="col-lg-6 col-sm-3"> </div>
    </div>

Perubahan Class versi 2.x ke versi 3.x

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-lg-*
.offset* .col-offset-*
.brand .navbar-brand
.navbar .nav .nav .navbar-nav
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-small
.visible-phone .visible-sm
.visible-tablet .visible-md
.visible-desktop .visible-lg
.hidden-phone .hidden-sm
.hidden-tablet .hidden-md
.hidden-desktop .hidden-lg
.input-prepend .input-group
.input-append .input-group
.add-on .input-group-addon
.btn-navbar .navbar-btn
.thumbnail .img-thumbnail

Class dan Element Baru Di Versi 3

Elemen Deskripsi
Panels .panel
List Groups .list-group
Glyphicons .glyphicon
Jumbotron .jumbotron
Small Grid .col-sm-*
Small Offsets .col-push-*,.col-pull-*
Tiny Grid .col-*
Input Groups .input-group
Input Add-on .input-group-addon
Input Add-on Button .input-group-btn
Form Controls .form-control
Navbar text .navbar-text
Justified Tabs / Pills .nav-justified
Responsive Images .img-responsive
Contextual Tables .success,.danger,.warning,.active
Modal .modal-dialog, .modal-content
Thumbnail Image .img-thumbnail

Perubahan Nama Class pada versi 2 dan versi 3

Element Sebelumnya di 2.x 3.0 Sama Dengan
Hero Unit .hero-unit .jumbotron
Form actions .form-actions n/a
Grid .span* .col-lg-*
Fluid container .container-fluid .container (fluid, fixed is deprecated)
Fluid row .row-fluid .row (fluid, fixed is deprecated)
Icons .icon-* .glyphicon-*
Navbar button .btn-navbar .navbar-btn
Navbar inner .navbar-inner n/a
Thumbnails .thumbnails .col-* and .thumbnail
Input append / prepend .input-append,.input-prepend,.add-on .input-group

 

Informasi Tambahan

Catatan dan Peringatan

  • .input-* lebarnya menjadi 100% . Berdampak pada .form-inline
  • .badge tidak lagi memiliki kelas kontekstual (-success,-primary,etc..)
  • .btn juga harus menggunakan .btn-default untuk mendapatkan tombol standar
  • .container dan .row sekarang fluid (berbasis persentase)
  • Gambar tidak lagi otomatis responsive. Sekarang menggunakan .img-responsive untuk gambar responsive
  • Icon, sekarang .glyphicon ada di  repository berbeda.

Download

Anda bisa mendapatkan Twitter Bootstrap 3 di http://getbootstrap.com/, namun jika jika masih ingin menggunakan versi 2 silahkan kunjungi http://getbootstrap.com/2.3.2/

Sekian
Demikianlah pembahasan kita mengenai apa yang baru dan perubahan apa saja yang ada di Twitter Bootstrap 3.

Semoga membuat anda menjadi lebih paham dalam penggunaan Twitter Bootstrap.

Salam Web Design Indonesia.





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

15 thoughts on “Review dan Cara Migrasi Ke Twitter Bootstrap 3

  1. thaks, bermanfaat sekali.

  2. m.ihsan wahyudi says:

    thx you, sangat bermanfaat….,tetap menulis

  3. ridha says:

    wah kayakx perubahan besar2an nh, pdahl baru blajar versi 2, :)
    ga p2, thanks berat infox gan… :)

  4. Topa Dista says:

    wah.. saya baru berkunjung Bos…
    bner2 sangat bermanfaat update bos ini….

    semangat menulis Bos
    ditunggu article terbarunya

  5. Toto Prayogo says:

    kayaknya dr situsnya ada yg salah tulis ..
    .thumbnail versi 2 yakni masih menggunakan .img-polaroid ..
    tapi maaf jika salah .. soalnya dulu makenya aku gitu

  6. @eiqse says:

    Awsome post.

    Jadi menurut mimin lebih enak pake nyang mana? 2 atau 3 ?

  7. Gugumm says:

    berkunjung gan,, sangat bermanfaat sekali..thx Gan..

  8. Juwita says:

    Terima kasih min, brmanfaat skali
    Tapi “katanya”, dengan menggunakan satu kontainer yaitu .container menjadikan developer front end lebih fleksibel mengatur width nya.
    Nah kalo dulu .container itu fixed, dan kalo ingin fluid kan .container-fluid, dikarenakan di bs3 .container udah otomatis fluid seperti yg mimin bilang diatas, jadi gmana ya kalo ingin buat fixed nya.
    Misalnya maaf, di framework lain seperti sekeleton atau foundation kan default 960px, nah kalo ingin buat 960px atau width yang lain di bs3 gmana ya ?
    Saya buat manual .container{width:960px..} malah aneh ya jadinya, maksudnya awal berjalan baik, tapi waktu browser di resize jadi ngga bagus ya =(

  9. yudi says:

    bos klo mau validasi form yang ada dalam modal bootstrap gmn bos, mohon pencerahannya.?

  10. […] Tidak ada cara lain untuk berkembang ke lebih baik jika masih kembali ke CSS hack dan fallback. Semua cara-cara yang dilakukan untuk mensupport IE yang sudah kuno sudah tidak akan dilakukan lagi, namun jika Anda tetap ingin menggunakan IE8, Anda bisa gunakan Bootstrap 3. […]

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