Bootstrap telah menyediakan banyak sekali class-class CSS dan Plugin Javascript siap pakai yang dapat membantu mempermudah Kita dalam membuat halaman website. Karena kemudahan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.
Pada kesempatan ini kita akan membahas bagaimana membuat form yang responsive untuk semua perangkat. Terlebih dahulu siapkan beberapa hal di bawah ini :
1. Bootstrap, unduh di Bootstrap
2. XAMPP
3. Notepad ++
Apa Itu Bootsrap..?
Twitter Bootstrap adalah
sebuah alat bantu untuk membuat sebuah tampilan halaman website yang
dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain
halaman website. Sesuai namanya, website yang dibuat dengan alat bantu
ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman
Twitter atau desainer juga dapat mengubah tampilan halaman website
sesuai dengan kebutuhan.
Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang
dapat membuat layout halaman website, tabel, tombol, form, navigasi,
dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript. sumber : Wikipedia
Untuk membuat sebuah layout boostrap sudah menyediakan Grid system atau
colum dimana layout yang kita rancang akan otomatis menyesuaikan
tampilannya di berbagai macam resolusi atau device jadi tampilan akan
terlihat rapih. Untuk menggunakanyapun tidak terlalu susah anda cukup
memanggil class grid yang terdiri dari 12 grid atau kolom yang dapat
kita bagi-bagi. Untuk itu kita langsung praktekkan
Konsep dasar dari grid system adalah sebagai berikut:
- col-xs-value = Extra small devices Phones (<768px)
- col-sm-value = Small devices Tablets (≥768px)
- col-md-value = Medium devicesDesktops (≥992px)
- col-lg-value = Large devices Desktops (≥1200px)
Untuk Memulainya silahkan anda download Framework Bootstrap dulu di sini Download
1. Setelah itu silahkan buat folder Form dan Copy Paste 4 folder dist, font, js, dan less.
2. Kemudian silahkan buat document baru dengan format HTML/PHP, Lalu panggil file CSS dan JSnya dan jangan lupa disimpan
3. Sekarang saatnya membuat bagian Header dan Menu navigasi
4. Kemudian kita membuat 2 kolom yaitu content artikel dan sidebar dengan mengunakan value 8 untuk artikel dan 4 sidebar.
8. Keseluruhan code seperti dibawah ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!-- Membuat Header-->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="body_1">
<h1>JUDUL WEB SITE KITA</h1>
<H5>DESKRIPSI DARI WEB SITE KITA</H5>
</div>
</div>
</div>
<!-- Membuat Menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Judul</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li role="persentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Akhir Membuat Menu -->
</div>
</header>
<!-- Akhir Membuat Header -->
<!-- Membuat Bagian Artikelnya -->
<article>
<div class="container">
<div class="row">
<!-- start: sidebar -->
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="col-md-12 body_3">
<div class="body_3">
<div class="container-fluid ">
<h3>Menu Samping</h3>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Menu Samping 1</a></li>
<li><a href="#">Menu Samping 2</a></li>
<li><a href="#">Menu Samping 3</a></li>
<li><a href="#">Menu Samping 4</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 body_3">
<div class="body_3">
<div class="container-fluid ">
<h3>Pos Terakhir</h3>
<ul class="nav nav-pills nav-stacked">
<li><a href="#">POS 1</a></li>
<li><a href="#">POS 2</a></li>
<li><a href="#">POS 3</a></li>
<li><a href="#">POS 4</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="body_1" style="background:#eeeeee; height:600px; margin:0 0 20px">
<div class="bs-example">
<h1>Register</h1>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3" for="namadepan">Nama Depan</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="namadepan" placeholder="Nama Depan">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="namatengah">Nama Tengah</label>
<div class="col-xs-9">
<input type="password" class="form-control" id="namatengah" placeholder="Nama Tengah">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="namabelakang">Nama Belakang</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="namabelakang" placeholder="Nama Belakang">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="telp">No. Telp:</label>
<div class="col-xs-9">
<input type="tel" class="form-control" id="telp" placeholder="Nomor Telepon / Handphone">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Tanggal Lahir</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="tanggal" placeholder="Tanggal Lahir">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="bulan" placeholder="Bulan Lahir">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" id="tahun" placeholder="Tahun Lahir">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="Alamat">Alamat:</label>
<div class="col-xs-9">
<textarea rows="3" class="form-control" id="Alamat" placeholder="Masukan Alamat Lengkap"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="KodePos">Kode Pos:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="KodePos" placeholder="Kode Pos">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Jenis Kelamin:</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="gender" value="Laki-laki"> Laki-laki
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="gender" value="Perempuan"> Perempuan
</label>
</div>
</div>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<input type="submit" class="btn btn-primary" value="Kirim">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</article>
<!-- Akhir dari Membuat Bagian Artikel -->
<!-- Membuat Footer -->
<section>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Dibuat ditahun 2016</p>
</div>
</div>
</div>
</div>
</section>
|
Pembuatan layout simple template ini sudah hampit slesai sekarang tambah css ini diatas kode </head>
Januari 09, 2020
Tags :
CI
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments