MEMBANGUN WEBSITE

DENGAN
BOOTSTRAP

rahmat setiawan
Apa itu bootstrap?
Struktur file pada bootstrap
Management file bootstrap
Let’s start
Grid System
Continue grid
Example : mobile, tablet, desktop

Example : mobile, desktop

 Membuat Navigation Bar (Navbar)

NAV DIV
class : navbar navbar-default / navbar-inverse Class : collapse navbar-collapse
DIV Id : menubar
class : container / container-fluid UL
DIV Class : nav navbar-nav
Class : navbar-header LI
A Class : active (atau tidak)
Class : navbar-brand
BUTTON
type : button Form
Class : navbar-toggle collapsed class : navbar-form navbar-right
Data-toggle : collapse role : search
Data-target : #menubar
SPAN DIV
Class : icon-bar (3x) Class : form-group

Selanjutnya class : form-control

Membuat Jumbotron

DIV
class : jumbotron

Untuk menampilkan keterangan, informasi, atau berita yang ingin di sampaikan kepada user
Membuat button (Tombol)

BUTTON BUTTON
class : btn btn-default class : btn btn-warning

BUTTON
BUTTON
class : btn btn-primary
class : btn btn-danger
BUTTON
class : btn btn-success

BUTTON Btn-sm  untuk ukuran kecil

class : btn btn-info Btn-md  untuk ukuran normal
Btn-lg  untuk ukuran besar
Btn-xl  untuk ukuran xtra besar
Membuat tabel

TABLE
class : table table-default

tabel-sm  untuk ukuran kecil

TABLE
tabel-md  untuk ukuran normal
class : table table-bordered
tabel-lg  untuk ukuran besar
tabel-xl  untuk ukuran xtra besar
TABLE
class : table table-hover

TABLE
class : table table-stipped
Membuat Panel

DIV PANEL-HEADING > PANEL-TITLE

class : panel panel-default
DIV
Class : panel-heading
H3
Class : panel-title
DIV
PANEL
Class : panel-body PANEL-BODY
DIV
Class : panel-footer

Penggunaan panel-footer di susuaikan dgn kebutuhan, PANEL-FOOTER

Jika tidak diperlukan, tidak perlu digunakan
Membuat Modal
<!-- Button trigger /pemicu --> <!-- kontent modal -->
BUTTON DIV
class : btn btn-primary class : modal-content
type : button
data-toggle : modal DIV
data-target : #myModal class : modal-header

JUDUL MODAL H4
<!-- Modal --> class : modal-title
DIV id : myModalLabel
class : modal fade
id : myModal MODAL BODY
tabindex : -1 DIV
role : dialog class : modal-body

DIV MODAL FOOTER

class : modal-dialog DIV
role : document class : modal-footer
Membuat dropdown
DIV
class : dropdown

BUTTON
class : btn btn-default
id : dLabel
type : button
data-toggle : dropdown
aria-haspopup : true
aria-expanded : false

SPAN
class : caret

UL
class : dropdown-menu
aria-labelledby : dLabel
Image Responsive

Img
Class : img-responsive

Image shapes
img-rounded img-circle img-thumbnail

Img
Class : img-rounded / img-circle / img-thumbnail
Class Pembantu

Contexual color
P
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. Class : text-muted
P
Nullam id dolor id nibh ultricies vehicula ut id elit. Class : text-primary
P
Duis mollis, est non commodo luctus, nisi erat porttitor ligula. Class : text-success
P
Maecenas sed diam eget risus varius blandit sit amet non magna. Class : text-info
P
Etiam porta sem malesuada magna mollis euismod. Class : text-warning
P
Donec ullamcorper nulla non metus auctor fringilla. Class : text-danger
Contexual Background
P
Class : bg-primary

P
Class : bg-success

P
Class : bg-info

P
Class : bg-warning

P
Class : bg-danger
List Group

Contoh Basic
UL
Class : list-group

LI
Class : list-item-item
List Group

badge

UL
Class : list-group

LI
Class : list-item-item

SPAN
Class : badge
List Group

Linked item
DIV
Class : list-group

LI
Class : list-item-item (active/disabled)

Untuk menyisipkan glyphicon

Span
Class : glyphicon glyphicon-xxx
Glyphicon