Blog Post

Teknik Migrasi Bootstrap 2.3.2 ke v3.0.0 menggunakan Adobe Dreamweaver

28

Agu 2013

Teknik Migrasi Bootstrap 2.3.2 ke v3.0.0 menggunakan Adobe Dreamweaver

Sidik Hanrei | Bootstrap , Tutorial , Design , CSS , JavaScript , DreamWeaver

Tips & Trik Migrasi Bootstrap v2.3.2 ke Bootstrap v3.0.0 Menggunakan fitur Search and Replace di Adobe Dreamweaver, sederhana dan mudah digunakan baik untuk pemula sekalipun.

Setelah 2 tahun memberikan inovasi sebagai Framework yang menginspirasi dunia Web Desain baik front-end maupun back-end. Kini Bootstrap 3.0.0 kembali menawarkan kehebatan yang lebih canggih daripada versi sebelumnya. Baca informasi release bootstrap 3.0.0

Untuk mempermudah pembuatan website, Bootstrap hadir dan menawarkan keunggulan tersebut untuk meningkatkan kualitas web desain melalui Framework CSS dan Javascript yang dapat kita gunakan secara maksimal untuk pembuatan website.

Saat ini, orientasi web desain telah beralih ke tempat yang sangat istimewa (flat desain) yaitu desain responsive yang ditujukan untuk pengguna website melalui perangkat yang ber-layar kecil (gadget/smartphone).

Migrasi v2.3.2 ke v3.0.0

Jika website Anda sekarang sudah online dengan bootstrap versi 2.x, secara garis besar Bootstrap 3.0.0 telah melakukan banyak perubahan 379 file dirubah, berarti terdapat 84.000 perubahan (penambahan maupun penghapusan). Berarti jika Anda melakukan migrasi, banyak hal yang harus dipertimbangkan untuk melakukan penyesuaian terhadap Framework terbaru tersebut.

Berikut ini adalah table referensi untuk class yang di rubah antara v2.x dan v3.0 :

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.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-small .input-sm
.input-large .input-lg
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.thumbnail .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline

Untuk lebih jelasnya silahkan baca Informasi Rilis Bootstrap v3.0.0

Banyaknya perubahan yang membuat kita harus banyak melakukan penyesuaian jika ingin melakukan migrasi, tapi jangan putus asa dulu. Walaupun website Anda dibuat lebih dari ratusan file (bahkan ribuan), ada cara sederhana yang dapat kita gunakan dengan Adobe DreamWeaver yaitu fitur Search & Replace yang akan membuat kita bersemangat untuk tetap optimis melakukan migrasi ke versi Bootstrap yang baru.

Migrating Bootstrap with Adobe DreamWeaver

Gunakan CTRL+F atau Edit > Find & Replace untuk memunculkan jendela Find and Replace

Ada 7 options yang dapat kita gunakan untuk mulai melakukan migrasi secara otomatis :

  1. Find, kolom yang digunakan untuk meletakkan keyword (dalam hal ini class) yang akan dicari.
  2. Replace, kolom yang digunakan untuk memasukkan Pengganti class yang dicari (replace).
  3. Find In, combo yang dapat anda gunakan untuk menentukan pencarian secara lebih spesifik (Selected text, Current document, open documents, Folder, Selected files in site, Entire current local site) dalam praktek kali ini kita menggunakan option Folder.
  4. Search, jenis pencarian (Source Code, Text, Text (Advanced), Specific Tag) pada praktek kali ini kita menggunakan option Source Code.
  5. Folder Location, lokasi folder yang semua dokumen di dalamnya ingin dirubah.
  6. Match case, adalah fungsi yang akan kita gunakan untuk melakukan pencarian secara Case Sensitive.
  7. Replace All, tombol yang akan kita gunakan untuk melakukan eksekusi perubahan.

Misalnya kita akan melakukan perubahan class span4 menjadi col-md-4 di dalam folder /lib/, maka cara yang dapat kita lakukan adalah sebagai berikut :

Replace span-* to col-md-*

dan hal yang sama dapat anda lakukan untuk melakukan penyesuaian apapun berdasarkan direktori penyimpanan source code yang anda miliki. dan Jika anda menguasai Regular Expression, anda akan lebih mudah melakukan hal ini.

Perhatikan segala option yang Anda pilih untuk replace, karena metode ini tidak dapat di ulangi (undo).

Lakukan sesuai keinginan anda, dan Bootstrap 3.0.0 berhasil kita gunakan dengan segala perubahan yang telah dilakukan oleh Bootstrap Terbaru.