Bootstrap 3 Singkat: Migrasi dari Versi 2 ke Versi 3

Jadi apa yang terlibat dalam migrasi dari Bootstrap 2 ke Bootstrap 3? Sebenarnya, bukan masalah besar.

Meskipun banyak perubahan, tidak ada sejumlah besar bagi Anda untuk benar-benar berubah, dan perubahan yang umumnya Anda butuhkan hanya Anda butuh mengganti nama class mana yang berlaku.

Salah satu hal-hal yang mungkin ingin Anda lakukan, terutama jika Anda telah menggunakan BS hanya untuk pengembangan aplikasi web umum dan tidak mobile atau jenis desain responsif, adalah untuk menonaktifkan fitur responsif dalam BS3.

Hal ini cukup mudah untuk dilakukan, tapi tidak semua dianjurkan.

Anda dapat mencapai ini sebagai berikut:

• Jangan menambahkan tag meta yang mengandung lebar perangkat dan info ukuran awal lainnya pada head dokumen Anda.
• Timpa width pada elemen Anda yang ditandai dengan class container, dan pastikan Anda menggunakan style='width: xxx !important' ketika Anda melakukannya.
• Pastikan bahwa setiap penimpaan lebar diproses setelah aturan-aturan Bootstrap CSS utama telah dijalankan.
• Hapus semua perilaku collapse dan expand dan aturan dari semua konstruksi navbar dalam dokumen Anda.
• Ubah semua class layout grid hanya menggunakan class col-xs-* dan tak satu pun dari empat tingkat lainnya.

Jika Anda menargetkan IE8 dan IE9, Anda masih perlu untuk memastikan Anda menggunakan respond.js, bahkan jika Anda menonaktifkan responsif seperti yang diuraikan.

Perubahan Class

Seperti yang saya sebutkan sebelumnya, ada banyak perubahan nama class di antara dua versi, dan banyak class yang telah usang dan ditarik.

Satu hal yang akan (dan sudah jika Anda melihat Stack Overflow) datang sebagai kejutan bagi kebanyakan orang adalah penarikan dari class fluid width.

Dalam versi 2, jika Anda menginginkan sebuah wadah elastis dengan lebar penuh, maka Anda harus melakukan sesuatu seperti berikut:

1

<div class="container-fluid" id="myParentContainer">

2

  <div class="row-fluid" id="mycontentrow">

3

    <h1>A headline</h1>

4

    <p>Some paragraph text</p>

5

  </div>

6

</div>

Dalam versi 3 class container dan row-fluid kelas tidak lagi ada.

Jadi bagaimana Anda mendapatkan fluid container? Sederhana: tidak bisa.

Daripada membungkus konten Anda dalam sebuah container dan kemudian row, Anda tidak perlu membungkus mereka di dalam apapun.

Anda masih dapat menggunakan sistem grid untuk menyediakan wadah yang melingkupi konten Anda, sehingga hal-hal berbaris rapi dengan grid dari Bootstrap, tetapi Anda tidak perlu menempatkan sebuah wadah di sekitar koleksi elemen-elemen <div> tersebut sebelum Anda menggunakannya.

Pada kenyataannya, jika Anda menggunakan container dan row (versi non-fluid yang masih ada) maka Anda akan berakhir dengan semua konten berada di 1024-pixel, kolom tengah otomatis, dan dapat menggunakan seluruh lebar halaman lebar jika Anda tidak menginginkannya.

Migrasi Sistem Grid

Kemudian perubahan class terbesar berikutnya adalah sistem grid itu sendiri.

Dalam versi 2 Anda biasanya dibuat grid dengan cara berikut:

1

<div class="container">

2

  <div class="span2">Content here</div>

3

  <div class="span10">Content here</div>

4

</div>

Kode ini akan memberi Anda dua wadah yang mengisi rapi kotak 12 grid secara horizontal yang semua tata letak miliki (biasanya side bar).

Dalam versi 3, grid "medium level" adalah sekarang setara dengan class span v2, sehingga untuk menulis ulang kode sebelumnya untuk V3 Anda hanya perlu melakukan hal berikut:

1

<div class="container">

2

  <div class="col-md-2">Content here</div>

3

  <div class="col-md-10">Content here</div>

4

</div>

Namun, jika versi 2 hanya memiliki satu tingkat ukuran grid, versi 3 sekarang memiliki empat tingkat. Setiap tingkat dirancang untuk perangkat target utama yang dituju yang bahwa Anda antisipasi produk akhir Anda akan berjalan.

Unit-unit grid ini sekarang dinamai sebagai berikut:

• Perangkat sangat kecil: col-xs-*
• Perangkat kecil: col-sm-*
• Perangkat menengah: col-md-*
• Perangkat besar: col-lg-*

Media queries digunakan BS3 secara internal untuk memutuskan class grid tersebut di atas untuk digunakan, dan ukuran yang berbeda yang didefinisikan sebagai berikut:

• Sangat kecil: layar lebar kurang dari 768 piksel
• Kecil: layar lebar lebih besar dari atau sama dengan 768 piksel, atau kurang dari 992 piksel
• Menengah: layar lebar lebih besar dari atau sama dengan 992 piksel, atau kurang dari 1200 piksel
• Besar: layar lebar lebih besar dari atau sama dengan 1.200 piksel

Anda meng-kode beberapa versi grid BS3 Anda untuk memutuskan jenis mana yang digunakan bila menargetkan beberapa tampilan. Misalnya jika Anda melakukan hal berikut:

1

<div class="container">

2

  <div class="col-xs-2">Content here</div>

3

  <div class="col-xs-10">Content here</div>

4

  <div class="col-sm-2">Content here</div>

5

  <div class="col-sm-10">Content here</div>

6

  <div class="col-md-2">Content here</div>

7

  <div class="col-md-10">Content here</div>

8

  <div class="col-lg-2">Content here</div>

9

  <div class="col-lg-10">Content here</div>

10

</div>

BS3 akan menyembunyikan dan menampilkan wadah yang diperlukan, tergantung pada lebar layar perangkat dan operasi media queries.

Seperti sistem grid dari versi sebelumnya, ada 12 kolom horizontal di semua ukuran yang berbeda, jadi ukuran grid manapun yang ditampilkan, Anda akan selalu mendapatkan 12 grid pada setiap perangkat.

Bagaimanapun, lebar kolom itu sendiri juga berubah, jadi Anda mungkin perlu merencanakan konten dalam Grid mereka yang mengambil keuntungan dari ukuran yang berbeda. Ukuran masing-masing adalah sebagai berikut:

• col-xs-* = Ukuran otomatis, dimensi tidak tetap
• col-sm-* = 60 piksel
• col-md-* = 78 piksel
• col-lg-* = 95 pixel

Pembatas margin dalam semua kasus akan tetap pada 15 piksel pada setiap sisi wadah grid, memberikan keseluruhan pembatas 30 piksel. Ukuran ini akan konsisten tidak peduli tingkat ukuran grid yang Anda gunakan.

Bersarang dan offset bekerja seperti yang sebelumnya, tetapi sebagai dengan grid mereka sendiri, dengan cara mengubah sedikit nama class aktual yang digunakan.

Untuk menerapkan offset, hanya gunakan col-md-offset-*, ingat untuk menggantikan md dengan xs, sm atau lg yang diperlukan, tergantung pada ukuran grid Anda.

Bersarang dilakukan hanya dengan menyarangkan wadah di bawah kendali class col-xx-* di dalam satu sama lain, dimana mereka akan mengubah ukuran dan berperilaku seperti yang mereka lakukan dalam versi BS sebelumnya.

Contoh berikut akan menunjukkan cara yang benar untuk mencapai semua teknik ini:

1

<div class="col-md-9">

2

  Level 1: .col-md-9

3

  <br/>

4

  <div class="col-md-6">

5

    Level 2: .col-md-6

6

  </div>

7

  <div class="col-md-6">

8

    Level 2: .col-md-6

9

  </div>

10

</div>

Contoh ini akan memberikan Anda sebuah grid yang terlihat seperti berikut:

1

<div class="col-md-4">

2

  .col-md-4

3

</div>

4

<div class="col-md-4 col-md-offset-4">

5

  .col-md-4 .col-md-offset-4

6

</div>

7

<div class="col-md-3 col-md-offset-3">

8

  .col-md-3 .col-md-offset-3

9

</div>

10

<div class="col-md-3 col-md-offset-3">

11

  .col-md-3 .col-md-offset-3

12

</div>

13

<div class="col-md-6 col-md-offset-3">

14

  .col-md-6 .col-md-offset-3

15

</div>

Contoh ini akan memberikan Anda sebuah layout sebagai berikut:

BS3 juga membawa sesuatu yang baru ke dalam tabel ketika berurusan dengan melakukan offset dan bersarang, dan itu adalah sesuatu yang disebut pengurutan kolom.

Jika Anda ingin kolom akan disajikan dalam urutan yang berbeda untuk bagaimana Anda mendefinisikan mereka dalam dokumen HTML Anda, maka Anda dapat menggunakan class col-xx-pull-* dan col-xx-push-* yang baru untuk mendorong atau menarik grid layout Anda menjadi urutan yang Anda inginkan. Sebagai contoh:

1

<div class="col-md-8">8 columns of content</div>

2

<div class="col-md-4">4 columns of content</div>

Jika Anda me-render di dokumen Anda, seperti yang diharapkan, Anda akan mendapatkan berikut ini:

Namun, jika Anda memodifikasi kode di atas untuk menambah pengubah pendorong dan penarik sebagai berikut:

1

<div class="col-md-8 col-md-push-4">8 columns of content</div>

2

<div class="col-md-4 col-md-pull-8">4 columns of content</div>

Ketika Anda me-render dokumen, Anda akan melihat tata letak Anda berubah seperti berikut:

Akhirnya, jika Anda menggunakan versi sumber Less CSS dari Bootstrap, Anda memiliki kontrol penuh atas ukuran grid dengan mengubah variabel berikut:

• @grid-columns: mengontrol jumlah grid horizontal (standar 12)
• @grid-gutter-width: margin total di sekitar setiap grid (default 30 piksel)
• @grid-float-breakpoint: ukuran minimum di bawah ini yang kita miliki perangkat "ekstra kecil" (default 768 piksel)

Jadi sekarang kita memiliki sistem grid baru di bawah kendali, apakah ada hal lain yang perlu Anda ketahui?

Lebih cerdas Anda berpikir, "Tapi itu gila—dengan semua beberapa set unsur-unsur <div> dan offset dengan class col-xx-xx, semua untuk ukuran layar yang berbeda, saya mungkin membuat empat situs yang berbeda, dengan empat resolusi yang berbeda dalam pemikiran!" Jujur saja, saya tidak akan menyalahkan Anda, kecuali untuk satu hal: masing-masing tingkat ukuran tata letak baru ini dirancang untuk bekerja pada markup yang sama, pada saat yang sama, dan menempati ruang yang sama.

Mari kita ambil kode dalam sampel kode 4 sebelumnya, dan menulis ulang untuk melakukan cara ini sesuai yang disarankan:

1

<div class="container">

2

  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Content here</div>

3

  <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">Content here</div>

4

</div>

OK, jadi Anda mungkin berakhir dengan daftar class dari neraka pada elemen Anda, tapi satu set markup akan beradaptasi dengan semua ukuran layar dan mengubah ukuran sendiri jika diperlukan.

Ini juga bekerja dengan berbagai offset, urutan, dan class yang bersarang.

Migrasi Lainnya

Selain yang telah kita bahas, nama class berikut juga perlu diubah jika Anda bermigrasi dari layout V2 ke layout V3 (Catatan: Tabel berikut telah diambil langsung dari dokumentasi Bootstrap 3 dan adalah benar pada saat penulisan. Namun, sesuai kematangan Bootstrap, ini mungkin tidak tetap seperti itu).

Seperti yang disebutkan sebelumnya, banyak perubahan telah dibuat untuk membawa kesesuaian skema penamaan yang digunakan oleh berbagai class. Tetapi banyak dari mereka juga telah diganti nama karena keseluruhan tujuan mereka telah berubah.

Kita akan pergi ke lebih rinci di tutorial yang akan datang dalam seri ini, tetapi untuk sekarang, jika Anda melakukan konversi, maka Tabel 2 akan memberitahu Anda semua yang Anda butuhkan untuk menarget ulang layout v2 ke v3.

Anda mungkin ingin mempertimbangkan untuk menggunakan pekerjaan kustom pada sesuatu seperti penugasan Grunt.js, sehingga ketika Anda menjalankan pembangunan sistem Anda, perubahan ini dilakukan secara otomatis. Ini akan memungkinkan pengembang Anda untuk tetap produktif menggunakan v2 sementara secara bertahap membuat pergerakan ke v3.

Jadi apa sebenarnya telah ditambahkan untuk Bootstrap yang baru, dan apa yang benar-benar telah dihapus?

Kita akan mulai dengan apa yang telah dihapus, dan kita akan membahas apa yang telah ditambahkan secara lebih rinci dalam tutorial tentang "Fitur CSS yang Berubah". Hal ini lebih penting bahwa Anda tahu apa yang telah dihapus dalam tutorial ini, karena ini adalah tutorial yang mungkin menjadi rujukan Anda saat bermigrasi tata letak Anda.

Pertama kita akan mulai dengan apa yang telah dihapus di mana bersangkutan dengan form, dan sayangnya, cukup banyak. Kita tidak lagi memiliki jenis spesifik untuk form form-search, dan bar berbayang yang biasanya ditemukan di kaki form form-actions juga telah usang di v3.

Juga yang telah hilang adalah class yang biasanya digunakan untuk menampilkan kesalahan validasi, control-group-info, dan mitra bantuannya, help-inline. Tidak dari empat class ini memiliki penggantian yang direkomendasikan dalam basis kode v3, yang berarti bahwa untuk membangun setara dari mereka, Anda akan perlu menggunakan elemen-elemen dan class-class lain yang berlaku.

Melanjutkan dengan form, class controls utama yang digunakan untuk membungkus seluruh set kontrol juga hilang, bersamaan dengan controls-row. Sebaliknya, Anda disarankan untuk menggunakan row atau class form-group baru. Form juga telah kehilangan sebagian besar class pengukuran; class-class ukuran-tetap seperti input-mini, input-small, input-medium, input-large, input-xlarge, dan input-xxlarge sekarang hilang semua, bersamaan dengan class kontrol tingkat blok input-block-level. Sebaliknya, Anda sekarang disarankan untuk mengontrol ukuran elemen form Anda menggunakan form-control dalam kombinasi dengan ukuran baru dan tata letak yang tersedia dalam sistem grid.

Dari sudut pandang kontrol individu, class inverse telah dihapus dari tombol dan kontrol lain serupa, dan kita juga telah kehilangan class dropdown-submenu yang mendukung hanya menggunakan split tombol drop-down untuk membuat fungsi yang sama.

Untuk tab, class tabs-left, tabs-right, dan tabs-below tidak ada lagi, yang berarti kita sekarang hanya memiliki kemampuan untuk menempatkan tab di bagian atas konten, selaras kiri.

Tetap dengan tab, class untuk bekerja dengan konten dalam setup tab berbasis pil juga telah dihilangkan, berarti bahwa pill-pane dan pill-content kini harus menggunakan class tab-content dan tab-pane yang umum.

Akhirnya, berbagai class navbar tidak tanpa korban: navbar-inner, navbar divider-vertical, nav-list, and nav-header tidak lagi merupakan bagian dari kerangka.

Dalam kebanyakan kasus, tidak ada yang setara langsung di v3 untuk class-class ini, walaupun ada beberapa kesamaan di class-class lain yang mungkin terbukti bermanfaat. Misalnya, nav-list dan nav-header dapat diciptakan kembali menggunakan grup Lists.

Ada grafik referensi cepat untuk semua ini dalam panduan migrasi di situs web Bootstrap 3.

Tutorial ini merupakan sebuah bab dari Bootstrap 3 Singkat, eBook gratis dari tim di Syncfusion.