Cara Membuat Web Responsive dengan Bootstrap

Cara Membuat Web Responsive dengan Bootstrap - Seperti yang sudah kita ketahui, terdapat banyak platform untuk membuat sebuah website yang tersedia, salah satunya seperti yang akan saya bahas pada kali ini yaitu melalui Bootsrap.

Berikut ini adalah langkah-langkah membuat webiste yang responsive dengan bootstrap.

Membuat Website Dengan Bootstrap

Cara Membuat Bootstrap Sendiri

Pertama, silakan unduh Bootstrapnya lebih dulu di getbootstrap.com.

Click tombol Unduh Bootstrap untuk memulai download
Sesudah sukses di ambil silakan extract file nya maka ada folder Bootstrap + versinya (misalkan Bootstrap-3.3.1).
Membuka folder Bootstrap itu di dalamnya ada folder CSS, JS dan Fonts, copy semua folder lalu lekatkan di mana kalian ingin mengawali proyek pembikinan situs Bootstrap ini.

Misalkan saya membuat proyek situs ini di folder "Panduan Situs Bootstrap" karena itu copy 3 folder barusan dan paste di dalam folder "Panduan Situs Bootstrap" ini, usai ! Seterusnya kita awali membuat situsnya.

Silakan membuka kode editor yang ingin dipakai, misalkan Sublime Teks atau Adobe Dreamweaver. Silakan buat file baru dengan perpanjangan file.html untuk halaman teras / home misalkan home.html ataupun lebih terkenal indeks.html. Taruh file indeks.html ini dalam folder proyek "Panduan Situs Bootstrap" barusan (sejajar dengan folder-folder Bootstrap yang di paste).

Nach, di dalam file indeks.html ini mulai membuat susunan website HTML seperti umumnya. Saya kira kalian telah pahami skema HTML karena itu ingin membuat situs memakai frame-work Bootstrap, kalau belum tahu susunan dasar HTML dapat saksikan di sini atau saksikan panduan membuat situs HTML CSS simpel dari part 1 sampai part 11.

Bila ingin memakai frame-work Bootstrap, kita perlu panggil source Bootstrap tadi telah di paste. Silakan panggil file bootstrap.min.css (di folder CSS Bootstrap) di dalam sisi memakai tag seperti umumnya saat kalian panggil source file. Kalau belum tahu langkah panggil file di dalam HTML, silakan saksikan di sini triknya.

Saat sebelum lanjut lebih jauh, silakan copy kode berikut dan lekatkan di dalam tag <head>:

Untuk membikin indeks.html ini betul-betul responsive, kode itu harus ditempatkan pas sesudah karena harus diundang lebih cepat dibandingkan code-code source lain.

Seterusnya, agar indeks.html ini berteman baik dengan browser Internet Explorer silakan tambah code berikut (berbentuk comment HTML) saat sebelum tag penutup <head>:

Dapat jadi perhatian source nya berbentuk link maknanya membutuhkan akses internet, bila ingin dipakai di directory lokal / off-line untuk Internet Explorer silakan datangi link yang berada di src="link" selanjutnya copy semua didalamnya dan taruh sebagai file.js. Kemudian tinggal ditukar dech src="" nya bernama file dan directory di mana kalian menyimpan. Kalau kurang memahami, acuhkan saja ini bukanlah poin penting untuk diulas sekarang ini.

Sampai sini, sisi file indeks.html akan kelihatan semacam ini:

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Web Responsive Bootstrap - sodikin</title> <link href="css/bootstrap.min.css" rel="stylesheet">

</head>

Selanjutnya silakan masukan kode/ script jQuery dari perpustakaan

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

API Google lekatkan di saat sebelum tag penutup </body>.

Selanjutnya silakan panggil file bootstrap.min.js yang ada di dalam folder JS Bootstrap barusan pada bagian bawah saat sebelum tag penutup bodi> juga. Karena itu saat ini file indeks.html akan kelihatan semacam ini:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Web Responsive Bootstrap - sodikin</title>
<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>

</body>
</html>

Lihat pada jquery Google API, ini berbentuk link yang pasti membutuhkan akses internet. Bila ingin memakainya off-line silakan datangi link itu lalu copy semua codenya dan lekatkan di file baru selanjutnya save dan berikan nama seperti keinginan dengan perpanjangan file.js. Kemudian tukar link di dalam src="" nya bernama file.js yang baru dibikin dan directorynya.

Saat ini, indeks.html ini siap dibuat memakai frame-work Bootstrap. Tinggal pikir bagaimana kalian ingin membuat template untuk indeks.html ini.

Cara Membuat website Responsive

Untuk membuat sebuah website menjadi responsive, tentunya membutuhkan menu navigasi yang responsive juga.

Menu navigasi cukup berperan dalam hal ini, karena itu dibawah ini kami telah menyiapkan kode menu navigasi yang responsive untuk website anda.

Menu Navigasi Bootstrap

Tentu sisi menu atau navigasi lebih dulu karena tiap website memang membutuhkan menu, langsung saja copy kode berikut dan lekatkan sesudah tag </body>.

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">sodikin</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">Blog</a></li> <li><a href="">Portfolio</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu"> <li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li> <li><a href="#">Tutorial</a></li> <li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Cari..."> </div> <button type="submit" class="btn btn-default">Cari</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Login</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Penulis Blog</a></li> <li><a href="#">Pekerjaan</a></li> <li role="separator" class="divider"></li> <li><a href="#">Menu Lain</a></li> </ul> </li> </ul> </div> </div> </nav>

Ini sebagai navbar standard bawaan Bootstrap, kalau kalian pas langsung pakai kalau tidak pas silakan di utak-atik sesuai dengan selera. Kalau tidak percaya langkah otak-atiknya diamkan saja semacam ini, cukup tukar beberapa nama menunya sama sesuai keperluan.

Kalau ada yang menanyakan "Apakah beda membuat nav sendiri dan membuat navbar memakai frame-work Bootstrap ?" Silakan save file indeks.html ini selanjutnya saksikan hasilnya, menu telah tampil seperti umumnya. Coba perkecil monitor browser sekecil kemungkinan atau sampai seukur monitor handphone, navigasi automatis menjadi kecil sekalian beralih menjadi toggle menu yang minimalis dan masih tetap responsif.

Sebagai deskripsi saja, contoh halaman home / indeks.html yang hendak kita bikin misalkan semacam ini:

Disaksikan dari perumpamaan ini, ada header yang lebar penuh pas di bawah menu maknanya saat ini kita akan membuat sisi itu karena menu telah diaplikasikan. Silakan lekatkan kode berikut sesudah tag penutup </nav>:

Di dalam sisi ini (sesudah class="row") akan ditempatkan element-element yang dibutuhkan, bila disaksikan pada contoh di atas ada teks + tombol disamping kiri dan video disamping kanan. Maka dengan itu web anda sudah menjadi web responsive.

Membuat Template Web Responsive dengan HTML dan CSS

Baik langsung kita awali untuk membikin template website simpel dengan HTML dan CSS ini. mudah-mudahan karunia dan berguna.

Di saat rekan-rekan mengawali pelajari panduan ini kali, benar-benar di anjurkan supaya rekan-rekan pelajari dahulu tutorial-tutorial HTML dan CSS dasar yang gampang di dalami.

Apa yang perlu dilakukan untuk membikin template web simpel yang responsif dengan HTML dan CSS ?

Buat sebuah file HTML. di sini saya membuat file HTML bernama indeks.html
Buat sebuah file CSS. untuk simpan syntax CSS. di sini saya membuat suatu file CSS bernama model.css

Berikut syntax HTML dan CSS nya. silakan rekan-rekan copy-paste. dan akan saya terangkan sesudah anda copy paste syntax html di bawah ini.

xml.

style.css

Oke jika sudah taruh ke-2 file itu. selanjutnya lakukan pada browser. Membuat Template Situs Responsive Dengan HTML dan CSS.

dan hasilnya ialah seperti berikut. template situs responsive simpel kita sudah selesai.

Membuat Template Situs Responsive Dengan HTML dan CSS

bila di akses dari ukuran monitor handphone, karena itu lay-out akan otomatis menyesuaikan sendiri alias responsive.

Cara Membuat Web Responsive dengan Codeigniter

Cara membuat web responsive dengan codeigniter umumnya tidak jauh berbeda dengan bootstrap, hanya saja pada codeigniter agak sedikit lebih sulit.

Sebelum membuat web, sebaiknya anda pahami dulu 3 point penting dalam membuat website yang responsive. Berikut 3 langkah dasar untuk membuat website yang responsive :

1. Artikan Meta Tag Untuk Design Responsive

Mobile browser umumnya akan atur rasio halaman html sama sesuai lebar viewport, hingga web tampil di monitor mobile.

Kamu dapat memakai tag meta viewport untuk mereset ulangi ini. Tag viewport sendiri dipakai untuk memberitahukan browser supaya menonaktifkan rasio awalnya.

2. Tetapkan Susunan HTML

Cara ke-2 yang dapat kamu kerjakan yakni tentukan susunan HTML Web, yang umumnya terbagi dalam header, konten, sidebar dan footer.

Untuk header umumnya dibikin sama ukuran lebar yang full dan tinggi disamakan dengan keperluan. Dan konten dapat ditetapkan misalkan lebar 660px dan sidebar 300px, hingga lebar keseluruhnya ialah 960px.

3. Membuat Media Query di CSS Untuk Memerintah Browser

CSS Kode di bawah ini akan memerintah browser, saat lebar monitor memiliki ukuran 960px atau mungkin kurang dari itu, karena itu lakukan script, mengatur lebar sama sesuai script.

Di sini lebar wrapper ditata jadi 96% saja dari lebar monitornya. Dan content ditata supaya lebarnya 66% saja dari lebar monitor, dan sidebar lebarnya jadi 30%.

Lebih jelasnya silahkan anda tonton video berikut ini :