Tài liệu Bootstrap 3.0 Tiếng Việt

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 26IX. Alert trong Bootstrap 26X. Thanh tiến trình (Progress bars) 27XI. List Group 30Chương IV: Phương pháp học Bootstrap 33Ebook Bootstrap 3 Tiếng Việt V1.0 Cộng Đồng CNTT Pveserhttp://giaotrinhcntt.comLỜI NÓI ĐẦUCá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ôicù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 Pveserhttp://giaotrinhcntt.comChương I: Tổng quan về BoostrapI. 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 ứngdụ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ìnhthứ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: Bootstrap3.3.4- Trang chủ Boostrap: http://getboostrap.comII. 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ẩmmỹ không có gì phải bàn cãi2. Hỗ trợ trình duyệt: Boostrap được hỗ trợ bởi tất cả các trình duyệt phổ biến3. 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ớiBootstrap 1 cách đơn giản4. Responsive Web Design: Từ phiên bản 3, Bootstrap đã có sẵn Responsive WebDesign để 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 – CSS6. Hiện đại: Bootstrap được thiết kế phù hợp với xu hướng công nghệ thiết kế webIII. Quy trình sử dụng Bootstrap1. 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.comEbook Bootstrap 3 Tiếng Việt V1.0- Bước 2:Nhúng CSS, Javascript cKhi download Boostrap về, bạn sẽ thấy cTrong 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ụcCộng Đồng CNTT PveserNhúng CSS, Javascript của Bootstrap vào HTMLy 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.cssjs, bootstrap.min.jsng CNTT Pveserng file sau đây:Ebook Bootstrap 3 Tiếng Việt V1.0Trong đó: bootstrap.css vàbootstrap.min.cssbootstrap.min.js cũng như vậyVậ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 bdàng hơn trong thiết kếKhi upload lên server thì dùng bootstrap.min.css và bootstrap.min.jswebsite load không bị chTiếp theo, các bạn nhúng file CSS, JS vào HTML theo cú pháp sau:Chú ý: File jquery.min.js download tại jquery.com

…Nhưng tôi khuyên các bạn nên chuyển h