Bootstrap

Kelompok 15

1. Mohammad Rizaldi Huzein P (05111740000024)

2. Yasinta Yusniawati (05111740000054)
Apa itu Bootstrap?
Bootstrap adalah front-end framework gratis untuk pengembangan
web berbasis HTML dan CSS untuk tipografi, form, tombol, tabel,
navigasi, dll. Bootstrap membuat web menjadi responsif
(menyesuaikan di semua perangkat)

Your Date Your Footer Here 2

Cara menggunakan Bootsrap :
• Download : intip.in/btsp3
• Memasukkan bootstrap dari CDN (Content Delivery Network)
seperti javascript, caranya :

CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bo
otstrap.min.css">

Java Script
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></
script>

Your Date Your Footer Here 3

 Responsif pada mobile
<meta name="viewport" content="width=device-width, initial-
scale=1">

• width=device-width = mengikuti lebar layar

• initial-scale=1 = menetapkan zoom awal ketika load

Your Date Your Footer Here 4

Container HTML
• .container : lebarnya tetap
• .container-fluid : lebarnya memenuhi lebar browser

Your Date Your Footer Here 5

Grid

Note : System grid pada bootsrap responsive

Your Date Your Footer Here 6

Grid Classes :
• .col-xs- (Handphone - < 768px)
• .col-sm- (Tablet - >= 768px)
• .col-md- (Laptop kecil - >= 992px)
• .col-lg- (Laptop dan desktop - >= 1200px)

Your Date Your Footer Here 7

Grid
<div class = container>
<div class = row>
<div class = col-*-*>
…..
</div>
</div
</div

Your Date Your Footer Here 8

Unordered List
• .list-inline
• .nav
• .nav .nav-tabs
• .nav .nav-pills
• .nav-stacked
• .nav-justified

Your Date Your Footer Here 9

Navigation bar

<nav class=“navbar navbar-default”></nav>

<nav class=“navbar navbar-inverse”></nav>

Your Date Your Footer Here 10

Dropdown
<div class="dropdown">
<button class="dropdown-toggle" type="button" data-toggle="dropdown“ >
<ul class="dropdown-menu">
...
</ul>
</div>

Your Date Your Footer Here 11

Form
Bootstrap menyediakan 3 jenis tampilan form :
• Vertikal
• Horizontal
• Inline

Your Date Your Footer Here 12

Form
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>

Your Date Your Footer Here 13

Button
• .btn
• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

Your Date Your Footer Here 14

Jumbotron dan Header
Jumbotron

Page header

Your Date Your Footer Here 15

Modals
Modal adalah dialog box pop up yang muncul di layar bagian atas, cara
mengaksesnya :

<button data-toggle="modal" data-target="#idmodal“></button>

<div class = “modal” id=“idmodal”>
<div class=“modal-dialog”>
<div class=“modal-content”>…</div>
</div>
</div>

Your Date Your Footer Here 16

 Terimakasih 

Your Date Your Footer Here 17