Assalamualaikum Wr.Wb
Mari kita lanjutkan tentang Bootstrap setelah banyaknya postingan saya sebelumnya mengenai bootstrap pada postingan saya sebelumnya saya sisipkan postingan Tutorial Instal Wordpress di linux sekarang mari kita lanjutkan mengenai bootsrap dan kali ini saya akan membuat layout sederhana.
Dan inilah hasil layout yang telah kita buat tadi
Mari kita lanjutkan tentang Bootstrap setelah banyaknya postingan saya sebelumnya mengenai bootstrap pada postingan saya sebelumnya saya sisipkan postingan Tutorial Instal Wordpress di linux sekarang mari kita lanjutkan mengenai bootsrap dan kali ini saya akan membuat layout sederhana.
- Kita buat tambahan style untuk memperindah tampilan letakkan style di antara script <head> dan </head>
<style>
.navbar{
margin-bottom: 0;
border-radius: 0;
}
.row.content{height: 450px}
.sidenav{
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
footer{
background-color: #555;
color: white;
padding: 15px;
}
@media screen and (max-width: 767px){
.sidenav{
height: auto;
padding: 15px;
}
.row.content{height: auto;}
}
</style>
- Jangan lupa tuliskan scrip untuk memanggil Bootstrap sama dengan di atas di antara <head> dan </head> namun jangan di dalam style
meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- Lalu kita buat layoutnya masukkan script di bawah di antara <body> dan </body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Blog Amatir</a>
</div><!--navbar header-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in">Log in</a>
</ul>
</div><!--collapse navbar-->
</div><!--container-fluid-->
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><li>Link1</li></p>
<p><li>Link2</li></p>
<p><li>Link2</li></p>
</div><!--col sm 2 sidenav-->
<div class="col-sm-8 text-left">
<h1>Blog Amatir</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>Gambar</p>
</div>
<div class="well">
<p>Gambar</p>
</div>
<div class="well">
<p>Gambar</p>
</div>
<div class="well">
<p>Gambar</p>
</div>
</div>
</div><!--row content-->
</div><!--container fluid text center-->
<footer class="container-fluid text-center">
Ini Footet
</footer>
Dan inilah hasil layout yang telah kita buat tadi
Dan ini tampilan layout saat dalam mode responsive
yap itu tadi bagaimana cara membuat layout sederhana dengan bootstrap semoga bermanfaat terima kasih sudah berkunjung,sampai jumpa di postingan berikutnya
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar