Cara Menggunakan Bootstrap

Cara Menggunakan Bootstrap
Diartikel kali ini saya akan coba menjelaskan bagaimana cara menggunakan bootstrap, apa itu bootstrap? bootstrap merukapan sebuah framework css yang memudahkan kita untuk menggunakan style-style css yang telah disediakan oleh bootstrap sendiri.

Dengan adanya bootstrap ini memudahkan bagi para programer maupun web designer untuk membuat style web yang mereka buat karena semuanya telah tersedia, baik itu style dari menu, table, button, icon dll.
Berikut ini bagaimana cara menggunakan bootstrap. khususnya yang akan kita bahas disini yaitu menggunakan bootstrap pada file php.

Pertama kalian bisa download terlebih dahulu sebuah file bootstrap di getbootstrap.com .

Cara Menggunakan Bootstrap
Cara Menggunakan Bootstrap
Pilih download yang digaris bawah merah
Jika sudah kalian download, maka sekarang kita buat project baru. buat folder dengan nama bootstrap dan simpan di htdocs kalian. lalu copykan semua file bootstrap yang telah kalian download tadi, dan buat file php baru dan berinama index.php

Cara Menggunakan Bootstrap
Kurang lebih kita sekarang telah memiliki sebuah project baru, sekarang mari kita implementasikan style bootstrap pada file index.php tadi, contoh kita akan membuat sebuah menu.
Untuk memudahkan kalian mempelajari boostrap ini, sebaiknya kalian buka web getbootstrap tadi lalu pili menu.
getbootstrap.com ->menu Components

Cara Menggunakan Bootstrap
Pada menu ini kalian bisa mempeajari class style apa saja yang ada pada bootstrap ini, contoh seperti class table, navbar, labels, button, dll.
Untuk menggunakannya juga cukup mudah, kita hanya tinggal menambahkan class dari bootstrap yang ingin kita pakai kedalam tag html seperti div,span,h1 maupun kepada tag form.
Contoh saya akan membuat sebuah menu, maka cukup dengan memilih tab navbar pada halaman menu components lalu copykan script tersebut kedalam file index.php yang telah kita buat, contoh script seperti dibawah.
Masukan script berikut ke file index.php.
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Bootstrap</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">




<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Belajar Bootstrap</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<!-- jQuery Version 1.11.0 -->


</body>
<script src="js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</html>

Bisa dilihat setelah kalian memasukan script diatas, maka sekarang coba buka http://localhost/bootstrap maka akan terlihat tampilan seperti gambar dibawah.
Cara Menggunakan Bootstrap
Sekarang kita telah memiliki sebuah menu dengan menggunakn class navbar dari bootstrap, jika kalian ingin menambahkan component yang lain maka cukup memanggil class dari bootstrap tadi dalam sebuah tag html, untuk lebih mudah kalian bisa mencobanya dengan cara mengcopy script yang ada di web getbootstrap tadi. lalu pilih class dari bootstrap mana yang ingin kalian pakai.
Hal yang paling penting agar bootstrap ini berjalan pada project kalian yaitu dengan menginclude file bootstrapnya tentunya  :D, script tersebut yaitu.
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery Version 1.11.0 -->

<script src="js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
Jangan lupa untuk menginclude file jquery pada project kalian, karena walaupun kalian telah menginclude file bootstrap kedalam project kalian akan tetapi tidak ada file jquerynya itu sama saja bohong. bootstrap kalian otomatis tidak akan jalan.

untuk file jquery bisa kalian download di jquery.com bisa ambil yang versi terbaru ataupun versi sebelum-sebelumnya.

Sekian sudah pembahasan artikel kali ini, jika informasinya kurang jelas atau ada yang ingin ditanyakan, silahkan untuk bertanya di kolom komentar, Terima kasih telah berkunjung ke blog ini 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *