Bagaimana Cara untuk Bermigrasi dari Bootstrap Versi 3 ke 4?

Jadi apa yang perlu Anda ketahui sebelum migrasi dari Bootstrap 3 ke Bootstrap 4?

Anda beruntung ; hari ini kita akan membahas tentang perubahan dan fitur baru antara versi tersebut. Perubahan yang Anda butuhkan secara umum hanya mengganti nama class dan beberapa set-up.

Untuk menghemat banyak waktu menjelajahi perubahan log, kami telah mengumpulkan daftar dari hal-hal yang perlu Anda ketahui ketika melakukan migrasi dari Bootstrap 3 ke Bootstrap 4.

Kita akan mulai dengan membahas perubahan yang dibuat di framework Bootstrap 4 dan bagaimana hal itu akan mempengaruhi kinerja website Anda. Kemudian kita akan memeriksa cara baru menginstall bootstrap dan bagaimana sistem grid memiliki perubahan, dan bagaimana flexbox dapat membantu pada desain responsif. kita juga akan membahas beberapa perubahan komponen dan melihat apa yang terjadi di JavaScript pada versi baru.

Terakhir, kita akan melihat beberapa komponen baru termasuk card, tooltip dan flexbox. Jika Anda bersiap-siap untuk bermigrasi situs dari versi Bootstrap lama ke Bootstrap 4, dan ini adalah artikel yang Anda cari.

Let’s go kita mulai sekarang….

Perubahan global

Berikut ini adalah perubahan secara global dalam Bootstrap 4 :

  • Beralih dari Less ke Sass untuk source file CSS.
  • Beralih dari px ke rem sebagai unit CSS utama.
  • Media query sekarang di ems bukan pxs.
  • Global font-size meningkat dari 14px ke 16px.

Bootstrap Source Code

Source code Bootstrap 3 termasuk kompilasi CSS, JavaScript, dan font asset bersama dengan source Less, JavaScript dan dokumentasi. Ini memiliki hirarki file sebagai berikut :

Bootstrap-source-code

Dalam Bootstrap versi 4.0.0-alpha source Less digantikan dengan file Sass karena migrasi dai Less ke Sass melalui libSass. Sejak Bootstrap 4 tidak mendukung glyphicon lagi, folder font juga dihilangkan. Bootstrap 4 memiliki berkas hirarki berikut :

Bootstrap-4-compiled-version

Pada saat penulisan ini, versi Bootstrap 4 compiled belum tersedia.

Menginstall Bootstrap 4

Bootsrap 4 menawarkan berbagai pilihan untuk menginstall. Bootstrap 4 Alpha baru saja keluar jadi tidak semua manajer paket memiliki versi 4 alpha diterbitkan, tapi akan segera keluar.

Anda dapat memilih opsi yang Anda inginkan sesuai dengan apa yang Anda butuhkan.

  1. Source Files : Menggunakan Bootstrap dengan mendownload package source lengkap yang mencakup Sass, JavaScript dan file dokumentasi. Hal ini memmerlukan compiler Sass, Autoprefixer, dan beberapa setup. Jika Anda hanya ingin menggunakan file bootstrap Anda hanya dapat menyalin lokasi CSS dan JavaScript dalam bagian tag <link> ke tag <head> sebelum semua bagian stylesheet lainnya memuat CSS.
  2. Bootstrap CDN : Menggunakan Bootstrap CDN, disediakan gratis oleh orang-orang di MaxCDN. Copy link dalam tag <link> ke dalam tag <head> sebelum semua stylesheet lainnya memuat CSS.
  3. Package Managers : Menggunakan package manager seperti Bower, npm, meteor dan composer untuk menginstall Bootstrap. Hal ini akan memerlukan compiler Sass dan Autoprefixe untuk setup yang cocok dengan versi resmi compiled.
  4. Custom build : Jika Anda hanya perlu bagian dari CSS Bootstrap atau JS Anda dapat menggunakan salah satu dari custom build tersedia :
  • Reboot termasuk variables/mixins, Normalize, dan Reboot. Tanpa JavaScript.
  • Grid only termasuk variables/mixins dan grid system. Tanpa JavaScript.
  • Flexbox mencakup semua Bootstrap dengan flexbox diaktifkan dan dukungan browser yang lebih rendah.

Update Sistem Grid

Sistem grid Bootstrap 4 masih mengikuti HTML yang sama, tetapi perubahan satuan ukuran.

Misalnya kita masih dapat menggunakan 12 kolom kotak markup dan nest grid yang sama.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 sm-6">
            <div class="row">
                <div class="col-lg-7 sm-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="col-lg-5 sm-8">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-5 sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</div>

Ini bukan baru ; Bootstrap 3 menggunakan class yang sama. Namun, class Bootstrap 4 menggunakan em bukan pixel dan mereka telah menambahkan satu tingkat baru untuk layar ekstra besar. Check out class bersamaan dengan ukuran layar mereka.

  • col-xs untuk tampilan ekstra kecil (lebar layar < 34em)
  • col-sm untuk tampilan yang lebih kecil (lebar layar ≥ 34em)
  • col-md untuk tampilan medium (lebar layar ≥ 48em)
  • col-lg untuk tampilan yang lebih besar (lebar layar ≥ 62em)
  • col-xl untuk tampilan ekstra besar (lebar layar ≥ 75em)

Hal lain yang patut dicatat adalah container dan row class. Container memiliki max-width diatur dalam rem sementara row memiliki margin kiri dan kanan negatif -.9375rem dan padding kiri dan kanan 0. 9375rem yang 15px di Bootstrap 3.

Sementara ini mungkin menjadi hal yang baik untuk mendukung semua ukuran layar, mungkin diperlukan waktu untuk beberapa web desainer dan developer untuk bisa menggunakannya karena kebanyakan dari program grafis yang sedang digunakan saat ini seperti Photoshop menggunakan pixel pada desainnya.

Jika Anda menggunakan source Sass CSS dari versi Bootstrap 4, Anda dapat mengontrol ukuran jaringan dengan mengubah variabel-variabel berikut:

  • $grid-columns : jumlah grid horizontal (12 default)
  • $grid-gutter-width : total padding di setiap grid (30px default)
  • $grid-float-breakpoint : ukuran minimum navbar menjadi dibentangkan ($screen-sm-min default)
  • $grid-float-breakpoint-max : ukuran maksimum dimana navbar mulai collapsing (deault akan menjadi ukuran $grid-float-breakpoint – 1)

Reset Komponen Pembaruan

File normalize.css Nicolas Gallagher digunakan dalam Bootstrap 3 untuk reset CSS dan diperbaiki di Bootstrap 4.

Menggunakan file sama yang Anda lihat di Bootstrap 3, mereka menambahkan beberapa reset Bootstrap dan basis style yang berguna dan mengkompresi menjadi file tunggal dan menyebutnya reboot.css. sebagai contoh, beberapa tag <table> stylenya disesuaikan untuk dasar sederhana dan kemudian memberikan .table, .table-bordered dan banyak lagi.

Class Perubahan dan Pembaruan

Ada cukup beberapa perubahan nama class antara dua versi dan beberapa class yang dihapus.

Typography

Bootstrap typography menggunakan Rems. Tidak seperti px dan em, hal itu bukan unit tetap atau relasi yang langsung atau terdekat pengukuran induknya. Unit rem dinamis dan relatif terdapat tag akar HTML. Namun, Anda tetap dapat menggunakan px, em dan pt pada proyek-proyek Bootstrap jika Anda ingin.

Untuk memberikan gambaran bagaimana Rems bekerja, Anda dapat membagi target untuk base ukuran html dalam piksel.

Katakanlah kita memiliki kode berikut.

html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

Dalam contoh diatas, kita tetapkan tag paragraf ke 1 rem yang setara dengan 16px ukuran html root Anda. Sementara tag h1 akan memiliki 1.875rem jika Anda akan membagi ukuran target yang 30px dengan ukuran html root 16px.

Bootstrap 4 menarik unit Rems pada scene untuk memiliki 100% skala yang sempurna dari seluruh aplikasi. Hal ini membuat lebih mudah untuk skala atas atau skala bawah untuk perangkat. Juga patut dicatat bahwa ukuran tag html dapat disesuaikan dengan ukuran yang diinginkan.

Class Table Kontekstual

Bootstrap 3 menggunakan class kontekstual untuk menaruh beberapa warna background pada baris tabel atau cell individu. Dalam Bootstrap 4, mereka menambahkan .table- * kode awal pada setiap class kontekstual.

Tables-Contextual-Classes

Tabel Condensed Berganti nama

Bootstrap 3 menggunakan class .table-condensed untuk membuat tabel lebih ringkas dengan memotong Padding cell di setengah. Dalam Bootstrap 4, namanya diubah menjadi .table-sm untuk konsistensi.

Lihat contoh kode di bawah.

<table class="table table-striped">
   <thead>
      <tr>
         <th>Table Header 1</th>
         <th>Table Header 2</th>
         <th>Table Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
      </tr>
      <tr>
         <td>Cell 4</td>
         <td>Cell 5</td>
         <td>Cell 6</td>
      </tr>
      <tr>
         <td>Cell 7</td>
         <td>Cell 8</td>
         <td>Cell 9</td>
      </tr>
   </tbody>
</table>

Kode di atas akan seperti ini.

table-e1457514298578

Form Class

Form memiliki beberapa perubahan class. Dua perubahan besar dibuat yang mengubah nama class .input-lg dan .input-sm ke .form-control-lg dan .form-control-sm dan menghapus .form-group-*.

Dalam Bootstrap 4 menambahkan class baru .form-control-label untuk label vertikal center dengan .form-control.

Mari kita melihat perubahan dalam aksinya.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="inputEmail3" placeholder="Email">
    </div>
  </div>
 
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control form-control-sm" id="inputPassword3" placeholder="Password">
    </div>
  </div>
 
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Kode di atas akan terlihat seperti ini.

signup

Migrasi lainnya

Selain penambahan untuk perubahan dan pembaruan class diatas, nama-nama class berikut juga perlu diubah jika Anda bermigrasi dari Bootstrap 3 ke Bootstrap 4.

migration

Perubahan JavaScript

Bootstrap menggunakan banyak JavaScript tergatung komponen seperti dalam komponen biasa ada perubahan tapi tidak benar-benar banyak perubahan terutama bagian JavaScript.

Pada kesempatan ini kita akan melihat beberapa penyesuaian tapi secara keseluruhan state coding sangat mirip. Berikut adalah beberapa penyesuaian :

  • Drop Support for IE8: sekarang Internet Explorer 8 support dihapus, itu aman untuk menggunakan jQUery 2.0 yang merupakan versi lebih cepat dari jQuery.
  • ES6 Support : Semua plugin ditulis dalam ES6 dan disusun dengan Babel, sebuah compiler JavaScript. Hal yang baik adalah bahwa hal itu dapat dikompilasi dan maintain(pemeliharaan) lebih mudah dan lebih cepat.
  • Masalah AMD dan UMD diselesaikan

Fitur Baru

Sebagian besar perubahan yang telah dibuat untuk membawa kesesuaian dengan skema penamaan yang digunakan oleh berbagai class tapi pada bagian ini, mari kita membahas beberapa fitur baru utama.

Card

Dalam Bootstrap 4, panel, thumbnail dan well telah dihapus dan diganti dengan card. Komponen ini dapat digunakan untuk menampilkan informasi sebagai halaman atau container yang mendukung berbagai jenis konten seperti link, teks, gambar, header, footer dan banyak lagi dengan berbagai warna background.

Untuk mengaktifkan kartu, menambahkan class .card dan .card-block untuk elemen. Ada juga beberapa class lagi yang dapat Anda gunakan dalam .card class.

  • .card-title untuk heading title
  • .card-text untuk elemen text
  • .card-header untuk header
  • .card-footer untuk footer

Lihat kode di bawah untuk melihat aksinya

<div class="card">
        <!-- Card Header -->
 
        <div class="card-header">
            Card Header
        </div>
 
        <div class="card-block">
            <!-- Card Title -->
 
            <h4 class="card-title">This is the Card Title</h4><!-- Image -->
            <img alt="" src="http://goo.gl/oxHSMr" width="280"> 
            <!-- Card Text -->
 
            <p class="card-text">These are card text. See? They are
            awesome!</p>
        </div><!-- Card Footer -->
 
        <div class="card-footer">
            Card Footer
        </div>
</div>

Kode di atas akan memiliki hasil ini.

colorful-painting

Flexbox

Fitur lain yang opsional ditambahkan dalam Bootstrap 4 adalah flexbox. Box layout yang fleksibel vs flexbox adalah model box baru yang dioptimalkan untuk layout UI ruang bekerja dengan CSS3. Hal ini memungkinkan susunan elemen pada halaman sehingga elemen “anticipate” ketika layout halaman diubah ukurannya.

Untuk mengaktifkannya di projek Bootstrap 4 Anda, mengatur variabel variabel Boolean $enable-flex untuk bernilai true dalam file _variables.scss dan setelah kompilasi berharap bahwa semua grid layout segera beralih menggunakan flexbox menyesuaikan sintaks HTML Anda.

Demo codepen oleh Nicholas Cerminara menunjukan bagaimana flexbox bekerja secara real time.

Catatan: flexbox tidak support Internet Explorer 9

Tooltip

Plugin tooltip Bootstrap awalnya didasarkan pada plugin jQuery.tipsy ditulis oleh Jason Frame. Namun, dalam Bootstrap 4 itu pindah ke Tether plugin pihak ketiga. Jika Anda ingin menggunakan fitur baru ini termasuk tether.js sebelum bootstrap.js.

Kata-kata Terakhir

Pada artikel ini, Anda telah belajar tentang hal-hal yang perlu Anda ketahui ketika melakukan migrasi dari Bootstrap 3 ke Bootstrap 4. Hal ini disarankan untuk selalu memeriksa dokumentasi resmi untuk pembaruan berikutnya.

Anda mungkin ingin mempertimbangkan untuk menggunakan package manager dalam bekerja melalui migrasi Anda. Sesuatu seperti tugas Grunt.js bersamaan dengan node.js, sehingga ketika Anda menjalankan build sistem Anda, perubahan ini dilakukan secara real time. Namun, itu perlu dicatat bahwa tidak semua package manajer memiliki Bootstrap 4 alpha dipublikasikan.

Sekian artikel baru tentang Bootstrap semoga bermanfaat dan jangan lupa untuk berbagi

Comments

comments