BOOTSTRAP-ISME: Membuat Responsive Website Dengan Bootstrap

Apa itu Bootstrap?

Boots-Trap??

Bootstrap Bill

atau kalau yang suka nonton Pirates Carribian pasti tw

Tapi yang jelas yang mw gw sharing disini bukan kedua-duanya, melainkan salah satu CSS Framework yang gratis (Open Source) yang bisa kita gunakan untuk mendesain sebuah website terutama untuk membangun website yang responsive.

Oke, kalau begitu. Tablet or Laptopnya boleh apa aja yg penting kita mulai saja dengan dasar html/PHP-nya dulu. Buat file index.php yang isinya seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>DesignLoud, LLC Bootstrap Tutorial</title>
</head>
<body>
</body>
</html>

Lalu cantumkan file css yang akan kita pakai, tempatkan sebelum tag </head> :

<link href="../twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../twitter-bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">

Untuk membuat website kita responsive di segala medan (;p) ini KUNCINYA :

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Kita juga memerlukan link JQuery & Javascript, tapi sisipkannya di bagian akhir saja agar tidak load tidak lambat, letakkan di sebelum tag </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="../twitter-bootstrap/docs/assets/js/bootstrap.min.js"></script>

Nah, untuk sementara index.php isinya menjadi seperti berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Membuat Responsive Web Design Dengan Bootsrap</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- Stylesheets -->
<link href="../twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../twitter-bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">


</head>
<body>

Content ada disini

<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="../twitter-bootstrap/docs/assets/js/bootstrap.min.js"></script>
</body>
</html>

<div class="navbar navbar-inverse navbar-static-top">
 <div class="navbar-inner">
  <div class="container">
  </div>
 </div>
</div>

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
</a>
<a class="brand" href="#">BOOTSTRAP-ISME</a>

BOOTSTRAP-ISME

Senin, 08 Juli 2013

Membuat Responsive Website Dengan Bootstrap

Tidak ada komentar:

Posting Komentar