Scribd
Upload
4 views23 pages

06 - Bootstrap

The document discusses the challenges of creating visually appealing and consistent web designs, emphasizing the need for responsive web design due to the variety of devices used. It introduces Twitter Bootstrap as a solution, highlighting its ease of use, responsive features, and browser compatibility. The document also provides examples of implementing Bootstrap components such as navigation bars, carousels, buttons, and grid systems.

Uploaded by

Ratna Ahsan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views23 pages

06 - Bootstrap

The document discusses the challenges of creating visually appealing and consistent web designs, emphasizing the need for responsive web design due to the variety of devices used. It introduces Twitter Bootstrap as a solution, highlighting its ease of use, responsive features, and browser compatibility. The document also provides examples of implementing Bootstrap components such as navigation bars, carousels, buttons, and grid systems.

Uploaded by

Ratna Ahsan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

BOOTSTRAP

By: Ahmad SYAUQI Ahsan


1
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> dan html untuk menyimpan isi web. Sedangkan
CSS digunakan untuk mengatur tampilan.
• Pembuatan dan pengelolaan layout web berbasis CSS susah, dan
seringkali ditampilkan berbeda oleh beberapa Browser.

2
PERMASALAHAN
TAMBAHAN

• Semakin banyak perangkat


yang digunakan untuk
mengakses website

• Diperlukan desain web yang


dapat menyesuaikan perangkat
yang digunakan oleh
pengguna → Responsive Web
Design (RWD)

3
SOLUSI: TWITTER
BOOTSTRAP
https://getbootstrap.com

4
Twitter Bootstrap merupakan
Twitter framework untuk membuat
tampilan web yang responsive

TWITTER
BOOTSTRAP
Twitter Bootstrap terdiri dari 2
komponen utama yaitu:
Twitter • File CSS
• File Javascript

5
• 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
WHY USE
BOOTSTRAP? • Mobile-first approach: In Bootstrap, 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)

6
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css

ISI DARI │ ├── bootstrap-grid.min.css.map


│ ├── bootstrap-reboot.min.css
BOOTSTRAP │ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js 7

└── bootstrap.min.js.map
Download bootstrap dari
https://getbootstrap.com

CARA
Extract file hasil download
MENGGUNAKAN ke folder website
BOOTSTRAP

Include file dari bootstrap


ke dokumen html

Note: bootstrap memerlukan jQuery slim build (full version juga diperbolehkan) 8
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
HALAMAN WEB <body>
DENGAN
BOOTSTRAP <div class="container">

(OWN SERVER) <h1>My First Bootstrap Page</h1>


<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>

<script src="jquery/jquery-3.0.0.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

9
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

HALAMAN WEB </head>


<body>
DENGAN
BOOTSTRAP <div class="container">
<h1>My First Bootstrap Page</h1>
(CDN) <p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js">
</script>
</div>

</body>
</html>

10
NAVIGATION BAR (NAVBAR)

Digunakan untuk
membuat header untuk Navbar dapat selalu
Navbar dapat berwarna
navigasi (biasanya terlihat di posisi atas atau
terang atau gelap.
berada di bagian atas bawah
website)

Navbar dapat otomatis


Navbar bisa rata kanan
berkembang/menyempit.

11
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light">


<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
NAVBAR BASIC <li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-
xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or sma
ll screens).</p>
</div>

<script src="jquery/jquery-3.0.0.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
12
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">


<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
NAVBAR LOGO <a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid">
<h3>Brand / Logo</h3>
<p>The .navbar-brand class is used to highlight the brand/logo/project name of your page.</p>
</div>

<script src="jquery/jquery-3.0.0.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

13
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body style="height:1500px">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">


<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
NAVBAR FIX <a class="nav-link" href="#">Link 2</a>
</li>
POSITION <li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid" style="margin-top:80px">


<h3>Top Fixed Navbar</h3>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page sc
roll.</p>
<h1>Scroll this page to see the effect</h1>
</div>

<script src="jquery/jquery-3.0.0.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
14
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">


<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
NAVBAR AUTO <a class="nav-link" href="#">Link 2</a>
</li>
COLLAPSE <li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid" style="margin-top:80px">


<h3>Top Fixed Navbar</h3>
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page sc
roll.</p>
<h1>Scroll this page to see the effect</h1>
</div>

<script src="jquery/jquery-3.0.0.slim.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
15
CAROUSEL

• Bootstrap menyediakan sebuah plugin untuk menampilkan Carousel.


• Carousel merupakan serangkaian gambar yang tampil secara bergantian

16
<div id="demo" class="container carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
CAROUSEL <h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

17
IMAGE

. . . . . .

<div class="container">
<h2>Rounded Corners</h2>
<img src="pens.jpg" class="rounded" alt="PENS" width="304" height="236">
</div>
<div class="container">
<h2>Circle</h2>
<img src="pens.jpg" class="rounded-circle" alt="PENS" width="304" height="236">
</div>
<div class="container">
<h2>Thumbnail</h2>
<img src="pens.jpg" class="img-thumbnail" alt="PENS" width="304" height="236">
</div>

. . . . . .

18
BUTTON

• Bootstrap menyediakan beberapa macam “gaya” untuk tombol

<button type="button" class="btn">Basic</button>


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

19
GRID SYSTEM
• Dengan Bootstrap, memungkinkan kita membagi lebar layar menjadi 12 kolom.

• Anda juga dapat mengelompokkan beberapa kolom menjadi satu.

• Grid System dari Bootstrap memiliki 5 kelas:


• .col- (extra small devices - screen width less than 576px)
• .col-sm- (small devices - screen width equal to or greater than 576px)
• .col-md- (medium devices - screen width equal to or greater than 768px)
• .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

20
<div class="container-fluid">
<h1>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>

<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>

<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>

GRID SYSTEM <br>

<!-- Or let Bootstrap automatically handle the layout -->


<div class="row">
<div class="col-sm" style="background-color:yellow;">25%</div>
<div class="col-sm" style="background-color:orange;">25%</div>
<div class="col-sm" style="background-color:yellow;">25%</div>
<div class="col-sm" style="background-color:orange;">25%</div>
</div>
<br>

<div class="row">
<div class="col" style="background-color:yellow;">25%</div>
<div class="col" style="background-color:orange;">25%</div>
<div class="col" style="background-color:yellow;">25%</div>
<div class="col" style="background-color:orange;">25%</div>
</div>
21
</div>
BELAJAR LEBIH LANJUT?

• https://www.w3schools.com/bootstrap4/default.asp
• Google
• Youtube

22
TERIMA KASIH

23

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy