Company

LOGO

Bootstrap 3

www.company.com

Company
LOGO

S lc

www.company.com

Pht trin giao din website nhanh chng.

D hc & d s dng.
Javascrip: Bootstrap c trang b vi cc th vin JavaScript v vt
ra ngoi c bn v cu trc v phong cch.
T pht trin: Bootstrap c trang b nhiu yu t ang c xem xt
tng lai c mt thit k ring ca mnh. V d c HTML5 v CSS3 l
nhng iu m s c nng cp trong tng lai.

Company
LOGO

Grid System

Chapter

CSS

www.company.com

Grid system l g? Grid System l mt h thng li v l mt

thut ng c dng trong thit k v n c cu hnh thnh
12 ct. Kch thc trong Grid System tnh bng ct, mi ct ny
s chim mt % nht nh kch thc ca layout. Thay v ch
nh r rng kch thc l 200px, 300px, Th gi chng ta s
dng n v l ct. M % l bao nhiu th bootstrap tnh sn
ri.

Company
LOGO

Grid options

Responsive : mobile, table, desktop.

Ngoi ra grid system trong bootstrap cn c mt s tnh nng nh
l canh l tri, phi (offset) , gp cc ct li vi nhau

www.company.com

Company
LOGO

Typography
Cc phong cch v nh dng ca ni dung vn bn nh tiu
, on vn, blockquotes...vv Vn trang tr ni dung trong
website cng rt l quan trng v khng th thiu c. Trc
y c l hi mt thi gian vi vic stylesheet cho cc tag h1>h6 ,p, blockquote, left, right,center th gi y ch vic khai bo
tag ri bc ni dung vo bn trong tag, mi vic cn li c
bootstrap lo liu.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

www.company.com

Company
LOGO

www.company.com

Company
LOGO

Tables
to mt table n gin nhng p mt trong bootstrap 3
th ta ch cn tun theo cu trc HTML Table bnh thng,
ng thi thm mt class="table" vo. Mt lu na lp
.table trong bootstrap n s t nhn din hai group thead
dng hin th title v tbody dng hin th ni dung.

www.company.com

Company
LOGO

Tables
<div class="row">
<h2>Table Basic</h2>
<table class="table">
<thead>
<tr>
<th>STT</th>
<th>H Tn</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vn Cng</td>
<td>Nam</td>
<td>thehalftheart@mail.com</td>
<td>192 Hm t</td>
</tr>
</tr>
</tbody>
</table>
</div>
www.company.com

Company
LOGO

Tables

www.company.com

Company
LOGO

Tables

www.company.com

Company
LOGO

www.company.com

Company
LOGO

Forms
Basic form (vertical form) : Mi thnh phn bn trong form
u c bao quanh bi cp th form v bn trong n l
class form-group v bn trong thnh phn input c nh
ngha bng class form-control, class ny c tc dng
stylesheet cho th input. Nu bn b class ny ra th th
input s tr nn ging th input html thng thng khng
cn hiu ng ouline khi click chut vo na.Hu nh mi
thnh phn thuc form html u phi khi bo class ny nu
nh xy dng form bng bootstrap.
Khng nhm ln gia form-group v input-group. Inputgroup nn trong form-group.

www.company.com

Company
LOGO

www.company.com

Company
LOGO

www.company.com

Company
LOGO

Forms
Horizontal Form c kt hp vi Grid system b cc kch
thc ca form v tag label cho hp l. c th lm vic
tt vi kiu form ny cn cc bn ch cc class sau.

control-label (Khai bo class ny tag label mi c th

gn class col-xs-x vo c)

form-horizontal (nh dng kiu form ngang)

col-xs-offset-2 (Canh l tri)

<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-2">Mt Khu</label>
<div class="col-xs-10">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">ng Nhp</button>
</div>
</div>
</form>
www.company.com

Company
LOGO

Forms

www.company.com

Company
LOGO

Forms
Inline form

www.company.com

Company
LOGO

Forms : Supported controls

H tr hu ht cc control ph bin, cc
input vi text nh : text, password,
datetime, email, url, search .
<input type="text" class="form-control"
placeholder="Text input">

www.company.com

Company
LOGO

Checkboxs and radios

www.company.com

Company
LOGO

Checkboxs and radios

www.company.com

Company
LOGO

Select

www.company.com

Company
LOGO

Buttons

www.company.com

Company
LOGO

Chapter

Component
s

www.company.com

Company
LOGO

Dropdowsn

Alignment, headers, divider, disabled menu

item

www.company.com

Company
LOGO

Button groups
Cn xc nh ng role: group hay toolbar.
Sizing, nesting, vertical variation, justified button
groups

www.company.com

Company
LOGO

www.company.com

Company
LOGO

Split button dropdowns

www.company.com

Company
LOGO

Input groups
Ch s dng text input, trnh s dng <select>,
<textarea>.
Khng thm cc thnh phn khc vo nh : form
groups hay grid column

www.company.com

Company
LOGO

Breadcrumbs
Breadcrumb l tp hp cc ng link phn cp gip
ngi dng c th bit c mnh ang trang no v t
c th di chuyn thun li t trang ny trang khc
trong 1 website.

www.company.com

Company
LOGO

Paggination

www.company.com

Company
LOGO

Alerts

www.company.com

Company
LOGO

Chapter

Javascript

www.company.com

Company
LOGO

Alerts messages (alert.js)

www.company.com

Company
LOGO

Alerts messages (alert.js)

Methods :
$().alert()
$().alert(close) c hiu ng .fade v .in
Events
close.bs.alert : thc thi khi th hin <close> c
gi
closed.bs.alert : thc thi khi alert c ng (i
cho css transitions hon thnh)

www.company.com

Company
LOGO

No conflict

jQuery.noConflict l ci g vy?

Mc nh jQuery v 1 vi th vin khc dng $() l bin dng

chung cho ton b th vin chnh v vy s xy ra xung t gia
cc th vin vi nhau.
jQuery.noConflict l gii quyt vn ny
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
$cong = jQuery.noConflict();
$cong('div').css('border', '1px solid red');

www.company.com

Company
LOGO

Events

$('#myModal').on('show.bs.modal', function (e) {

if (!data) return e.preventDefault() // stops modal from being shown
})

Khi user click vo mt thnh phn no ca trang web, hoc khi user di
chuyn chut trn mt form element
Event object
PreventDefault

www.company.com

Company
LOGO

Transitions

Cung cp mt s hiu ng chuyn tip n gin.

Mt s trng hp s dng:

Sliding or fading in modals.

Fading out tabs.

Fading out alerts.

Sliding carousel panes.

www.company.com

Company
LOGO

Modals

Mt hp thoi n gin nhng linh hot vi mt t tnh nng

c yu cu cng vi thit lp thng minh.
Khng h tr nhiu modals chng ln nhau, nu mun hin th
nhiu modals cung mt lc th phi chnh sa code.
Nn t m html cao nht trong document trnh b nh
hng bi cc thnh phn khc.

www.company.com

Company
LOGO

Modals

www.company.com

Company
LOGO

Modals

www.company.com

Company
LOGO

Modals

www.company.com