Jihadul Akbar, S.Kom
PUSTIK STMIK LOMBOK
3/30/2017
Membuat Tempelate
Menggunkanan Boostrap
Tentang Modul
Bootstrap adalah kerangka front-end yang paling populer dalam waktu terakhir. Sangat
ringan, handal dalam membuat kerangka front-end mobile yang cepat dan
pengembangan web lebih mudah. Menggunakan HTML, CSS dan Javascript. Modul ini
akan mengajarkan Anda dasar-dasar Bootstrap yang Anda dapat gunakan untuk
membuat proyek web dengan mudah. Modul ini dibagi menjadi beberapa bagian seperti
Struktur dasar Bootstrap, CSS Bootstrap, Bootstrap Komponen Layout dan Bootstrap
Plugins. Setiap Ulasan ini Mengandung bagian-bagian terkait topik dengan sederhana
dan contoh yang berguna.
Modul Ini Untuk
Modul ini telah dipersiapkan untuk siapa saja yang memiliki pengetahuan dasar tentang
HTML dan CSS dan memiliki dorongan untuk mengembangkan website. Setelah
menyelesaikan modul ini Anda akan bisa mengembangkan proyek-proyek web
menggunakan Twitter Bootstrap
Pendahuluan
Apa itu Boostrap ?
Bootstrap adalah HTML, CSS, dan kerangka JS yang paling populer untuk
mengembangkan web responsif, mengutamakan agar website bisa diakses melalui
pragakat mobile.
Sejarah
Bootstrap di buat dan dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter.
Dirilis sebagai produk open source pada bulan Agustus 2011 pada GetHub.
Kenapa harus menggunkanan Bootstrap ?
1. Pendekatan pertama pada perangkat Mobile
2. Bowser Suport
3. Mudah untuk di terapkan
4. Responsive Design
Apa saja yang ada dalam paket Bootstrap ?
1. Sistem Kolom (Grid System)
Dengan menggunkana struktur grid system memudahkan dalam membuat
layout halaman website yang akan anda buat.
2. Cascading Style Sheet (CSS)
Bootstrap hadir dengan fasilitas pengaturan global CSS. Pundamental HTML
style dengan banyak kelas yang dapat digunakan untuk mengatur berbagai
macam bagian.
3. Komponen
Bootstrap memiliki banyak komponen yang dapat digunakan kembali untuk
membangun halaman web memberikan icon, dropdown, navigasi, peringatan,
pop-overs, dan lebih banyak.
4. JavaScript
Bootstrap memiliki banyak fungsi dari jQuery. Anda dapat dengan mudah
memasukkan semua, atau satu per satu.
5. Meyesuaikan
Kita bisa mengembangakan CSS, Komponen dan Javascript sesuai dengan
kebutuhan.
Persiapan
Download Bootstrap
Untuk mendapatkan bootstrap kita bisa download di http://getbootstrap.com/
Struktur File
Cara menambahkan Bootstrap pada halaman web
Tambahkan link dibawah ini pada bagian tag head
<link href="css/bootstrap.min.css" rel="stylesheet">Untuk menggunakan JavaScript bootstrap, kita harus menambahkan jQuery terlebih
dahulu baru kita menambah Javascript bawaan dari Bootstrap. Karna dalam paket
boostrap tidak termasuk Jquery maka kita harus download terlebih dahulu pada link
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.jsDan simpan di dalam direktori bootstrap/js/ .
Tempat penaruhan dari JavaScript adalah sebelum bagian akhir tag body
<!—Pemgangginalan jQuery -->
<script src="js/jquery.min.js"></script>
<!—Pemangginlan JavaScrept Boostrap -->
Membuat tempelate sederhana
<!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">
<title>Menggunakan Boostrap CSS</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head> <body> <h1>Hello, world!</h1> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Hasilnya adalah :
Menggunkan Grid System
<!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">
<title>Grid System</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row"> <!--membuat menjadi 12 kolom -->
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row"> <!-- 2 kolom kiri lebih besar 8 dan kanan 4 -->
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row"> <!-- 3 kolom semua sama besar -->
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div> <div class="row"> <!-- 2 kolom sama besar -->
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Hasilnya adalah
Membuat Form
<!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">
<title>Membuat Form</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label> <input type="checkbox"> Check me out </label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Hasilnya adalah
Membuat Tombol
<!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">
<title>Membuat Tombol</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Hasilnya adalah :
Membuat Menu
<!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">
<title>Membuat menu</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<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="#">Brand</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>
<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>
</ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- jQuery --> <script src="js/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Hasilnya adalah
Membuat Halaman Profil Dengan Booststrap
File
<!DOCTYPE html> <html>
<head>
<title>Profil</title> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Memanggil Boostrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Menambah CSS Untuk Mengatur Website -->
<link rel="stylesheet" type="text/css" href="css/style.css"> </head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<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="#">Hello</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="profil.html">Profil</a></li>
<li><a href="#">Hoby</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</div> </nav>
<!-- Container Pertama -->
<div class="container-fluid bg-1 text-center"> <h3>Perkenalkan Saya</h3>
<img src="img/jihad.jpg" alt="Jihadul Akbar" width="30%"
class="img-responsive img-circle" style="display:inline"> <h3>Saya Adalah Jihadul Akbar</h3>
</div>
<!-- Container Kedua -->
<div class="container-fluid bg-2 text-center"> <h3>Saya Adalah ?</h3>
<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.
</p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"> </span>
Selengkapnya
</a> </div>
<!-- Kontiner ke Empat dengan Grid -->
<div class="container-fluid bg-3 text-center"> <h3 class="margin">Temukan Saya?</h3><br>
<div class="row">
<div class="col-sm-4"> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<img src="img/satu.jpg" class="img-responsive margin"
style="width:100%" alt="Gambar">
</div>
<div class="col-sm-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<img src="img/satu.jpg" class="img-responsive margin"
style="width:100%" alt="Gambar">
</div>
<div class="col-sm-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<img src="img/satu.jpg" class="img-responsive margin"
style="width:100%" alt="Gambar">
</div>
</div> </div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p>Copyright by <a href="#">Jihadul Akbar</a></p>
</footer>
<!-- jQuery -->
<script src="js/jquery.min.js"></script> <!-- Memanggil JavaScript -->
<script src="js/bootstrap.min.js"></script> </body>
