Your browser does not support JavaScript!

Gaswad.Com

— Apapun Informasinya Yang Penting Berguna
    Follow :

Yang Baru Di Bootstrap 4
Oct 31st, 2017

Yang Baru Di Bootstrap 4

Category : Others | Posted by G-admin at at October 31st, 2017 06:25 am
629 | 0

Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membuat Web Responsif Dengan Boostrap yang masih menggunakan versi 3, ehh… udah nongol aja ini adeknya yang versi 4.

Yaaa’, sebenarnya sih’ udah agak lama juga keluarnya meskipun masih Beta, tapi baru sempat penulis bahas di artikel ini karena penulis habis turun gunung semedi dalam goa jadinya agak Down To Date deh. Hehe… 😀

Lalu kira-kira perubahan-perubahan apa saja yah’ yang di lakukan oleh abang-abang developer Bootstrap 4 ini ketimbang versi sebelumnya?

Sebelum penulis bahas lebih jauh mungkin sedikit dari kalian masih ada yang bingung dan tidak tahu apa itu Bootstrap? Bagi kalian yang belum tahu, singkatnya Bootstrap merupakan salah satu Framework CSS yang saat ini menurut penulis paling banyak di gunakan oleh para Web Programmer dan Web Developer untuk membuat website Responsif atau Mobile Version, untuk lebih jelasnya apa itu Framework silahkan kalian merujuk ke link berikut ini :

Nah’, sekarang mari kita lihat perubahan-perubahan utama apa saja pada Boostrap 4 Beta 2 ini di bandingkan dengan versi sebelumnya.

  • Badges
    Penambahan class baru untuk variasi warna background badge, yaitu :

    • badge-primary
    • badge-secondary
    • badge-success
    • badge-info
    • badge-warning
    • badge-danger

    Contoh penggunaan :
    class=”badge badge-primary”

  • Grid Options
    Perubahan pada Grid Layout, class col-xs-* di hapus dan di ganti menjadi col-*, serta penambahan grid baru yaitu col-xl-* untuk ukuran layar >=1200px. Sedangkan untuk variasi ukuran lebar tiap-tiap grid untuk resolusi layar tertentu juga terjadi perubahan, yaitu :

    • col-* (Extra Small) : <576px
    • col-sm-* (Small) : >=576px
    • col-md-* (Medium) : >=768px
    • col-lg-* (Large) : >=992px
    • col-xl-* (Extra large) : >=1200px
  • Background
    Penambahan class background untuk menampilkan background warna, yaitu :

    • bg-primary
    • bg-secondary
    • bg-success
    • bg-info
    • bg-warning
    • bg-danger

    Contoh penggunaan :
    class=”bg-primary”

  • Text
    Penambahan class warna teks untuk merubah warna pada teks, yaitu :

    • text-primary
    • text-secondary
    • text-success
    • text-info
    • text-warning
    • text-danger

    Contoh penggunaan :
    class=”text-primary”

  • Panel
    Perubahan pada class panel panel-* di ganti menjadi class card.
    Contoh penggunaan :

    <div class="card">
      <div class="card-header"></div>
      <div class="card-body"></div>
      <div class="card-footer"></div>
    </div>
  • Images
    Perubahan penggunaan class pada elemen <img>, yaitu :

    • Classimg-responsive‘ menjadi ‘img-fluid‘.
    • Classimg-rounded‘ menjadi ‘rounded‘.
    • Classimg-circle‘ menjadi ‘rounded-circle’.
  • Table
    Terdapat beberapa perubahan variabel class untuk elemen <table>, yaitu :

    • Penambahan classtable-responsive‘ untuk responsive table.
    • Penambahan classtable-inverse‘.
    • Untuk konsistensi, classtable-condensed‘ di ubah menjadi ‘table-sm‘.
  • Forms
    Perubahan penggunaan class untuk elemen-elemen input di dalam form, yaitu :

    • Classcontrol-label‘ menjadi ‘col-form-label‘.
    • Classinput-lg‘ dan ‘input-sm‘ menjadi ‘form-control-lg‘ dan ‘form-control-sm‘.
    • Classform-group-*‘ menjadi ‘form-control-*‘.
    • Classhelp-block‘ menjadi ‘form-text‘.
    • Classradio-inline‘ menjadi ‘checkbox-inline‘.
    • Classcheckbox‘ dan ‘radio‘ menjadi ‘form-check‘ dan penambahan class variasi ‘form-check-*‘.
  • Buttons
    Perubahan penggunaan class untuk tombol atau button, yaitu :

    • Classbtn-default‘ menjadi ‘btn-secondary‘.
    • Classbtn-xs‘ menjadi ‘btn-sm‘.
  • Hidden Element
    Perubahan penggunaan class untuk menyembunyikan elemen HTML, yaitu :

    • Classhidden-xs‘ menjadi ‘d-none d-sm-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Extra Small‘.
    • Classhidden-sm‘ menjadi ‘d-sm-none d-md-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Small‘.
    • Classhidden-md‘ menjadi ‘d-md-none d-lg-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Medium‘.
    • Classhidden-lg‘ menjadi ‘d-lg-none d-xl-block‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Large‘.
    • Classd-xl-none‘, menyembunyikan eleman HTML untuk layar dengan ukuran ‘Extra Large‘.
    • Classd-none d-lg-block‘, akan menyembunyikan elemen HTML untuk layar dengan ukuran ‘Extra Small‘ sampai dengan ukuran ‘Medium‘.

Selesai, sebenarnya masih ada banyak lagi perubahan-perubahan dan penambahan elemen-elemen class di dalam Framework Boostrap 4 ini yang tidak tersebutkan di atas, karena oleh penulis sendiri masih dalam testing dan coba-coba.

Namun sejauh penulis menggunakan Boostrap terbaru ini secara garis besar lebih nyaman di gunakan karena terdapat class-class tertentu yang lebih bervariatif sehingga lebih memudahkan dan lebih membantu para Web Programmer dan Web Developer seperti penulis untuk membuat website responsif.

Untuk kedepannya tinggal kita menunggu Bootstrap 4 versi Final keluar sehingga para Web Programmer dan Web Developer dapat lebih leluasa lagi dalam menggunakan fitur-fitur di dalam Boostrap 4.

Oh iya, untuk kalian yang ingin mencoba menggunakan Bootstrap 4 silahkan download melalui link berikut :

Sedangkan untuk dokumentasi lengkapnya silahkan merujuk ke link berikut :

Sekian untuk artikel hari ini, sampai jumpa di artikel-artikel berikutnya. Salam…

Share social media :



Your response about this article :


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Perbedaan Localhost Dan Web Hosting
Perbedaan Localhost Dan Web Hosting
Category : Others | September 17th, 2018
89 | 0
Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
282 | 0
Pengertian Page View, Visitor Dan Bounce Rate
Pengertian Page View, Visitor Dan Bounce Rate
Category : Others | October 9th, 2017
640 | 0
​Apa Itu Web Framework?
​Apa Itu Web Framework?
Category : Others | September 29th, 2017
1049 | 2
Cara Memasang Robots.txt Di Website
Cara Memasang Robots.txt Di Website
Category : Others | February 25th, 2015
853 | 2
DIY – Lampu Indikator Super KIPS Kawasaki Ninja 150 SS/R/RR
DIY – Lampu Indikator Super KIPS Kawasaki Ninja 150 SS/R/RR
Category : Others | November 26th, 2014
6799 | 0
Email Terblokir Oleh Google?? Ini Solusinya
Email Terblokir Oleh Google?? Ini Solusinya
Category : Others | September 18th, 2014
525 | 0
Share : Cara Aktifkan DKIM & SPF Di WHM
Share : Cara Aktifkan DKIM & SPF Di WHM
Category : Others | August 11th, 2014
484 | 0
Reset Password Admin CMS MODX-Revolution
Reset Password Admin CMS MODX-Revolution
Category : Others | April 7th, 2014
345 | 0
Latest Posts

Tutorial : Cara Install Composer
Tutorial : Cara Install Composer
Category : Others | June 5th, 2018
282 | 0

Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby (bundler) yang menyediakan format standar untuk mengelola dependensi PHP dan library-library yang diperlukan. Sumber : Wikipedia Jadi secara garis besar, d...

Continue reading
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Error Reported Attack Page! Waw… Domain Di Blacklist Google??
Category : Tips & Tricks | November 13th, 2017
580 | 0

Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tampilan bahwa domain kalian di blacklist atau di blokir oleh Google, alhasil tentunya website kalian tidak akan bisa di akses. Ada yang pernah ngalamin?? Bebe...

Continue reading
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Cara Menambah Ads Unit Atau Blok Iklan Adsense
Category : Tutorials | November 13th, 2017
1102 | 4

Halo para pembaca Gaswad yang ganteng dan yang cantik-cantik, yang jelek jangan kesinggung ya. Hehe… 😀 Ssetelah sekian lama ngga update akhirnya dapet kesempatan nyolong-nyolong waktu buat nge-update artikel Gaswad. Pada pembahasan artikel k...

Continue reading
Yang Baru Di Bootstrap 4
Yang Baru Di Bootstrap 4
Category : Others | October 31st, 2017
629 | 0

Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membuat Web Responsif Dengan Boostrap yang masih menggunakan versi 3, ehh… udah nongol aja ini adeknya yang versi 4. Yaaa’, sebenarnya sih’ ud...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
Category : Wordpress | October 24th, 2017
722 | 2

Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi kalian yang sudah tertinggal atau melewatkan artikel-artikel sebelumnya, maka silahkan kalian merujuk ke link berikut : Intro & Registering Template ...

Continue reading
Panduan SEO ala Google
Panduan SEO ala Google
Category : Tips & Tricks | October 24th, 2017
536 | 0

Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kalian, beberapa panduan dan tips berikut secara kebetulan merupakan salah satu yang  di referensikan oleh Google agar website kalian dapat dengan mudah di cr...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 4
Tutorial : Cara Membuat Template WordPress – Part 4
Category : Wordpress | October 20th, 2017
785 | 0

Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita buat sebelumnya, sesi ini merupakan sambungan dari artikel-artikel berikut : Intro & Registering Template – Part 1 Frontpage, Header & Footer ...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 3
Tutorial : Cara Membuat Template WordPress – Part 3
Category : Wordpress | October 20th, 2017
618 | 0

Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambung artikel sebelumnya. Pada sesi sebelumnya kita sudah berhasil membuat halaman Frontpage, Header dan Footer website, pada artikel kali ini kita akan coba m...

Continue reading
Cara Mendapatkan Uang Dengan Google Adsense
Cara Mendapatkan Uang Dengan Google Adsense
Category : Tutorials | October 16th, 2017
1156 | 2

Setelah beberapa waktu lalu di kantor penulis sempat heboh-hebohnya di karenakan fitur dari Google yang bernama Adsense ini, bagaimana tidak karena rekan-rekan penulis yang tadinya cuma browsing-browsing doang, youtube-an, download film, tidur, kesur...

Continue reading
Tutorial : Cara Membuat Template WordPress – Part 2
Tutorial : Cara Membuat Template WordPress – Part 2
Category : Wordpress | October 13th, 2017
696 | 0

Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membahas bagaimana cara mendaftarkan template kita agar terbaca oleh aplikasi WordPress tepatnya di halaman Themes. Jadi bagi kalian yang belum membaca artikel t...

Continue reading
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Cara Mendaftarkan Dan Melakukan Verifikasi Domain Di Google Search Console
Category : Tutorials | October 12th, 2017
1340 | 2

Pada pertemuan kali ini (udah kayak anak kuliahan ajah), penulis ingin berbagi pengetahuan tentang bagaimana cara medaftarkan dan melakukan verifikasi domain kalian di Google Search Console. Bagi kalian yang masih bingung dan tidak tahu bagaimana car...

Continue reading
11 Cara Meningkatkan Keamanan Pada WordPress
11 Cara Meningkatkan Keamanan Pada WordPress
Category : Wordpress | October 10th, 2017
749 | 0

Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website WordPress, yang kebetulan penulis dapat dari hasil searching-searching di Om’ Google. Seperti yang kalian ketahui saat ini WordPress merupakan salah satu...

Continue reading

Wordpress

  • Oct
    24
    2017
    Tutorial : Cara Membuat Template WordPress – Part 5 (Complete)
    Artikel ini merupakan artikel terakhir tentang bagaimana cara membuat template WordPress, bagi ...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 4
    Pada sesi ini kita akan membuat Menu Navigasi dan Sidebar pada halaman template yang sudah kita...
    Read more
  • Oct
    20
    2017
    Tutorial : Cara Membuat Template WordPress – Part 3
    Pada artikel kali ini kita akan melanjutkan bagaimana cara membuat template WordPress menyambun...
    Read more
  • Oct
    13
    2017
    Tutorial : Cara Membuat Template WordPress – Part 2
    Artikel ini merupakan sambungan dari artikel pertama, pada artikel sebelumnya kita sudah membah...
    Read more
  • Oct
    10
    2017
    11 Cara Meningkatkan Keamanan Pada WordPress
    Pada artikel kali ini penulis ingin membagikan beberapa tips seputar keamanan pada website Word...
    Read more
  • More articles
Tips & Tricks

  • Oct
    18
    2018
    Syntax error or access violation: 1071 Specified key was too long
    Bagi kalian pengguna Framework Laravel, terutama Laravel mulai dari versi 5.4 keatas pasti pern...
    Read more
  • Aug
    14
    2018
    Iklan Adsense Di Website Kamu Ter-klik Sendiri? Nih! Tips-nya
    Hallo guys, akhirnya kita berjumpa lagi setelah sekian lama kita berpisah… Hallah… ...
    Read more
  • Nov
    13
    2017
    Error Reported Attack Page! Waw… Domain Di Blacklist Google??
    Seperti yang kalian lihat pada contoh tampilan gambar di atas, tampilan tersebut merupakan tamp...
    Read more
  • Oct
    24
    2017
    Panduan SEO ala Google
    Kali ini penulis ingin memberikan beberapa tips dan panduan untuk meningkatkan SEO website kali...
    Read more
  • Sep
    15
    2017
    Cara Mudah Download Video Youtube
    Bagi kita-kita yang suka menonton video dari Youtube pasti sering tiba-tiba terbesit seperti in...
    Read more
  • More articles
Tutorials

  • Oct
    18
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 4 (Model & Konfigurasi Database)
    Halo para pembaca Gaswad, menyambung artikel tutorial Belajar Menggunakan Laravel sebelumnya, k...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 3 (View & Blade Template)
    Di artikel sebelumnya, kita sudah berhasil menampilkan output langsung dari halaman Controller ...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 2 (Routing & Controller)
    Pada artikel kali ini, kita akan belajar menggunakan Routing dan Controller dimana Routing dan ...
    Read more
  • Oct
    09
    2018
    Tutorial : Belajar Menggunakan Laravel – Part 1 (Instalasi Laravel)
    Halo para pembaca Gaswad yang setia menunggu artikel baru dari penulis (pede), setelah sekian ...
    Read more
  • Sep
    04
    2018
    Membuat Efek Gradasi Warna Menggunakan CSS
    Pada tutorial kali ini kita akan mencoba membuat gradasi warna, apa itu gradasi warna bisa kali...
    Read more
  • More articles
Others

  • Sep
    17
    2018
    Perbedaan Localhost Dan Web Hosting
    Halo ghaes… Bagi beberapa dari kalian pasti masih belum ada yang begitu paham bagaimana s...
    Read more
  • Jun
    05
    2018
    Tutorial : Cara Install Composer
    Apa Itu Composer? Composer adalah suatu aplikasi manajemen paket selain Node.js (npm) dan Ruby ...
    Read more
  • Oct
    31
    2017
    Yang Baru Di Bootstrap 4
    Tidak terasa baru saja beberapa waktu lalu penulis menulis artikel tentang Bagaimana Cara Membu...
    Read more
  • Oct
    09
    2017
    Pengertian Page View, Visitor Dan Bounce Rate
    Sebenarnya pada artikel kali ini penulis ingin membuat tutorial bagaimana cara membuat template...
    Read more
  • Sep
    29
    2017
    ​Apa Itu Web Framework?
    Beberapa dari kalian apalagi yang masih pemula dalam bidang pemrograman website pasti masih awa...
    Read more
  • More articles
Page generated in : 867.1 ms