Bài giảng Thiết kế layout web với CSS Framework
Nội dung tài liệu
Tải xuống
Link tài liệu:
Các tài liệu liên quan
Có thể bạn quan tâm
Thông tin tài liệu
BÀI 1. TỔNG QUAN VỀ BOOTSTRAP FRAMEWORK
1. Giới thiệu Bootstrap Framework
Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap.
Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay
để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị
khác như máy tính bảng, laptop,….
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter.
Bản bootstrap mới nhất bây giờ là bootstrap 4.
Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí
và tự do sử dụng.
Ví dụ: Muốn tạo 1 nút (Button)
Kết quả:
Sử dụng Bootstrap:
Kết quả:
* Tại sao nên sử dụng Bootstrap:
Dễ dàng thao tác: Cơ chế hoạt động của Bootstrap là dựa trên xu hướng
mã nguồn mở HTML, CSS và Javascript. Người dùng cần trang bị kiến
thức cơ bản 3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh
đó, các mã nguồn này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.
Tùy chỉnh dễ dàng: Bootstrap được tạo ra từ các mã nguồn mở cho phép
designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử
phù hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết
kiệm dung lượng vì không cần tải mã nguồn về máy.
Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là sáng tạo của các lập
trình viên giỏi trên khắp thế giới. Bootstrap đã được nghiên cứu và thử
nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử
dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên
những sản phẩm với chất lượng tốt nhất.
Độ tương thích cao: Bootstrap tương thích với mọi trình duyệt và nền tảng
bởi Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện
trên thiết bị di động hơn. Bootstrap có khả năng tự động điều chỉnh kích
thước trang website theo khung browser. Mục đích để phù hợp với màn
hình của máy tính để bàn, tablet hay laptop.
Cấu trúc và tính năng của Bootstrap: Bootstrap chứa các tập tin
JavaScript, CSS và fonts đã được biên dịch và nén lại. Ngoài ra, Bootstrap được
thiết kế dưới dạng các mô-đun. Do đó, dễ dàng tích hợp với hầu hết các mã
nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến
nhiều chức năng nổi bật.
Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” các
thành tố dùng để tạo nên giao diện của một website hoàn chỉnh như font,
typography, form, table, grid…
Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải
xuống và sử dụng nó tại trang web của khung.
Tái sử dụng các thành phần lặp đi lặp lại trên trang web.
Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính
năng trong quá trình lập trình web của 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 và tăng tốc độ tải trang..
2. Download và sử dụng Bootstrap
Có hai cách phổ biến để tải Bootstrap về web của bạn:
Tải trực tiếp từ trang cung cấp Bootstrap: Sau khi tải và 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 trong nhóm Compiled CSS and JS
Bước 4: Giải nén file tải về, trong đó chứa 2 thư mục css và js
Bước 5: Tạo thư mục chứa dự án web rồi copy 2 thư mục css và js vào
thư mục của dự án.
duAnWe
b
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 được vào thư mục js của dự án web, khi đó trong thư mục js ta có:
Bước 7: Nhúng css và js vào file index.html theo cú pháp:
Cách 2: Nhúng Bootstrap từ CDN:
Để sử dụng Bootstrap 4, các bạn cần nhúng các 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
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
Định dạng file mẫu:
Lưu ý: Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text:
Bootstrap autocomplete
Bootstrap Snipets
Cách cài đặt:
Preferences/Package Control/Install Package
Lần lượt chọn Bootstrap autocomplete và Bootstrap Snipets để cài đặt
BÀI 2: CSS TRONG BOOTSTRAP
1. Hệ thống lưới
Containers: Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội
dung của nó bên trong một .container. Container thiết lập thuộc tính width trên
tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống
lưới của chúng tôi. Lưu ý rằng, do padding và chiều rộng cố định nên container
mặc định không thể bị lồng.
Sử dụng class .container cho một 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, bằng chiều
rộng khung nhìn của bạn.
Hệ thống lưới: Bootstrap chứa một hệ thống lưới responsive, tương thích
với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương
thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class
được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một
bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..
Giới thiệu
Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các
chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của
Bootstrap hoạt động:
Các hàng được đặt bên trong một .container (fixed-width)
hoặc .container-fluid (full-width) để căn chỉnh và thiết lập padding một cách
thích hợp.
Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là
phần tử con trực tiếp của các hàng.
Các class được định nghĩa trước như .row và .col-xs-4 luôn sẵn có để
dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử
dụng để tạo ra các bố cục ngữ nghĩa.
Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng
padding. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong
các hàng do giá trị margin âm trên các .row.
Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn
sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng
bằng nhau, bạn hãy sử dụng 3 class .col-xs-4.
Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của
bạn.
Media query: Chúng tôi sử dụng các media query sau trong các tập tin
Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng
tôi.
Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các
media query này bằng cách thêm thuộc tính max-width.
Các tùy chọn của lưới: Hãy xem hệ thống lưới của Bootstrap hoạt động
như thế nào trên các thiết bị trong bảng sau.
Ví dụ: Chồng theo hàng ngang
Sử dụng một tập hợp các class .col-md-*, bạn có thể tạo ra một hệ thống lưới cơ
bản. Hệ thống này sẽ hiển thị chồng lên nhau trên các thiết bị di động và tablet
(kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy
tính (kích thước trung bình). Hãy đặt các cột của lưới vào bên trong các .row.
Ví dụ: Fluid container
Chuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width
bằng cách thay đổi .container ngoài cùng thành .container-fluid.
...
Ví dụ: Điện thoại di động và máy tính để bàn
Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có
màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu
nhỏ và trung bình bằng cách thêm .col-xs-* .col-md-* vào các cột của bạn. Hãy
xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.
Ví dụ: Điện thoại, máy tính bảng, máy tính để bàn
Bạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class
dành cho máy tính bảng .col-sm-*.
Reset cột responsive
Khi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống
lưới, bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể
sẽ có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử
dụng một class .clearfix cùng với các class responsive tiện ích của chúng tôi.
Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset
offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn.
Di chuyển cột: Di chuyển cột sang phía bên phải bằng cách sử dụng các
class .col-md-offset-*. Các class này làm tăng khoảng lề trái (margin-left) của
một cột lên bằng * cột. Ví dụ, .col-md-offset-4 dịch .col-md-4 sang bên phải một
khoảng cách bằng 4 lần chiều rộng của một cột.
Các cột lồng nhau
Để tạo ra các cột lồng nhau, Hãy thêm một .row mới và một tập các cột .col-md* bên trong cột .col-md-* đã tồn tại. Các hàng nằm bên trong có thể chứa một
tập hợp các cột, tối đa là 12 hoặc ít hơn.
Level 1: .col-md-9
Level 2: .col-md-6
1. Giới thiệu Bootstrap Framework
Bootstrap 4 (viết tắt là BS4), là phiên bản mới nhất của Bootstrap.
Bootstrap là framework HTML, CSS và Javascript phổ biến nhất hiện nay
để thiết kế website có thể đáp ứng trên tất cả các nền tảng di động và các thiết bị
khác như máy tính bảng, laptop,….
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter.
Bản bootstrap mới nhất bây giờ là bootstrap 4.
Tương tự như Bootstrap 3 phiên bản cũ, Bootstrap 4 hoàn toàn miễn phí
và tự do sử dụng.
Ví dụ: Muốn tạo 1 nút (Button)
Kết quả:
Sử dụng Bootstrap:
Kết quả:
* Tại sao nên sử dụng Bootstrap:
Dễ dàng thao tác: Cơ chế hoạt động của Bootstrap là dựa trên xu hướng
mã nguồn mở HTML, CSS và Javascript. Người dùng cần trang bị kiến
thức cơ bản 3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh
đó, các mã nguồn này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.
Tùy chỉnh dễ dàng: Bootstrap được tạo ra từ các mã nguồn mở cho phép
designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử
phù hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết
kiệm dung lượng vì không cần tải mã nguồn về máy.
Chất lượng sản phẩm đầu ra hoàn hảo: Bootstrap là sáng tạo của các lập
trình viên giỏi trên khắp thế giới. Bootstrap đã được nghiên cứu và thử
nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử
dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên
những sản phẩm với chất lượng tốt nhất.
Độ tương thích cao: Bootstrap tương thích với mọi trình duyệt và nền tảng
bởi Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện
trên thiết bị di động hơn. Bootstrap có khả năng tự động điều chỉnh kích
thước trang website theo khung browser. Mục đích để phù hợp với màn
hình của máy tính để bàn, tablet hay laptop.
Cấu trúc và tính năng của Bootstrap: Bootstrap chứa các tập tin
JavaScript, CSS và fonts đã được biên dịch và nén lại. Ngoài ra, Bootstrap được
thiết kế dưới dạng các mô-đun. Do đó, dễ dàng tích hợp với hầu hết các mã
nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến
nhiều chức năng nổi bật.
Bootstrap cho phép người dùng truy cập vào thư viện “khổng lồ” các
thành tố dùng để tạo nên giao diện của một website hoàn chỉnh như font,
typography, form, table, grid…
Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải
xuống và sử dụng nó tại trang web của khung.
Tái sử dụng các thành phần lặp đi lặp lại trên trang web.
Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính
năng trong quá trình lập trình web của 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 và tăng tốc độ tải trang..
2. Download và sử dụng Bootstrap
Có hai cách phổ biến để tải Bootstrap về web của bạn:
Tải trực tiếp từ trang cung cấp Bootstrap: Sau khi tải và 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 trong nhóm Compiled CSS and JS
Bước 4: Giải nén file tải về, trong đó chứa 2 thư mục css và js
Bước 5: Tạo thư mục chứa dự án web rồi copy 2 thư mục css và js vào
thư mục của dự án.
duAnWe
b
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 được vào thư mục js của dự án web, khi đó trong thư mục js ta có:
Bước 7: Nhúng css và js vào file index.html theo cú pháp:
Cách 2: Nhúng Bootstrap từ CDN:
Để sử dụng Bootstrap 4, các bạn cần nhúng các 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
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
Định dạng file mẫu:
Lưu ý: Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text:
Bootstrap autocomplete
Bootstrap Snipets
Cách cài đặt:
Preferences/Package Control/Install Package
Lần lượt chọn Bootstrap autocomplete và Bootstrap Snipets để cài đặt
BÀI 2: CSS TRONG BOOTSTRAP
1. Hệ thống lưới
Containers: Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội
dung của nó bên trong một .container. Container thiết lập thuộc tính width trên
tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống
lưới của chúng tôi. Lưu ý rằng, do padding và chiều rộng cố định nên container
mặc định không thể bị lồng.
Sử dụng class .container cho một 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, bằng chiều
rộng khung nhìn của bạn.
...
Hệ thống lưới: Bootstrap chứa một hệ thống lưới responsive, tương thích
với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương
thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class
được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một
bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..
Giới thiệu
Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các
chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của
Bootstrap hoạt động:
Các hàng được đặt bên trong một .container (fixed-width)
hoặc .container-fluid (full-width) để căn chỉnh và thiết lập padding một cách
thích hợp.
Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là
phần tử con trực tiếp của các hàng.
Các class được định nghĩa trước như .row và .col-xs-4 luôn sẵn có để
dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử
dụng để tạo ra các bố cục ngữ nghĩa.
Các cột tạo nên các gutter (khoảng trắng nằm giữa nội dung cột) bằng
padding. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong
các hàng do giá trị margin âm trên các .row.
Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn
sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng
bằng nhau, bạn hãy sử dụng 3 class .col-xs-4.
Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của
bạn.
Media query: Chúng tôi sử dụng các media query sau trong các tập tin
Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng
tôi.
Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các
media query này bằng cách thêm thuộc tính max-width.
Các tùy chọn của lưới: Hãy xem hệ thống lưới của Bootstrap hoạt động
như thế nào trên các thiết bị trong bảng sau.
Ví dụ: Chồng theo hàng ngang
Sử dụng một tập hợp các class .col-md-*, bạn có thể tạo ra một hệ thống lưới cơ
bản. Hệ thống này sẽ hiển thị chồng lên nhau trên các thiết bị di động và tablet
(kích thước nhỏ) trước khi hiển thị dưới dạng hàng ngang trên màn hình máy
tính (kích thước trung bình). Hãy đặt các cột của lưới vào bên trong các .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Ví dụ: Fluid container
Chuyển đổi bất kỳ một bố cục lưới fixed-width nào thành một bố cục full-width
bằng cách thay đổi .container ngoài cùng thành .container-fluid.
...
Ví dụ: Điện thoại di động và máy tính để bàn
Bạn không muốn các cột của bạn xếp chồng lên nhau trên các thiết bị có
màn hình nhỏ? Hãy sử dụng các class dành cho các thiết bị có màn hình siêu
nhỏ và trung bình bằng cách thêm .col-xs-* .col-md-* vào các cột của bạn. Hãy
xem ví dụ bên dưới để hiểu rõ hơn cách thức hoạt động.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Ví dụ: Điện thoại, máy tính bảng, máy tính để bàn
Bạn có thể tạo ra các bố cục cơ động hơn nữa bằng cách sử dụng các class
dành cho máy tính bảng .col-sm-*.
.col-xs-12
.col-sm-6
.col-sm-6
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Reset cột responsive
Khi sử dụng 4 bậc (tương ứng với 4 mốc kích thước của màn hình) của hệ thống
lưới, bạn sẽ gặp phải một vấn đề, đó là tại một mốc kích thước xác định, có thể
sẽ có một cột cao hơn các cột khác trong cùng một hàng. Để sửa lỗi này, hãy sử
dụng một class .clearfix cùng với các class responsive tiện ích của chúng tôi.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Ngoài việc clear các cột tại các mốc Responsive, có thể bạn cần thực hiện reset
offset, push, hooặc pull. Hãy tham khảo the grid example để hiểu rõ hơn.
.col-sm-5 .col-md-6
.col-sm5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.colsm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
Di chuyển cột: Di chuyển cột sang phía bên phải bằng cách sử dụng các
class .col-md-offset-*. Các class này làm tăng khoảng lề trái (margin-left) của
một cột lên bằng * cột. Ví dụ, .col-md-offset-4 dịch .col-md-4 sang bên phải một
khoảng cách bằng 4 lần chiều rộng của một cột.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Các cột lồng nhau
Để tạo ra các cột lồng nhau, Hãy thêm một .row mới và một tập các cột .col-md* bên trong cột .col-md-* đã tồn tại. Các hàng nằm bên trong có thể chứa một
tập hợp các cột, tối đa là 12 hoặc ít hơn.
Level 1: .col-md-9
Level 2: .col-md-6