Instalasi Bootstrap
- Download Bootstrap versi terbaru di https://github.com/twbs/bootstrap/releases/download/v3.0.3/bootstrap-3.0.3-dist.zip
- Ekstrak/unzip file hasil download
- Copy folder dist ke aplikasi sebelumnya c:\xampp\htdocs\myweb ( lihat http://asepmuhidin.blogspot.com/2013/12/css-layout-web-mtkuliah-web-sttpelita.html )
- Klik https://code.jquery.com/jquery-1.10.2.min.js , save as ke dist/js
- Tambahkan code ini diantara tag head
<link type="text/css" rel="stylesheet" href="dist/css/bootstrap.css" /> <script src="dist/js/jquery-1.10.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script>
Selanjutnya kita coba buat halaman home.html
<html>
<head>
<title>Layout Website dan Bootstrap</title>
<link type="text/css" rel="stylesheet" href="dist/css/bootstrap.css" />
<script src="dist/js/jquery-1.10.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">STT Pelita Bangsa </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Profile</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Program Studi <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">STIE</a></li>
<li><a href="#">STIA</a></li>
<li><a href="#">STT</a></li>
<li class="divider"></li>
<li class="dropdown-header">Khusus Anak STT </li>
<li><a href="#">Teknik Informatika</a></li>
<li><a href="#">Sistem Informasi</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
<h1>Slider</h1>
</div
<div class="col-md-4">
<h1>Right Side</h1>
</div
</div>
</div>
</html>
- Silahkan baca dokumentasi bootstrap http://getbootstrap.com/css/
- Cobalah untuk bereksperimen/berlatih menggunakan css class maupun components yang ada dibootstrap.
---- SELAMAT MENCOBA ----
Comments
Post a Comment