some text bản here.
12.2 BOOSTRAP GRIDS Hệ thống grid (lưới) Bootstrap cho phép tạo cột trang Số lượng cột lên đến 12 Nếu khơng muốn dùng hết 12 cột, ta gom nhóm số cột để tạo thành cột có chiều rộng lớn Hệ thống lưới Bootstrap có tính responsive, nghĩa cột tự động điều chỉnh hợp lý tuỳ thuộc vào kích thước hình thiết bị Hình 12.1 minh họa cột có kích thước khác hệ thống Bootstrap grid Hình 12.1 - Các cột có kích thước khác hệ thống Bootstrap grid Hệ thống Boostrap grid có lớp: xs – dùng cho điện thoại sm – dùng cho máy tính bảng md – dùng cho desktop lg – dùng cho desktop với hình có kích thước lớn 123 Các lớp kết hợp lại để tạo cách bố trí linh động Để tạo grid cho thiết bị đó, ta sử dụng công thức sau: Trong đó: Dùng để tạo dive span dòng Dùng để tạo dive span [number] cột (xem thêm Hình 12.1) Ví dụ, để tạo bảng có dịng cột, ta viết sau: .col-sm-4 .col-sm-4 .col-sm-4 Kết bảng sau: Để tạo bảng có cột (một cột kích thước cột kích thước 8), ta viết sau: .col-sm-4 .col-sm-8 Kết bảng sau: 124 12.3 BOOTSTRAP TABLE Bootstrap table có đường kẻ ngang (xem Hình 12.2) Ta dùng class table để thêm phần định dạng CSS Boostrap cho table Hình 12.2 - Bootstrap table Ta dùng lớp table-striped để thêm đường sọc vào bảng Hình 12.3 Hình 12.3 - Bảng với lớp table-striped Ngồi ra, Bootstrap cịn cung cấp thêm nhiều lớp phép tạo bảng với nhiều kiểu khác Bạn đọc tự tìm hiểu thêm lớp sau: Lớp table-bordered tạo border cho ô bảng Lớp table-hover cho phép tạo trạng thái hover cho dòng bảng Lớp table-responsive tạo responsive table (bảng có cuộn hiển thị thiết bị có kích thước nhỏ) 12.4 BOOTSTRAP FORM Các form control tự động kế thừa style toàn cục từ Bootstrap: tất phần tử nhập văn , với lớp form-control có độ rộng 100% Bootstrap cung cấp loại form layout: vertical form (mặc định, xem Hình 12.4), horizontal form (Hình 12.6) inline form (Hình 12.5) Đối với inline form, tất phần tử inline, lề trái (left-aligned), label control thẳng hàng (ngang) Đối với horizontal form, ta cần thêm lớp form125 horizontal vào phần tử ; đồng thời thêm lớp control-label vào phần tử Khi sử dụng Bootstrap, cần tuân thủ luật sau: Luôn dùng Điều giúp tạo thuận lợi cho người cần phải dùng đến trợ giúp chức đọc hình Bọc label control vào Điều giúp tối ưu hóa khơng gian hình Thêm lớp form-control vào phần tử , Hình 12.4 – Vertical form Hình 12.5 - Inline form Hình 12.6 - Horizontal form 126 TÀI LIỆU THAM KHẢO Hans Bergsten (2002), JavaServer Pages (2nd edi.), O’Reilly Hall, M., & Brown, L (2003), Core Servet and JSP (Vol.1, 2nd ed.), Prentice Hall Turner, D (2009), Java Web Programming with Eclipse https://javabrains.io http://www.w3schools.com/ 127 GIÁO TRÌNH NHÀ XUẤT BẢN LẬP TRÌNH WEB VỚI ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH SERVLET VÀ JSP Khu phố 6, Phường Linh Trung, Quận Thủ Đức, TP Hồ Chí Minh TS ĐẶNG THANH DŨNG Dãy C, số 10-12 Đinh Tiên Hoàng, Phường Bến Nghé, Quận 1, TP Hồ Chí Minh ĐT: 862726361 - 862726390 E-mail: vnuhp@vnuhcm.edu.vn PHÒNG PHÁT HÀNH Dãy C, số 10-12 Đinh Tiên Hồng, Phường Bến Nghé, Quận 1, TP Hồ Chí Minh ĐT: 862726361 - 862726390 Website: www.nxbdhqghcm.edu.vn Nhà xuất ĐHQG-HCM tác giả/đối tác liên kết giữ quyền© Copyright © by VNU-HCM Publishing House and author/copartnership All rights reserved TRUNG TÂM SÁCH ĐẠI HỌC Dãy C, số 10-12 Đinh Tiên Hồng, Phường Bến Nghé, Quận 1, TP Hồ Chí Minh ĐT: 8362726350 - 0942810361 Website: www.nxbdhqghcm.edu.vn Chịu trách nhiệm xuất bản: NGUYỄN HOÀNG DŨNG Chịu trách nhiệm nội dung: NGUYỄN HOÀNG DŨNG Tổ chức thảo chịu trách nhiệm tác quyền TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH Số lượng 300 cuốn, Khổ: 16x24 cm, ĐKKHXB số: 1966-2016/CXBIPH/ 10-125/ĐHQGTPHCM, Quyết định XB số: 166/QĐ NXB ĐHQG-HCM cấp ngày 11-07-2016 In tại: Cty TNHH In Bao bì Hưng Phú Địa chỉ: 162A/1 KP1A, P An Phú, TX Thuận An, Tỉnh Bình Dương Nộp lưu chiểu: Quý III năm 2016 Biên tập: TRẦN THỊ ĐỨC LINH Sửa in: ÁI NHẬT Trình bày bìa: TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH GIÁO TRÌNH LẬP TRÌNH WEB VỚI SERVLET VÀ JSP NXB ĐHQG-HCM Xuất năm 2016 ISBN: 978-604-73-4407-9 Giáo trình LẬP TRÌNH WEB VỚI SERVLET VÀ JSP TS ĐẶNG THANH DŨNG Bản tiếng Việt ©, TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH, NXB ĐHQGHCM TÁC GIẢ Bản quyền tác phẩm bảo hộ Luật xuất Luật Sở hữu trí tuệ Việt Nam Nghiêm cấm hình thức xuất bản, chụp, phát tán nội dung chưa có đồng ý tác giả Nhà xuất ĐỂ CÓ SÁCH HAY, CẦN CHUNG TAY BẢO VỆ TÁC QUYỀN! ISBN: 978-604-73-4407-9 786047 344079 ...TS Đặng Thanh Dũng Giáo trình LẬP TRÌNH WEB VỚI SERVLET VÀ JSP NHÀ XUẤT BẢN ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH – 2016 LỜI NĨI ĐẦU Với phát triển mạnh mẽ công nghệ web số lượng ứng dụng web, ... http://localhost /servlet/ HelloServlet 58 Hình 5.3 - Kết http://localhost /servlet/ coreservlets.HelloServlet2 60 Hình 5.4 - Kết http://localhost /servlet/ coreservlets.HelloServlet3 62 Hình 5.5 - Kết servlet. .. 5.2 - HelloWorld.Java 56 Bảng 5.3 - HelloServlet.java 58 Bảng 5.4 - coreservlets/HelloServlet2.java 59 Bảng 5.5 - Cấu trúc file HTML 60 Bảng 5.6 - coreservlets/ServletUtilities.java