Tài liệu Bootstrap 3.0 Tiếng Việt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.19 MB, 34 trang )
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
2
MỤC LỤC
LỜI NÓI ĐẦU 3
Chương I: Tổng quan về Boostrap 4
I. Bootstrap là gì? 4
II. Tại sao nên sử dụng Boostrap? 4
III. Quy trình sử dụng Bootstrap 4
Chương II: CSS cơ bản trong Bootstrap 3 7
I. Sử dụng container 7
II. Hệ thống lưới trong Bootstrap (Grid System) 8
III. Kiểu chữ 9
IV. Danh sách 10
V. Bảng (Table) 11
VI. Form trong Bootstrap 13
VII. Button trong Bootstrap 15
VIII. Hình ảnh trong Bootstrap 17
Chương III: Các thành phần trong Bootstrap 3 18
I. Font icon 18
II. Dropdown 18
III. Button Dropdown 20
V. Breadcrumb trong Boostrap 24
VI. Phân trang trong Bootstrap 25
VII. Label trong Bootstrap 26
VIII. Badges trong Bootstrap 26
IX. Alert trong Bootstrap 26
X. Thanh tiến trình (Progress bars) 27
XI. List Group 30
Chương IV: Phương pháp học Bootstrap 33
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
3
LỜI NÓI ĐẦU
Các bạn thân mến!
Lời đầu tiên, tôi xin chân thành cảm ơn các bạn đã quan tâm tới website giaotrinhcntt.com.
Đã ủng hộ website suốt thời gian qua.
Với mong muốn cho đi thật nhiều giá trị, giúp đỡ các bạn yêu thích công nghệ thông tin. Tôi
cùng đội nhóm đã xây dựng một cộng đồng có tên “Cộng Đồng CNTT Pveser”
Tài liệu này cũng chính là nhân dịp ra mắt Cộng Đồng CNTT Pveser, đó là một món qua tri
ân các bạn đã ủng hộ chúng tôi!
Xin cảm ơn!
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
4
Chương I: Tổng quan về Boostrap
I. Bootstrap là gì?
- Bootstrap là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng
dụng web
- Bootstrap chứa HTML và CSS dựa trên các mẫu thiết kế cho các văn bản, các hình
thức, các nút, chuyển hướng và các thành phần khác
- Bootstrap cũng có phần mở rộng JavaScript tùy chọn
- Bootstrap là mã nguồn mở và có sẵn trên GitHub
- Phiên bản mới nhất của Boostrap tính đến thời điểm tôi viết tài liệu này: Bootstrap
3.3.4
- Trang chủ Boostrap:
II. Tại sao nên sử dụng Boostrap?
1. Thiết kế đẹp: Bootstrap được thiết kế bởi các chuyên gia hàng đầu, nên về mặt thẩm
mỹ không có gì phải bàn cãi
2. Hỗ trợ trình duyệt: Boostrap được hỗ trợ bởi tất cả các trình duyệt phổ biến
3. Dễ học: Chỉ cần có 1 chút kiến thức về HTML – CSS là các bạn có thể làm việc với
Bootstrap 1 cách đơn giản
4. Responsive Web Design: Từ phiên bản 3, Bootstrap đã có sẵn Responsive Web
Design để tương thích với tất cả các loại thiết bị (Desktop, tablet, mobile,…)
5. Tốc độ thiết kế nhanh: Để thiết kế 1 giao diện website, nếu bạn sử dụng Boostrap thì
thời gian bạn hoàn thành rất nhanh so với việc bạn tự code HTML – CSS
6. Hiện đại: Bootstrap được thiết kế phù hợp với xu hướng công nghệ thiết kế web
III. Quy trình sử dụng Bootstrap
1. Thiết lập trước khi sử dụng
- Bước 1: Download phiên bản Boostrap mới nhất tại
Ebook Bootstrap 3 Tiếng Việt V1.0
- Bước 2:
Nhúng CSS, Javascript c
Khi download Boostrap về, bạn sẽ thấ
y c
Trong bộ Bootstrap có rất nhiều file,
nhưng b
Ø CSS:
Bootstrap.css, boostrap.min.css
Ø JS: bootstrap.
js, bootstrap.min.js
Ø Fonts: Toàn bộ thư mục
Cộng Đồ
ng CNTT Pveser
Nhúng CSS, Javascript c
ủa Bootstrap vào HTML
y c
ấu trúc các file như sau:
nhưng b
ạn chỉ quan tâm cho mình nhữ
ng file sau đây:
Bootstrap.css, boostrap.min.css
js, bootstrap.min.js
ng CNTT Pveser
ng file sau đây:
Ebook Bootstrap 3 Tiếng Việt V1.0
Trong đó: bootstrap.css và
bootstrap.min.css
bootstrap.min.js cũng như vậy
Vậy min có nghĩa là gì?
Min có nghĩa là bản nén củ
a file không có min.
giúp giảm dung lượng của file.
ð Lời khuyên:
o Khi thiết kế
trên máy tính, các b
dàng hơn trong thiết kế
o
Khi upload lên server thì dùng bootstrap.min.css và bootstrap.min.js
website load không bị ch
ậ
Tiếp theo, các bạ
n nhúng file CSS, JS vào HTML theo cú pháp sau:
<meta name="viewport" content="width=device
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type=”text/javascript” src=” js/jquery.m
<script type=”text/javascript” src=” js/bootstrap.min.js”></script>
Chú ý: File jquery.min.js download tạ
i jquery.com
<head>…</head>
Nhưng tôi khuyên các bạn nên chuyể
n h
</body>) để website load nhanh hơn
- Bước 3: Cách sử dụ
ng Bootstrap
Các bạn chỉ cần gọ
i tên class CSS phù h
Bạn có thể xem các quy định về
tên class, HTML t
Cộng Đồ
ng CNTT Pveser
bootstrap.min.css
có tác dụng như nhau. Bootstrap.js
và
a file không có min.
Các khoảng trắng trong file đã đượ
c lo
trên máy tính, các b
ạn dùng bootstrap.css và bootstrap.js đ
ể
Khi upload lên server thì dùng bootstrap.min.css và bootstrap.min.js
để
ậ
m
n nhúng file CSS, JS vào HTML theo cú pháp sau:
<meta name="viewport" content="width=device
-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type=”text/javascript” src=” js/jquery.m
in.js”></script>
<script type=”text/javascript” src=” js/bootstrap.min.js”></script>
i jquery.com
. Toàn bộ code trên chèn trong cặ
p th
n h
ết các file JS xuống dưới trang web (Trướ
c th
ng Bootstrap
i tên class CSS phù h
ợp với thẻ HTML mà Bootstrap đã quy đị
nh s
tên class, HTML t
ại trang chủ:
ng CNTT Pveser
và
c lo
ại bỏ
ể
dễ
p th
ẻ
c th
ẻ
nh s
ẵn.
Ebook Bootstrap 3 Tiếng Việt V1.0
Ví dụ:
<button class="btn btn-default"
type=
btn và btn-
default là tên class mà Boostrap quy đ
Còn rất nhiều điều thú vị nữa về
Boostrap t
Chương II: CSS cơ bả
n trong Bootstrap 3
I. Sử dụng container
Trong thiết kế giao diện HTML –
CSS thì vi
tạo ra 1 khung có chiều rộng cố định n
ằ
Như trong hình, cái khung màu đỏ
chính là container
Vậy cách sử dụ
ng container trong Bootst
Cú pháp:
<div class=”container”>
Viết gì thì viết
</div>
Class container trong Bootstrap có chi
ề
thích hợp với các website tại Việ
t Nam.
Bạn có thể dùng CSS để đặt chiều rộ
ng c
thị trên các thiết bị có kích thướ
c màn hình nh
Cộng Đồ
ng CNTT Pveser
type=
"submit">Button</button>
default là tên class mà Boostrap quy đ
ịnh
Boostrap t
ại chương 2
n trong Bootstrap 3
CSS thì vi
ệc sử dụng container rất quan trọ
ng. Nó giúp
ằ
m giữa trang web.
chính là container
ng container trong Bootst
rap như thế nào?
ề
u rộng 1170px. Với kích thước này thường sẽ
t Nam.
ng c
ố định cho nó, nhưng nó sẽ
không tương thích hi
c màn hình nh
ỏ hơn.
ng CNTT Pveser
ng. Nó giúp
không
không tương thích hi
ển
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
8
Để xem thủ thuật giải quyết vấn đề này bạn thêm 1 class. Sau đó CSS cho class đó với thuộc
tính max-width
Ví dụ:
.custom_container{max-width: 1000px;}
II. Hệ thống lưới trong Bootstrap (Grid System)
Khi các bạn code giao diện bằng HTML – CSS, các bạn muốn tạo nhiều khối nằm ngang
hàng với nhau thì các bạn thường dùng đến thuộc tính float trong CSS.
Với Bootstrap, bạn không cần làm như vậy nữa. Bootstrap có hệ thống lưới rất mạnh mẽ
(Tiếng Anh gọi là Grid System).
Hệ thống lưới trong Bootstrap được chia thành 12 cột. Hệ thống lưới hoạt động hiệu quả khi
đặt trong class .container (chiều rộng cố định) hoặc .container-fluid (chiều rộng full màn
hình)
Ví dụ:
<div class=”container”>
<div class=”row”>
<div class=”col-md-5”>
Block 01
</div>
<div class=”col-md-7”>
Block 02
</div>
</div>
</div>
Qua ví dụ, chắc các bạn cũng đã hiểu về cách sử dụng Grid System trong Bootstrap rồi chứ.
Cú pháp: .col-a-b
Trong đó:
- a: Ký hiệu của thiết bị
- b: Số cột chiếm (trong 12 cột)
Thiết bị điện
thoại (<768px)
Thiết bị máy
tính bảng
(>=768
px
)
Thiết bị desktop
(>=992px)
Thiết bị desktop
lớn (>=1200px)
Tên class .col-xs- .col-sm- .col-md- .col-lg-
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
9
III. Kiểu chữ
1. Heading
Trong HTML có 6 thẻ Heading: Từ h1 đến h6
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
2. Chữ gạch ngang
Đây là chữ gạch ngang
Trong Bootstrap các bạn sử dụng thẻ <del> hoặc thẻ <s>
Ví dụ:
<del>Đây là chữ gạch ngang</del.
<s>Đây là chữ gạch ngang</s>
3. Chữ gạch dưới
Đây là chữ gạch dưới
Bạn có thể sử dụng thẻ <ins> hoặc <u>
Ví dụ:
<ins>Đây là chữ gạch dưới</ins>
<u>Đây là chữ gạch dưới</u>
4. Lớp căn chỉnh
Căn chỉnh văn bản bao gồm 5 kiểu: left, center, right, justify, nowrap
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
5. Lớp biến đổi
Trong các kiểu biến đổi trong văn bản có 3 kiểu: lowercase, uppercase, capitalize
Ebook Bootstrap 3 Tiếng Việt V1.0
<p class="text-
lowercase">Lowercased text.</p>
<p class="text-
uppercase">Uppercased text.</p>
<p class="text-c
apitalize">Capitalized text.</p>
IV. Danh sách
1. Kiểu không sắp xếp
Đây là kiểu sắp xếp mặc đị
nh. Không c
Cú pháp: Sử dụng kiểu này rất đơn gi
ả
<ul>
<li> </li>
</ul>
2. Kiểu sắp xếp
Kiểu này có đánh số thứ tự. Cách sử d
ụ
Cú pháp: Rất đơn giản. Chỉ cầ
n dùng ol v
Cộng Đồ
ng CNTT Pveser
lowercase">Lowercased text.</p>
uppercase">Uppercased text.</p>
apitalize">Capitalized text.</p>
nh. Không c
ần phải sử dụng đến class
ả
n. Chỉ cần ul với li là xong
ụ
ng cũng rất đơn giản. Không sử dụng đế
n class
n dùng ol v
ới li là xong
ng CNTT Pveser
n class
Ebook Bootstrap 3 Tiếng Việt V1.0
<ol>
<li> </li>
</ol>
3. Không kiểu
Kiểu này, không có ký tự hay biểu tượ
ng nào trư
style mặc định
Cú pháp:
<ul class="list-unstyled">
<li> </li>
</ul>
4. Kiểu inline
Kiểu inline có nghĩa là tất cả
các danh sách s
Cú pháp:
<ul class="list-inline">
<li> </li>
</ul>
V. Bảng (Table)
1. Kiểu cơ bản
<table class="table">
</table>
2. Kiểu hàng sọc
Cộng Đồ
ng CNTT Pveser
ng nào trư
ớc mỗi dòng. Kiểu này đã được loạ
i b
các danh sách s
ẽ nằm trên cùng 1 dòng
ng CNTT Pveser
i b
ỏ list-
Ebook Bootstrap 3 Tiếng Việt V1.0
<table class="table table-
striped">
</table>
3. Bảng có viền
<table class="table table-
bordered">
</table>
4. Bảng kiểu hover rows
<table class="table table-hover">
…
</table>
Cộng Đồ
ng CNTT Pveser
striped">
bordered">
ng CNTT Pveser
Ebook Bootstrap 3 Tiếng Việt V1.0
5. Trang trí từng dòng
<! On rows >
<tr class="active"> </tr>
<tr class="success"> </tr>
<tr class="warning"> </tr>
<tr class="danger"> </tr>
<tr class="info"> </tr>
<! On cells (`td` or `th`) >
<tr>
<td class="active"> </td>
<td class="success"> </td>
<td class="warning"> </td>
<td class="danger"> </td>
<td class="info"> </td>
</tr>
6. Responsive Table
Nếu các bạn muốn Responsive Table
, các b
<div class="table-
responsive">…</div>
VI. Form trong Bootstrap
1. Form cơ bản
Cộng Đồ
ng CNTT Pveser
, các b
ạn hãy đặt toàn bộ code table trong cặ
p th
responsive">…</div>
ng CNTT Pveser
p th
ẻ
Ebook Bootstrap 3 Tiếng Việt V1.0
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<
input type="email" class="form
placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form
placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-
block">Example block
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn
</form>
2. Form inline
Tương tự như form cơ bản. Các bạn ch
ỉ
được
<form class="form-inline">
<div class="form-group">
Cộng Đồ
ng CNTT Pveser
<label for="exampleInputEmail1">Email address</label>
input type="email" class="form
-control" id="exampleInputEmail1"
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form
-control" id="exampleInputPassword1
"
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
block">Example block
-level help text here.</p>
<input type="checkbox"> Check me out
<button type="submit" class="btn btn
-default">Submit</button>
ỉ
cần thêm class=”form-inline” vào thẻ
form là
ng CNTT Pveser
"
form là
Ebook Bootstrap 3 Tiếng Việt V1.0
<label for="exampleInputName2">Name</label>
<input type="text" class="form
placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInp
utEmail2">Email</label>
<input type="email" class="form
placeholder="">
</div>
<button type="submit" class="btn btn
</form>
Tóm lại: Đây là 2 kiể
u form chính. Các b
cập vào link sau để biết thêm chi tiết:
/>VII. Button trong Bootstrap
Sử dụng Button
class trong Bootstrap v
<a class="btn btn-
default" href="#" role="button">Link</a>
<button class="btn btn-
default" type="submit">Button</button>
<input class="btn btn-
default" type="button" value="Input">
<input class="btn btn-
default" type="submit" value="Submit">
Button trong Bootstrap bao gồ
m 2 class:
x bao gồm: primary, success,
info, warning, danger, link
<button type="button" class="btn btn
<button type="button" class="btn btn
<button type="button" class="btn btn
<button type="button" class="btn btn
<button type="button" class="btn btn
<button type="button" class="btn btn
<button type="button" class="btn btn
Cộng Đồ
ng CNTT Pveser
<label for="exampleInputName2">Name</label>
<input type="text" class="form
-control" id="exampleInputName2"
utEmail2">Email</label>
<input type="email" class="form
-control" id="exampleInputEmail2"
placeholder="">
<button type="submit" class="btn btn
-default">Send invitation</button>
u form chính. Các b
ạn muốn biết thêm về các kiể
u form khác m
/>
class trong Bootstrap v
ới <a>, <button> hoặc <input>
default" href="#" role="button">Link</a>
default" type="submit">Button</button>
default" type="button" value="Input">
default" type="submit" value="Submit">
m 2 class:
btn và btn-x
info, warning, danger, link
<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>
ng CNTT Pveser
u form khác m
ời truy
Ebook Bootstrap 3 Tiếng Việt V1.0
Chú ý: Nếu muốn thêm kiể
u mang phong cách riêng c
class mà các bạn đặt rồ
i CSS cho class đó
Ví dụ:
<button type=”button” class=”btn btn
CSS Style:
.btn-red{
Background: red;
}
Kích thước của Button
Button trong Bootstrap có 4 kích thướ
c:
Để thay đổi kích thước button, các bạ
n ch
Trong đó x là: lg, sm, xs
Với kích thước mặc định thì không cầ
n thêm class
Ví dụ:
<p>
<button
type="button" class="btn btn
<button type="button" class="btn btn
</p>
<p>
<button type="button" class="btn btn
<button type="button" class=
"btn btn
Cộng Đồ
ng CNTT Pveser
u mang phong cách riêng c
ủa bạn thì bạn thay thế btn-x b
ằ
i CSS cho class đó
<button type=”button” class=”btn btn
-red”>Giaotrinhcntt.Com</button>
c:
lớn (lg), mặc định, nhỏ (sm), cực nhỏ (xs)
n ch
ỉ cần thêm class .btn-x
n thêm class
type="button" class="btn btn
-primary btn-
lg">Large button</button>
<button type="button" class="btn btn
-default btn-
lg">Large button</button>
<button type="button" class="btn btn
-primary">Default button</button>
"btn btn
-default">Default button</button>
ng CNTT Pveser
ằ
ng tên
lg">Large button</button>
lg">Large button</button>
Ebook Bootstrap 3 Tiếng Việt V1.0
</p>
<p>
<button type="button" class="btn btn
<button type="button" class="btn btn
</p>
<p>
<button type="button" class="btn btn
button</button>
<button type="button" class="btn btn
button</button>
</p>
Chú ý: Để
button trong Bootstrap full chi
xong
Ngoài ra, còn 1số kiểu như: Di
sable button, active button các b
VIII. Hình ảnh trong Bootstrap
1. Responsive Image
Trong Bootstrap 3, hình ảnh có thể
Responsive b
<img>
Ví dụ:
<img src=" " class="img-
responsive" alt="Responsive image">
2. Kiểu hình ảnh
Có 3 kiểu: hình vuông, hình tròn, kiể
u thumb
<img src=" " alt=" " class="img
<img src=" " alt=" " class="img
<img src=".
" alt=" " class="img
Cộng Đồ
ng CNTT Pveser
<button type="button" class="btn btn
-primary btn-
sm">Small button</button>
<button type="button" class="btn btn
-default btn-
sm">Small button</button>
<button type="button" class="btn btn
-primary btn-xs">Extra small
<button type="button" class="btn btn
-default btn-xs">Extra small
button trong Bootstrap full chi
ều rộng, các bạn chỉ cần thêm class .btn-
block
sable button, active button các b
ạn xem thêm tại:
Responsive b
ằng cách thêm class .img-
responsive
responsive" alt="Responsive image">
u thumb
<img src=" " alt=" " class="img
-rounded">
<img src=" " alt=" " class="img
-circle">
" alt=" " class="img
-thumbnail">
ng CNTT Pveser
sm">Small button</button>
sm">Small button</button>
block
là
responsive
vào
Ebook Bootstrap 3 Tiếng Việt V1.0
Chương III: Các thành phầ
n trong Bootstrap
Các thành phần trong Bootstrap là 1 số
bản
I. Font icon
Bootstrap bao gồm hơn 250 font icon
chuyên nghi
Cách sử dụng: Các bạn chỉ cầ
n copy tên class có bên dư
/>Ví dụ:
<span class=”glyphicon glyphicon-
cloud”></span>
Vậy là bạn đã có 1 icon đẹ
p mà không c
thay đổi kích thước của icon bằ
ng cách thêm class và CSS cho class đó
Chú ý: Để font này hoạt động, các bạ
n hãy nh
tải về mà tôi đã nói ở chương I
II. Dropdown
Như các bạn đã biết, dropdown là dạ
ng menu x
có nhiều cấp chuyên mục
Cộng Đồ
ng CNTT Pveser
n trong Bootstrap
3
chức năng khá phức tạp được ghép lại từ
CSS cơ
chuyên nghi
ệp, đẹp
n copy tên class có bên dư
ới mỗi icon tại:
/> rồi bỏ vào class của thẻ <span>
cloud”></span>
p mà không c
ần phải thiết kế hình ảnh. Bạn có thể
thêm màu và
ng cách thêm class và CSS cho class đó
n hãy nh
ớ đến thư mục font ở trong bộ
Bootstrap khi
ng menu x
ổ xuống. Bạn thường thấy trên nhữ
ng website
ng CNTT Pveser
CSS cơ
thêm màu và
Bootstrap khi
ng website
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
19
1. Xổ xuống (Dropdown)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1"
href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another
action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something
else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated
link</a></li>
</ul></div>
2. Xổ lên (dropup)
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1"
href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another
action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something
else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated
link</a></li>
</ul>
</div>
3. Dropdown Header
Ebook Bootstrap 3 Tiếng Việt V1.0
Cái chữ nhỏ nhỏ, mờ mờ
kia chính là Dropdown Header đó các b
<ul class="dropdown-
menu" role="menu" aria
<li role="presentation" class="dropdo
</ul>
4. Ngăn cách menu
<ul class="dropdown-
menu" role="menu" aria
<li role="presentation" class="divider"></li>
</ul>
III. Button Dropdown
1. Kiểu đơn giản
Cộng Đồ
ng CNTT Pveser
kia chính là Dropdown Header đó các b
ạn à
menu" role="menu" aria
-labelledby="dropdownMenu3">
<li role="presentation" class="dropdo
wn-header">Dropdown header</li>
menu" role="menu" aria
-
labelledby="dropdownMenuDivider">
<li role="presentation" class="divider"></li>
ng CNTT Pveser
labelledby="dropdownMenuDivider">
Ebook Bootstrap 3 Tiếng Việt V1.0
<div class="btn-group">
<button type="button" class="btn btn
toggle="dropdown" aria-
expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></l
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
2. Cắt button dropdown
<div class="btn-group">
<button type="button" class="btn btn
<button type="button" class="btn btn
toggle="dropdown" aria-
expanded="false">
<span class="caret"></span>
<span class="sr-
only">Toggle Dropdown</span>
</button>
<ul class="dropdown-
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Cộng Đồ
ng CNTT Pveser
<button type="button" class="btn btn
-default dropdown-toggle" data-
expanded="false">
Action <span class="caret"></span>
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></l
i>
<li><a href="#">Separated link</a></li>
<button type="button" class="btn btn
-danger">Action</button>
<button type="button" class="btn btn
-danger dropdown-toggle" data-
expanded="false">
only">Toggle Dropdown</span>
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
ng CNTT Pveser
Ebook Bootstrap 3 Tiếng Việt V1.0
3. Kích thước
Để thay đổi kích thước, các bạn chỉ cầ
n thêm class .btn
<! Large button group >
<div class="btn-group">
<button class="btn btn-
default btn
toggle="dropdown" aria-
expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-
menu" role="menu">
</ul>
</div>
<! Small button group >
<div class="btn-group">
<button class="btn btn-
default btn
toggle="dropdown" aria-
expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-
menu" role="menu">
</ul>
</div>
<! Extra small button group >
<div class="btn-group">
<button class="btn btn-
default btn
toggle="dropdown" aria-
expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-
menu" role="menu">
</ul>
</div>
Cộng Đồ
ng CNTT Pveser
n thêm class .btn
-lg, .btn-sm, .btn-
xs vào <button>
default btn
-lg dropdown-
toggle" type="button" data
expanded="false">
Large button <span class="caret"></span>
menu" role="menu">
default btn
-sm dropdown-
toggle" type="button" data
expanded="false">
Small button <span class="caret"></span>
menu" role="menu">
default btn
-xs dropdown-
toggle" type="button" data
expanded="false">
Extra small button <span class="caret"></span>
menu" role="menu">
ng CNTT Pveser
xs vào <button>
toggle" type="button" data
-
toggle" type="button" data
-
toggle" type="button" data
-
Ebook Bootstrap 3 Tiếng Việt V1.0
IV. Menu trong Bootstrap 3
<nav class="navbar navbar-
default">
<div class="container-fluid">
<!
Brand and toggle get grouped for better mobile display
<div class="navbar-header">
<button type="button" class="nav
toggle="collapse" data-
target="#bs
<span class="sr-
only">Toggle navigation</span>
<span class="icon-
bar"></span>
<span class="icon-
bar"></span>
<span class="icon-bar"></
span>
</button>
<a class="navbar-
brand" href="#">Brand</a>
</div>
<!
Collect the nav links, forms, and other content for toggling
<div class="collapse navbar-
collapse" id="bs
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr
only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown
role="button" aria-
expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-
form navbar
<div class="form-group">
<input type="text" class="form
</div>
<button type="submit" class="btn btn
</form>
<ul class="nav navbar-
nav navbar
<li><a href="#">Link</a></li>
Cộng Đồ
ng CNTT Pveser
default">
Brand and toggle get grouped for better mobile display
>
<button type="button" class="nav
bar-toggle collapsed" data-
target="#bs
-example-navbar-collapse-1">
only">Toggle navigation</span>
bar"></span>
bar"></span>
span>
brand" href="#">Brand</a>
Collect the nav links, forms, and other content for toggling
>
collapse" id="bs
-example-navbar-collapse-
1">
<li class="active"><a href="#">Link <span class="sr
-
<li><a href="#">Link</a></li>
<a href="#" class="dropdown
-toggle" data-toggle="dropdown"
expanded="false">Dropdown <span class="caret"></span></a>
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</
a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
form navbar
-left" role="search">
<input type="text" class="form
-control" placeholder="Search">
<button type="submit" class="btn btn
-default">Submit</button>
nav navbar
-right">
<li><a href="#">Link</a></li>
ng CNTT Pveser
1">
expanded="false">Dropdown <span class="caret"></span></a>
Ebook Bootstrap 3 Tiếng Việt V1.0
<li class="dropdown">
<a href="#" class="dropdown
role="button" aria-
expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a hr
ef="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><! /.navbar-collapse
</div><! /.container-fluid
>
</nav>
Chú ý: Nếu bạn muốn thay đổ
i màu cho menu thì b
navbar-primary, navbar-
success, navbar
danger
Hoặc bạn có thể tự thay đổ
i màu theo ý thích c
đó
Fixed To Top
Fixed To Top có nghĩa là đặt cố đị
nh menu
Cách sử dụng: Các bạn chỉ cầ
n thêm class
Fixed to bottom
Ngược lại so với Fixed to top. Các bạ
n ch
<nav>
V. Breadcrumb trong Boostrap
Breadcrumb chính là thanh điều hướn
g trên website. T
ở mục nào
Cộng Đồ
ng CNTT Pveser
<a href="#" class="dropdown
-toggle" data-toggle="dropdown"
expanded="false">Dropdown <span class="caret"></span></a>
menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
ef="#">Separated link</a></li>
>
>
i màu cho menu thì b
ạn thay class navbar-default
thành
success, navbar
-info, navbar-warning, navbar-inverse hoặ
c navbar
i màu theo ý thích c
ủa bạn bằ
ng cách thêm class và CSS cho class
nh menu
ở đầu trang, kể cả khi kéo thanh cuộn
n thêm class
.navbar-fixed-top vào thẻ <nav> là xong
n ch
ỉ cần thêm class .navbar-fixed-bottom
vào th
g trên website. T
ừ đó khách truy cập sẽ biế
t mình
ng CNTT Pveser
expanded="false">Dropdown <span class="caret"></span></a>
thành
c navbar
-
ng cách thêm class và CSS cho class
vào th
ẻ
t mình
đang
Ebook Bootstrap 3 Tiếng Việt V1.0
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
VI. Phân trang trong Bootstrap
1. Kiểu mặc định
<nav>
<ul class="pagination">
<li>
<a href="#" aria-
label="Previous">
<span aria-
hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-
label="Next">
<span aria-
hidden="true">»</span>
</a>
</li>
</ul>
</nav>
2. Disable hoặc active thành phầ
n
Bạn thêm class disable hoặc active tạ
i nơi mà b
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria
hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr
only">(current)</span></a></li>
</ul>
</nav>
Cộng Đồ
ng CNTT Pveser
<li><a href="#">Library</a></li>
label="Previous">
hidden="true">«</span>
label="Next">
hidden="true">»</span>
n
i nơi mà b
ạn mong muốn
<li class="disabled"><a href="#" aria
-label="Previous"><span aria-
hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr
-
ng CNTT Pveser
