Post on 14-Dec-2015
description
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
2 http://giaotrinhcntt.com
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 http://giaotrinhcntt.com
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 http://giaotrinhcntt.com
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: http://getboostrap.com
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 http://getbootstrap.com
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.cssbootstrap.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.min.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ủ: http://getbootstrap.com
ng CNTT Pveser
và
c loại bỏ
ể dễ
p thẻ
c thẻ
nh sẵn.
http://getbootstrap.com
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ì vitạ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 cthị 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 Bootstrap 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 hic 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 http://giaotrinhcntt.com
Để 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 (>=768px)
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 http://giaotrinhcntt.com
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-capitalize">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="formplaceholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="formplaceholder="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="formplaceholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="formplaceholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn</form> Tóm lại: Đây là 2 kiểu form chính. Các bcập vào link sau để biết thêm chi tiết: http://getbootstrap.com/css/#forms
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="jane.doe@example.com">
<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 mhttp://getbootstrap.com/css/#forms
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 cclass 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 btnbutton</button> <button type="button" class="btn btnbutton</button> </p> Chú ý: Để button trong Bootstrap full chixong
Ngoài ra, còn 1số kiểu như: Disable button, active button các bhttp://getbootstrap.com/css/#buttons
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ưhttp://getbootstrap.com/components/#glyphicons
Ví dụ:
<span class=”glyphicon glyphicon-cloud”></span>
Vậy là bạn đã có 1 icon đẹp mà không cthay đổ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 nhtải về mà tôi đã nói ở chương I
II. Dropdown
Như các bạn đã biết, dropdown là dạng menu xcó 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: http://getbootstrap.com/components/#glyphicons 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 http://giaotrinhcntt.com
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="dropdown-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 btntoggle="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 btntoggle="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></li>
<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 btntoggle="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 btntoggle="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 btntoggle="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" dataexpanded="false">
Large button <span class="caret"></span>
menu" role="menu">
default btn-sm dropdown-toggle" type="button" dataexpanded="false">
Small button <span class="caret"></span>
menu" role="menu">
default btn-xs dropdown-toggle" type="button" dataexpanded="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="navtoggle="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="sronly">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdownrole="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="navbar-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="dropdownrole="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 href="#">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ì bnavbar-primary, navbar-success, navbardanger
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ướng 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="#" ariahidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sronly">(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
Ebook Bootstrap 3 Tiếng Việt V1.0
3. Kích thước
Phân trang trong Bootstrap bạn cũng có th.pagination-lg hoặc .pagination-sm vào th
VII. Label trong Bootstrap
<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>
VIII. Badges trong Bootstrap
Cách sử dụng: Rất đơn giản, các bạn thêm hiển thị
IX. Alert trong Bootstrap
<div class="alert alert-success" role="alert">...</div><div class="alert alert-info" role="alert">...</div><div class="alert alert-warning" role="alert">...</div><div class="alert alert-danger" role="alert">...</div> Chú ý: Alert trong Bootstrap không có ki
Cộng Đồng CNTT Pveser
ũng có thể chọn kích thước. Bạn chỉ cần thêm class vào thẻ <ul>
default">Default</span> primary">Primary</span> success">Success</span> info">Info</span> warning">Warning</span> danger">Danger</span>
n thêm <span class="badge"></span> tại nơi bạn mu
success" role="alert">...</div> info" role="alert">...</div> warning" role="alert">...</div> danger" role="alert">...</div>
: Alert trong Bootstrap không có kiểu mặc định
ng CNTT Pveser
n muốn
Ebook Bootstrap 3 Tiếng Việt V1.0
Bỏ qua Alert
Khi bấm vào nút X thì alert sẽ bị biến m
<div class="alert alert-warning alert <button type="button" class="close" datalabel="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div>
X. Thanh tiến trình (Progress bars
1. Kiểu cơ bản
<div class="progress"> <div class="progress-bar" role="progressbar" ariavaluemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div>
2. Kiểu với label
<div class="progress"> <div class="progress-bar" role="progrevaluemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>
3. Một số kiểu Progress Bar đẹp
Cộng Đồng CNTT Pveser
n mất
warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-
hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good.
Progress bars)
bar" role="progressbar" aria-valuenow="60" aria-valuemax="100" style="width: 60%;"> only">60% Complete</span>
bar" role="progressbar" aria-valuenow="60" aria-valuemax="100" style="width: 60%;">
ng CNTT Pveser
<strong>Warning!</strong> Better check yourself, you're not looking too good.
Ebook Bootstrap 3 Tiếng Việt V1.0
<div class="progress"> <div class="progress-bar progressvaluenow="40" aria-valuemin="0" aria <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progressvaluenow="20" aria-valuemin="0" aria <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progressvaluenow="60" aria-valuemin="0" aria <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progressvaluenow="80" aria-valuemin="0" aria <span class="sr-only">80% Complete (danger)</span> </div> </div>
<div class="progress"> <div class="progress-bar progressrole="progressbar" aria-valuenow="40" ariastyle="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progressrole="progressbar" aria-valuenow="20" ariastyle="width: 20%"> <span class="sr-only">20% Complete</span>
Cộng Đồng CNTT Pveser
bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> only">40% Complete (success)</span>
bar progress-bar-info" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> only">20% Complete</span>
bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> only">60% Complete (warning)</span>
bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> only">80% Complete (danger)</span>
bar progress-bar-success progress-bar-striped" valuenow="40" aria-valuemin="0" aria-valuemax="100"
only">40% Complete (success)</span>
bar progress-bar-info progress-bar-striped" valuenow="20" aria-valuemin="0" aria-valuemax="100"
only">20% Complete</span>
ng CNTT Pveser
valuemax="100"
valuemax="100"
Ebook Bootstrap 3 Tiếng Việt V1.0 </div> </div> <div class="progress"> <div class="progress-bar progressrole="progressbar" aria-valuenow="60" ariastyle="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progressrole="progressbar" aria-valuenow="80" ariastyle="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
<div class="progress"> <div class="progress-bar progress <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progressstyle="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress <span class="sr-only">10% Complete (danger)</span> </div> </div>
4. Progress Bar hiệu ứng động
<div class="progress"> <div class="progress-bar progressvaluenow="45" aria-valuemin="0" aria <span class="sr-only">45% Complete </div> </div>
Cộng Đồng CNTT Pveser
bar progress-bar-warning progress-bar-striped" valuenow="60" aria-valuemin="0" aria-valuemax="100"
only">60% Complete (warning)</span>
bar progress-bar-danger progress-bar-striped" valuenow="80" aria-valuemin="0" aria-valuemax="100"
only">80% Complete (danger)</span>
bar progress-bar-success" style="width: 35%"> only">35% Complete (success)</span>
r progress-bar-warning progress-bar-striped"
only">20% Complete (warning)</span>
bar progress-bar-danger" style="width: 10%"> only">10% Complete (danger)</span>
bar progress-bar-striped active" role="progressbar" ariavaluemin="0" aria-valuemax="100" style="width: 45%"> only">45% Complete</span>
ng CNTT Pveser
valuemax="100"
valuemax="100"
striped active" role="progressbar" aria-
Ebook Bootstrap 3 Tiếng Việt V1.0
XI. List Group
1. Kiểu mặc định
<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li></ul>
2. List Group với Badges
<ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio </li> </ul>
Cộng Đồng CNTT Pveser
item">Cras justo odio</li> item">Dapibus ac facilisis in</li> item">Morbi leo risus</li> item">Porta ac consectetur ac</li> item">Vestibulum at eros</li>
ng CNTT Pveser
Ebook Bootstrap 3 Tiếng Việt V1.0
3. Link Item
<div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a></div>
4. Vô hiệu hóa
<div class="list-group"> <a href="#" class="list-group-item disabled"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a></div>
Cộng Đồng CNTT Pveser
item active">
item">Dapibus ac facilisis in</a> item">Morbi leo risus</a> item">Porta ac consectetur ac</a> item">Vestibulum at eros</a>
item disabled">
tem">Dapibus ac facilisis in</a> item">Morbi leo risus</a> item">Porta ac consectetur ac</a> item">Vestibulum at eros</a>
ng CNTT Pveser
Ebook Bootstrap 3 Tiếng Việt V1.0
5. Kiểu list group
<ul class="list-group"> <li class="list-group-item list-in</li> <li class="list-group-item list-libero</li> <li class="list-group-item list-ac</li> <li class="list-group-item list-</ul> <div class="list-group"> <a href="#" class="list-group-item listfacilisis in</a> <a href="#" class="list-group-item listlibero</a> <a href="#" class="list-group-item listconsectetur ac</a> <a href="#" class="list-group-item listeros</a> </div>
6. Tùy biến nội dung
<div class="list-group">
Cộng Đồng CNTT Pveser
-group-item-success">Dapibus ac facilisis
-group-item-info">Cras sit amet nibh
-group-item-warning">Porta ac consectetur
-group-item-danger">Vestibulum at eros</li>
item list-group-item-success">Dapibus ac
item list-group-item-info">Cras sit amet nibh
item list-group-item-warning">Porta ac
item list-group-item-danger">Vestibulum at
ng CNTT Pveser
success">Dapibus ac facilisis
warning">Porta ac consectetur
danger">Vestibulum at eros</li>
info">Cras sit amet nibh
danger">Vestibulum at
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
33 http://giaotrinhcntt.com
<a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">...</p> </a> </div>
Chương IV: Phương pháp học Bootstrap Có nhiều bạn hỏi tôi học Bootstrap như thế nào cho hiệu quả? Và nên bắt đầu từ đâu? v Bước 01: Học HTML – CSS căn bản
Bootstrap là Front-end Framework nên để bắt đầu làm việc với Bootstrap bạn cần có kiến thức căn bản về HTML – CSS. Vì Bootstrap không thay thế HTML – CSS, mà nó giúp việc thiết kế giao diện nhanh hơn, linh hoạt hơn. Một số địa chỉ học HTML – CSS: ð Tiếng Anh: http://www.w3schools.com ð Tiếng Việt:
o http://hocwebchuan.com o http://izwebz.com
v Bước 02: Tham khảo 1 số giao diện mẫu trên Bootstrap
Việc tham khảo các giao diện mẫu được viết bằng Bootstrap để xem cách sử dụng Bootstrap để dựng giao diện như thế nào? Cấu trúc các tags, class được bố trí như thế nào? Vì từ lý thuyết cơ bản đến dựng 1 giao diện là 1 khoảng cách rất xa và gian nan Giao diện mẫu Bootstrap: http://getbootstrap.com/getting-started/#examples v Bước 03: Tìm 1 giao diện thực tế để thiết kế
Trong học lập trình, không gì hiệu quả bằng việc làm 1 dự án thực tế. Thay vì chỉ đọc lý thuyết từ đầu đến cuối, bạn hãy tìm cho mình 1 giao diện thực tế rồi tiến hành dựng nó trên nền tảng Bootstrap. v Bước 04: Đọc Bootstrap cơ bản để thực hiện dự án
Sau khi đã chọn được giao diện thực tế để thiết kế, bạn hãy đọc tài liệu về Bootstrap cơ bản để hoàn thành dự án.
Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveser
34 http://giaotrinhcntt.com
Chú ý: Với kinh nghiệm của tôi thì khi học Framework, tuyệt đối không nên nhớ các cú pháp của nó. Sức mạnh của Framework chính là bộ tài liệu trên trang chủ của Framework. Còn các tài liệu khác chỉ là để tham khảo. Đầy đủ nhất là tài liệu từ website chính thức. ð Đây là phiên bản đầu tiên của Ebook Bootstrap 3 Tiếng Việt. Tôi sẽ liên tiếp nâng cấp
những phiên bản tiếp theo để nâng cao giá trị của Ebook. Tôi rất mong nhận được sự góp ý của các bạn để Ebook được hoàn thiện hơn
ð Mọi thắc mắc về Bootstrap, các bạn có thể hỏi tôi tại: http://ask.fm/friendntt10 Cộng Đồng Pveser rất hân hạnh được đồng hành cùng các bạn yêu thích CNTT.