Bootstrap Project A-Z 02 – Giới thiệu về Bootstrap (P2)

0
540

[ VIDEO TUT ]

Bấm Subscribe Nhận video học mới nhất :

Chú ý: Các bạn lựa chọn video ở chế độ 720HD để xem được chất lượng hình ảnh và âm thanh tốt nhất nhé.

1. Cách sử dụng Bootstrap

Ở bài học bootstrap trước, tôi đã hướng dẫn các bạn cách cài đặt Bootstrap. Bây giờ tôi sẽ hướng dẫn các bạn cách để sử dụng Bootstrap.

Như đã nói, Bootstrap là một bộ thư viện CSS đã được dựng sẵn, muốn sử dụng các bạn chỉ cần gọi đúng tên class và đặt vào đúng chỗ.

Ở ví dụ sau tôi sẽ tạo ra 2 nút bấm, 1 nút bấm chưa được CSS và 1 nút sử dụng 2 class được dựng sẵn của Bootstrap là “btn” và “btn-danger

 

Thu được kết quả:

2

Rất nhanh chóng ta thu được một nút bấm rất đẹp mà nếu phải tự CSS thì sẽ mất thời gian.

Trong Bootstrap có 2 class rất quan trọng là “.container” và “.container-fluid“. Class “.container” cho ta một màn hình có chiều rộng 1170px và nằm ngay giữa màn hình. Class “.container-fluid” cho ta một trang web có chiều rộng toàn màn hình.

Các bạn có thể tìm hiểu thêm về các class của Bootstrap tại : http://www.w3schools.com/bootstrap/default.asp

2. Hệ thống lưới trong Bootstrap (Grid System)

Khi chúng ta xây dựng  giao diện bằng HTML – CSS, chúng ta  muốn tạo nhiều khối nằm ngang hàng với nhau thì ta thường dùng đến thuộc tính float trong CSS.

Với Bootstrap, ta 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” hoặc “.container-fluid“.

Ví dụ:

 

Một website sẽ được chia ra làm nhiều hàng (row) và mỗi hàng lại được chia làm một hoặc nhiều cột (col). Qua ví dụ trên ta có thể thấy cách sử dụng hệ thống lưới của Bootstrap

Cú pháp: col-a-b với:

  • a: là kí hiệu của thiết bị
  • b: số cột nó chiếm (trong 12 cột)
Di động (<768px)Máy tính bảng (>=768px)Desktop (>=992px)Desktop lớn (>1200px)
Class.col-xs-b.col-sm-b.col-md-b.col-lg-b

 

Ví dụ: chia trang web làm 4 hàng.

học bootstrap

Chính nhờ việc chia màn hình như vậy đã giúp lập trình viên không còn đau đầu trong vấn đề làm giao diện của mình tương thích trên mọi thiết bị nữa.

Cảm ơn các bạn đã theo dõi bài viết của mình. Ở bài viết sau mình sẽ hướng dẫn cho các bạn cách cắt layout từ file PSD của designer thiết kế. Hẹn gặp lại các bạn.

[ SOURCE CODE ]

  • Code mẫu của bài viết này, các bạn vui lòng download ở đây Source code.

Xem thêm các bài học bootstrap tiếp theo:

Tác giả: Đạt Nguyễn Vietpro

 

[Total: 1    Average: 4/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here