Download - 05 - Bootstrap 3.pdf
![Page 1: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/1.jpg)
![Page 2: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/2.jpg)
Permasalahan Membuat tampilan web yang bagus dan
konsisten itu susah dan butuh waktu lama
Untuk SEO (Search Engine Optimization) yang lebih baik, hanya gunakan tag <div> danhtml untuk menyimpan isi web. SedangkanCSS digunakan untuk mengatur tampilan.
Pembuatan dan pengelolaan layout web berbasis CSS susah, dan seringkaliditampilkan berbeda oleh beberapa Browser.
![Page 3: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/3.jpg)
Permasalahan Tambahan Semakin banyak
perangkat yang digunakan untukmengakses website
Diperlukan desainweb yang dapatmenyesuaikanperangkat yang digunakan olehpengguna Responsive Web Design (RWD)
![Page 4: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/4.jpg)
Solusi: Twitter Bootstrap
getbootstrap.com
![Page 5: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/5.jpg)
Twitter Bootstrap
Twitter Bootstrap merupakan framework untuk membuat tampilan web yang responsive
Twitter Bootstrap terdiri dari 3 komponenutama yaitu: File CSS
File Javascript
File untuk glyphicons
![Page 6: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/6.jpg)
Why use Bootstrap? Easy to use: Anybody with just basic knowledge of
HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
![Page 7: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/7.jpg)
Isi dari Bootstrapbootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
![Page 8: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/8.jpg)
Cara Menggunakan Bootstrap
Download bootstrap dari
http://getbootstrap.com
Extract file hasil download ke folder
website
Include file dari bootstrap ke dokumen
html
![Page 9: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/9.jpg)
Halaman Web dengan Bootstrap<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
![Page 10: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/10.jpg)
Navigation Bar (navbar) Digunakan untuk membuat header untuk
navigasi (biasanya berada di bagian atas website)
Navbar dapat berwarna terang atau gelap.
Navbar dapat selalu terlihat di posisi atas atau bawah
Navbar bisa rata kanan
Navbar dapat otomatis berkembang/menyempit.
![Page 11: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/11.jpg)
Navbar Basic <nav class="navbar navbar-default">
<!-- ganti navbar-default menjadi navbar-inverse untuk membalik warna -->
<!-- tambahkan navbar-fixed-top atau navbar-fixed-bottom untuk posisi tetap -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
![Page 12: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/12.jpg)
Navbar Inverse & Fix Position<nav class="navbar navbar-default">
<!-- ganti navbar-default menjadi navbar-inverse untuk membalik warna -->
<!-- tambahkan navbar-fixed-top atau navbar-fixed-bottom untuk posisi tetap -->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
![Page 13: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/13.jpg)
Navbar Right<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
![Page 14: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/14.jpg)
Navbar Dropdown<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
![Page 15: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/15.jpg)
Navbar Auto Collapse<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
![Page 16: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/16.jpg)
Jumbotron Merupakan kelas pada Bootstrap yang digunakan untuk menampilkan
kotak besar yang biasanya digunakan untuk menarik perhatian.
Ukuran teks yang berada dalam kelas Jumbotron akan diperbesar.
Contoh:<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
![Page 17: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/17.jpg)
Jumbotron (2)<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML,
CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
![Page 18: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/18.jpg)
Carousel
Bootstrap menyediakan sebuah plugin untuk
menampilkan Carousel.
Carousel merupakan serangkaian gambar yang
tampil secara bergantian
![Page 19: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/19.jpg)
Carousel (2)<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel"
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-
hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
![Page 20: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/20.jpg)
Carousel (3) Anda dapat menambahkan caption pada gambar di
Carousel
Contoh:
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Venice.</p>
</div>
</div>
![Page 21: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/21.jpg)
Image Bootstrap menyediakan 3 kelas untuk
menampilkan gambar: .img-rounded, .img-circle, dan .img-thumbnail
Contoh:<img src=”candi.jpg" class="img-rounded" alt=”Candi" width="304" height="236">
<img src=”candi.jpg" class="img-circle" alt=”Candi" width="304" height="236">
<img src=”candi.jpg" class="img-thumbnail" alt=”Candi" width="304" height="236">
![Page 22: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/22.jpg)
Button Bootstrap menyediakan 7 macam “gaya” untuk tombol
dengan menggunakan kelas: .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link
Contoh:<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
![Page 23: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/23.jpg)
Grid System Bootstrap memungkinkan lebar layar dibagi menjadi 12
kolom.
Anda dapat mengelompokkan beberapa kolom menjadi satu.
Terdapat 4 kelas: xs (phones), sm (tablets), md (desktops),
dan lg (larger desktops)
![Page 24: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/24.jpg)
Grid System (2)<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-0 col-md-4">.col-xs-0 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
![Page 25: 05 - Bootstrap 3.pdf](https://reader034.vdocuments.site/reader034/viewer/2022052202/587f55d21a28ab8a5f8c55e7/html5/thumbnails/25.jpg)
Belajar Lebih Lanjut?
http://www.w3schools.com/bootstrap/default.asp
Youtube