Bootstrap

Client Side Scripting - Bootstrap

Apa Itu Bootstrap ?

Bootstrap adalah sebuah pustaka open source yang merupakan framework CSS dan Javascript untuk membuat website yang responsif.

Bootstrap, yang awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto, dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi internal. Pada 19 Agustus 2011 berganti nama dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek open source. Dan terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti.

Pada tanggal 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem tata letak grid dua belas kolom yang responsif, dukungan built-in untuk Glyphicons, beberapa komponen baru, serta perubahan pada banyak komponen yang ada.

Cara Menggunakan Bootstrap

Jika sudah terunduh semua silahkan anda lakukan ekstrak berkas kompresi zip bootstrap-3.4.1-dist.zip kedalam projek website didalam direktori xampp=>htdocs lalu anda ganti nama folder hasil ekstraksi sesuai yang anda inginkan. Selanjutnya anda copy kan file jquery-1.12.4.min.js ke dalam folder js.

Jika proses sudah semua, anda buat berkas index.html lalu anda ketikkan seperti kode berikut in:

Index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Bootstrap</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
		body{padding-top: 50px;}
	</style>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Pemrograman Web</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container">
    	<h3 class="page-header">Hello Bootstrap</h3>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Contoh-contoh navigasi dan themes sederhana bootstrap bisa anda kunjungi di situs resmi bootstrapnya klik disini

PreviousJavascript NextServer Side Scripting

Last updated 3 years ago

Was this helpful?

Apa Itu Bootstrap ?

Bootstrap adalah sebuah pustaka open source yang merupakan framework CSS dan Javascript untuk membuat website yang responsif.

Cara Menggunakan Bootstrap

Jika proses sudah semua, anda buat berkas index.html lalu anda ketikkan seperti kode berikut in:

Index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Bootstrap</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
		body{padding-top: 50px;}
	</style>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="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="#">Pemrograman Web</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container">
    	<h3 class="page-header">Hello Bootstrap</h3>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Contoh-contoh navigasi dan themes sederhana bootstrap bisa anda kunjungi di situs resmi bootstrapnya klik disini