Jika agan sudah mengenal html atau telah membuat template maka setelah nya agan juga harus menerapkan sekilas desain framework untuk mendesain website ialah Bootstrap.
Mengnenal Boostrap adalah paket aplikasi siap dipakai untuk membuat template website melalui kode HTML, CSS dan JavaScript yang ada di Bootstrap, Kita cukup merakit element tampilan web secara mudah dan cepat dengan hasil Rapi, Konsiten dan mobile friendly.
Proyek web pun bisa lebih cepat selesei karena kita cukup fokus pada sisi pembuatan konten nya.
Bootstrap adalah menjadi solusi praktis dan instan, dikarenakan telah menyediakan desain beragam komponen tampilan web kita, Kita bisa membuat simbol, ikon, label, tumbnail, breadcrumb, panging dan lainya secara konsisten rapi dan pastinya seragam.
Untuk agan yang mau mencobanya atau sedikit mendapatkan gambaran mengenai bagaimana sebuah halaman web kita diciptakan dengan framework Bootstrap, Coba agan terapkan kode HTML berikut salin di notepad agan.
Setelah agan menyalin HTML nya lalu simpan dalam bootstrap.html, nah setelah itu tampilkan di layar web ponsel dan deskop dan akan menjadi seperti ini :
Dan begini sekiranya tampilan Mobile :
Bagaimana ? seru bukan ? nah jika sekiranya agan ingin mempelajari lagi cara menggunakan Bosstrap, tunggu update an saya selanjutnya, pastinya saya akan memandu menyiapkan front-end atau desain web kita menggunakan framework Bootstrap.
Baca Juga :
Mengnenal Boostrap adalah paket aplikasi siap dipakai untuk membuat template website melalui kode HTML, CSS dan JavaScript yang ada di Bootstrap, Kita cukup merakit element tampilan web secara mudah dan cepat dengan hasil Rapi, Konsiten dan mobile friendly.
Proyek web pun bisa lebih cepat selesei karena kita cukup fokus pada sisi pembuatan konten nya.
Bootstrap adalah menjadi solusi praktis dan instan, dikarenakan telah menyediakan desain beragam komponen tampilan web kita, Kita bisa membuat simbol, ikon, label, tumbnail, breadcrumb, panging dan lainya secara konsisten rapi dan pastinya seragam.
Untuk agan yang mau mencobanya atau sedikit mendapatkan gambaran mengenai bagaimana sebuah halaman web kita diciptakan dengan framework Bootstrap, Coba agan terapkan kode HTML berikut salin di notepad agan.
<!DOCTYPE html>
<html lang="id"
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widht=device-width,initial-scale=1">
<title>Halaman Bootstrap Saya</title>
<!-- rujukan CSS Bootstrap -->
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-togglecollapsed" data-toggle="collapse" data-target="#navbar">
<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="#">NamaWeb</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" ariahaspopup="true" aria-expanded="false">Kategori
<span class="caret"></span</a>
<ul class="dropdown-menu">
<li class="dropdown-header">Komputer</li>
<li><a href="notebook.html">Notebook</a></li>
<li><a href="pc.html">PC Desktop</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Gadget</li>
<li><a href="hp.html">Ponsel</a></li>
<li><a href="tablet.html">Tablet</a></li>
</ul>
</li>
<li><a href="#">masuk</a></li>
</ul>
<form class="navbar-form navbar-right"role="search">
<div class="form-group">
<input type="text" class="form-control"placeholder="pencarian">
</div>
<button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div>
</nav>
<div clas="jumbotron">
<div class="container">
<h1>Web Bootstrap<?h1>
<p>website ini menggunakan framework bootstrap!</p>
<p>
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Default</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Succsess</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
</p>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li><a href="#"><span class="glyphicon glyphicon-home"aria-label="home"></span> Beranda</a></li>
</ol>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Judul Kolom 1</h2>
<p>Contoh sebaris paragraf untuk kolom1.</p>
</div>
<div class="col-sm-4">
<h2>Judul Kolom 2</h2>
<p>Contoh sebaris paragraf untuk kolom2.</p>
</div>
<div class="col-sm-4">
<h2>Judul Kolom 3</h2>
<p>Contoh sebaris paragraf untuk kolom3.</p>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>© 2017 wavker.xyz</p>
</div>
</footer>
<!-- rujukan wajib file jQuery dan Bootstrap -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Setelah agan menyalin HTML nya lalu simpan dalam bootstrap.html, nah setelah itu tampilkan di layar web ponsel dan deskop dan akan menjadi seperti ini :
Baca Juga :
0 komentar