Giáo trình Thiết kế layout web với CSS framework

BÀI TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK Giới thiệu Bootstrap Framework Bootstrap (viết tắt BS4), phiên Bootstrap Bootstrap framework HTML, CSS Javascript phổ biến để thiết kế website đáp ứng tất tảng di động thiết bị khác máy tính bảng, laptop,… Bootstrap phát triển Mark Otto Jacob Thornton Twitter Bản bootstrap bootstrap Tương tự Bootstrap phiên cũ, Bootstrap hồn tồn miễn phí tự sử dụng Ví dụ: Muốn tạo nút (Button) Kết quả: Sử dụng Bootstrap: Kết quả: * Tại nên sử dụng Bootstrap:  Dễ dàng thao tác: Cơ chế hoạt động Bootstrap dựa xu hướng mã nguồn mở HTML, CSS Javascript Người dùng cần trang bị kiến thức mã sử dụng Bootstrap hiệu Bên cạnh đó, mã nguồn dễ dàng thay đổi chỉnh sửa tùy ý  Tùy chỉnh dễ dàng: Bootstrap tạo từ mã nguồn mở cho phép designer linh hoạt Giờ lựa chọn thuộc tính, phần tử phù hợp với dự án họ theo đuổi CDN Boostrap giúp bạn tiết kiệm dung lượng khơng cần tải mã nguồn máy  Chất lượng sản phẩm đầu hồn hảo: Bootstrap sáng tạo lập trình viên giỏi khắp giới Bootstrap nghiên cứu thử nghiệm thiết bị Được kiểm tra nhiều lần trước đưa vào sử dụng Do đó, chọn Bootstrap, bạn tin tạo nên sản phẩm với chất lượng tốt  Độ tương thích cao: Bootstrap tương thích với trình duyệt tảng Bootstrap mặc định hỗ trợ Responsive ưu tiên cho giao diện thiết bị di động Bootstrap có khả tự động điều chỉnh kích thước trang website theo khung browser Mục đích để phù hợp với hình máy tính để bàn, tablet hay laptop Cấu trúc tính Bootstrap: Bootstrap chứa tập tin JavaScript, CSS fonts biên dịch nén lại Ngồi ra, Bootstrap thiết kế dạng mơ-đun Do đó, dễ dàng tích hợp với hầu hết mã nguồn mở WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức bật Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” thành tố dùng để tạo nên giao diện website hoàn chỉnh font, typography, form, table, grid… Bootstrap cho phép bạn tùy chỉnh framework website trước tải xuống sử dụng trang web khung Tái sử dụng thành phần lặp lặp lại trang web Bootstrap tích hợp jQuery Bạn cần khai báo xác tính trình lập trình web bạn Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu tượng tăng tốc độ tải trang Download sử dụng Bootstrap Có hai cách phổ biến để tải Bootstrap web bạn: Tải trực tiếp từ trang cung cấp Bootstrap: Sau tải nhúng vào dự án web, khơng cần có kết nối internet để hiển thị trang web bình thường Thơng qua CDN (Content Delivery Network) Bootstrap: Luôn cần kết nối đến CDN Cách 1: Tải trực tiếp từ trang cung cấp Bootstrap: Bước 1: Truy cập trang web https://getbootstrap.com/ Bước 2: Chọn Download Bước 3: Chọn Download nhóm Compiled CSS and JS Bước 4: Giải nén file tải về, chứa thư mục css js Bước 5: Tạo thư mục chứa dự án web copy thư mục css js vào thư mục dự án duAnWeb css js index.html Bước 6: Tải thư viện jQuery: Truy cập https://jquery.com/download/ Click chuột phải vào link tải jQuery chọn Save link As Lưu file nhận vào thư mục js dự án web, thư mục js ta có: Bước 7: Nhúng css js vào file index.html theo cú pháp: Cách 2: Nhúng Bootstrap từ CDN: Để sử dụng Bootstrap 4, bạn cần nhúng file thư viện sau: o bootstrap.min.css o jquery.min.js o popper.min.js o bootstrap.min.js Các link nhúng Boostrap từ CDN thường dùng Định dạng file mẫu: Lưu ý: Cài đặt plugin hỗ trợ viết code bootstrap sublime text:  Bootstrap autocomplete  Bootstrap Snipets Cách cài đặt: Preferences/Package Control/Install Package Lần lượt chọn Bootstrap autocomplete Bootstrap Snipets để cài đặt BÀI 2: CSS TRONG BOOTSTRAP Hệ thống lưới Containers: Dễ dàng nội dung trang cách bọc nội dung bên container Container thiết lập thuộc tính width tất kích thước áp dụng vào media query để tương thích với hệ thống lưới Lưu ý rằng, padding chiều rộng cố định nên container mặc định bị lồng Sử dụng class container cho container responsive có chiều rộng cố định Sử dụng class container-fluid cho container có chiều rộng tối đa, chiều rộng khung nhìn bạn Hệ thống lưới: Bootstrap chứa hệ thống lưới responsive, tương thích với hầu hết thiết bị di động Hệ thống chia thành 12 cột tương thích với kích thước khung nhìn thiết bị Nó bao gồm class định nghĩa trước để thuận tiện cho việc xây dựng bố cục, với mixin để tạo nhiều bố cục theo ngữ nghĩa Giới thiệu Các hệ thống lưới sử dụng để tạo bố cực cho trang chuỗi hàng cột chứa nội dung bạn Và cách hệ thống lưới Bootstrap hoạt động: Các hàng đặt bên container (fixed-width) container-fluid (full-width) để chỉnh thiết lập padding cách thích hợp Sử dụng hàng để tạo nhóm cột theo hàng ngang Nội dung cần phải đặt cột, có cột phần tử trực tiếp hàng Các class định nghĩa trước row col-xs-4 ln sẵn có để dựng lên bố cục lưới cách nhanh Một số mixin sử dụng để tạo bố cục ngữ nghĩa Các cột tạo nên gutter (khoảng trắng nằm nội dung cột) padding Giá trị padding độ lệch cột cột cuối hàng giá trị margin âm row Các cột lưới tạo cách định số cột mà bạn muốn sử dụng tổng số 12 cột Ví dụ, để tạo bố cục với cột có độ rộng nhau, bạn sử dụng class col-xs-4 Hãy xem ví dụ để biết cách áp dụng nguyên tắc vào code bạn Media query: Chúng sử dụng media query sau tập tin Less chúng tơi để tạo điểm mốc hệ thống lưới chúng tơi Để tương thích với số thiết bị, chúng tơi mở rộng media query cách thêm thuộc tính max-width ... diện website hoàn chỉnh font, typography, form, table, grid… Bootstrap cho phép bạn tùy chỉnh framework website trước tải xuống sử dụng trang web khung Tái sử dụng thành phần lặp lặp lại trang web. .. tương thích với hầu hết thiết bị di động Hệ thống chia thành 12 cột tương thích với kích thước khung nhìn thiết bị Nó bao gồm class định nghĩa trước để thuận tiện cho việc xây dựng bố cục, với mixin... thử nghiệm thiết bị Được kiểm tra nhiều lần trước đưa vào sử dụng Do đó, chọn Bootstrap, bạn tin tạo nên sản phẩm với chất lượng tốt  Độ tương thích cao: Bootstrap tương thích với trình duyệt