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
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
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
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
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
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
Post a Comment for "Cara membuat Website Responsive (Boostrap)"