Cara membuat Website Responsive (Boostrap)

Cara membuat Website Responsive menggunakan Bootstrap adalah salah satu metode yang cukup banyak digunakan oleh para web developer dalam website


Bootstrap adalah framework css, dimana bootstrap didesain untuk kemudahan membangun tampilan dari PC ataupun mobile

Web Responsive adalah website design visual yang mengakomodir perubahan ukuran device yang digunakan saat menampilkan website tersebut

Tampilan akan berubah secara otomatis mengikuti ukuran device yang menampilkan nya

Website Responsive bisa dibilang adalah website yang cukup fleksibel dari segi tampilan yang dapat digunakan pada multiplatform

Dan salah satu cara untuk membangun nya adalah menggunakan bootstrap

Cara Membuat Website Responsive menggunakan Bootsrap


Tahap pertama untuk penggunaan bootstrap tentu saja adalah mendownload boostrap itu sendiri

Sobat wawasanku dapat mendownload bootstrap langsung klik disini

Kemudian kita dapat include kan file boostrap tersebut menggunakan IDE yang kita gunakan. Disini penulis menggunakan IDE Visual Studio

Pada artikel kali ini, penulis tidak akan menjelas kan secara mendetail cara memasukan / import bootstrap tersebut kedalam project

Penulis akan memberikan tips atau trik yang paling mendasar untuk menggunakan bootstrap untuk menciptakan website yang responsive

Tips utama yang harus sobat wawasanku pahami dalam penggunaan Bootstrap adalah penggunaan class "col-md-xx"

Secara teori ukuran lebar full website dari sisi kiri ke sisi kanan adalah 12 Kolom

Sehingga kita harus menganalogikan bahwa sebetul nya tampilan website dibagi menjadi 12bagian secara horizontal
cara membuat website reponsive


Setelah memahami hal ini , Class "col-md-xx" ini akan memanfaatkan hal tersebut untuk membentuk halaman website dengan menggunakan konsep tersebut

Cara penggunaan "Col-md-xx" ini adalah konsep yang telah dijelaskan diatas, contoh col-md-2, maka kita akan menggunakan 2 dari 12 bagian kolom pada 1layar

Sehingga apabila kita membuat sebuah Div dan menyisipkan class col-md-2, maka Div tersebut akan mengambil 2 dari 12 kolom yang ada

Bila sobat wawasanku sudah memahami betul penggunaan class tersebut, maka kita dapat membuat sebuah halaman responsive dengan memanfaatkan hal ini

Konsep Pembuatan Website Responsive Menggunakan Bootstrap


Setelah memahami materi diatas, kali ini kita akan memahami konsep bagaimana cara kerja bootstrap sehingga dapat membuat sebuah halaman website menjadi responsive

Bootstrap hanya membagi ukuran halaman menjadi 12 kolom tanpa memberikan set Pixel yang absolut, sehingga satuan kolom memiliki Pixel yang berbeda menyesuaikan ukuran Device yang digunakan

Baca Juga : Metode Pengembangan Aplikasi Web

1 Response to "Cara membuat Website Responsive (Boostrap)"

  1. Great post. I used to be checking constantly this weblog and I am inspired! Extremely useful information specially the ultimate part :) I maintain such info much. I used to be seeking this particular information for a very lengthy time.
    Thank yyou and good luck.
    website design pakistan
    responsive web design
    website design services Pakistan
    responsive web design services in Karachi
    UI UX website design Pakistan
    wireframe design in Karachi
    Best website Design services in Pakistan
    Pakistan Best web design service

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel