Salam sukses kawan2 programer, kali ini saya posting mengenai Cara Membuat Tampilan dengan BOOTSTRAP di PHP yang pastinya ini tutorial untuk super pemula karena pada saat kita hendak membuat web dinamis tentu yang dipikirkan pertama itu pasti tampilan ya gak? hehe.. saya pernah dalam projek saya membuat tampilannya saja hampir 1 minggu karena bingung mau tampilan bagaimana, tapi sejak saya tau bootstrap saya lebih tertarik dengan tampilan bootstrap tentu tampilan Backend ya atau tampilan Administrator.
Dengan bootstrap kita dengan mudah membuat tampilan karena banyak elemen yang diberikan oleh bootstrap yang mempermudah kita dalam membuat tampilan, seperti nav bar, form, lebih lengkapnya lihat disini
http://getbootstrap.com/examples/theme/
Ok lanjut saja: langkah pertama kita harus mendownload keperluan yang diharuskan oleh bootstrap yaitu:
Link Demo paling bawah ya:)
- bootstrap.min.css download di sini
- jquery.min.js yang bisa di download di sini
Berikut tampilan sederhana / contoh tampilan yang diberikan oleh bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Dengan tampilan diatas kita tambahkan apa yang perlu seperti Navigasi
Penambahan Navigasi
Navigasi yang sudah disiapkan bootstrap kita ambil dan masukkan dan jadilah seperti kode dibawah ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-default navbar-fixed-top"> <!-- menggunakan navbar-fixed-top agar navigasi nempel di atas dan tidak sembunyi pada saat scroll kebawah -->
<div class="container-fluid"> <!-- container-fluid berfungsi membuat navigasi full layar/tampilan -->
<!-- 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="#">Brand</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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" 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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" 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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</head>
<body>
<div class="container"><!-- membuat kontainer agar tampilan body lebih teratur -->
<h1>Hello, world!</h1>
</div> <!-- penutup kontainer -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Untuk Mengganti Warna Navigasi bisa di coba ganti navbar-default dengan navbar-inverse
<nav class="navbar navbar-default navbar-fixed-top"> ganti dengan kode <nav class="navbar navbar-inverse navbar-fixed-top">
Jika menginginkan warna lain bisa mengedit file bootstrap.min.css tentu yang paham dengan css :)
Menambahkan Navigasi Vertikal
Tambahkan code ini di bawah <body>
<div class="col-md-2"><!-- memberi 2 kolom untuk menu ini, coba ganti dengan angka lain dan lihat hasilnya -->
<ul class="nav nav-pills nav-stacked"> <!-- ini adalah navigasi di sidebar .nav-stacked fungsinya untuk navigasi vertikal -->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
Selengkapnya Codenya akan jadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-default navbar-fixed-top"> <!-- menggunakan navbar-fixed-top agar navigasi nempel di atas dan tidak sembunyi pada saat scroll kebawah -->
<div class="container-fluid"> <!-- container-fluid berfungsi membuat navigasi full layar/tampilan -->
<!-- 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="#">Brand</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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" 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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" 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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</head>
<body>
<div class="col-md-2"><!-- memberi 2 kolom untuk menu ini, coba ganti dengan angka lain dan lihat hasilnya -->
<ul class="nav nav-pills nav-stacked"> <!-- ini adalah navigasi di sidebar .nav-stacked fungsinya untuk navigasi vertikal -->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
<div class="container"><!-- membuat kontainer agar tampilan body lebih teratur -->
<h1>Hello, world!</h1>
</div> <!-- penutup kontainer -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Mudah bukan :).. sampai disini dulu tutorial Cara Membuat Tampilan dengan BOOTSTRAP di PHP :)..
Selamat mencoba.
File lengkap tutorial ini bisa di download di sini
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Membuat Tampilan dengan BOOTSTRAP di PHP"
Post a Comment