Bootstrap và những điều cơ bản cần biết trong giao diện web

. Câu hỏi đầu tiên, bootstrap là gì?

• Bootstrap đơn giản là một bộ khung để phát triển phần giao diện của website. Nhưng ngoài ra, nói một cách tối giản hơn nữa thì bootstrap là 1 file css.

• Vậy file css này có những gì?

  • Đó là nó quy định sẵn các Class, quy định các thuộc tính về giao diện như kích thước, màu sắc, độ rộng, độ cao.
  • Ngoài ra, còn sử dụng bootstrap để responsive cho giao diện của từng màn hình.

Lý do vì sao chúng ta sử dụng bootstrap?

. Dễ thấy là nếu có bootstrap thì việc cắt web sẽ trở nên nhanh và công nghiệp hơn vì đã có chuẩn chung và thường các giao diện đều chung bố cục như vậy.

. Tối ưu hóa công việc cắt web hay nói ngắn gọn là làm bớt công việc chân tay cho người làm giao diện(cắt html/css).

Khi nào thì chúng ta sử dụng bootstrap?

. Đầu tiên, đương nhiên là chuyển từ psd sang html/css.

. Khi làm hiệu ứng cho trang web (các hiệu ứng đơn giản có sẵn của bootstrap như )

Từ đây, chúng ta có thể thấy nếu muốn học được bootstrap thì cần phải hiểu các khái niệm căn bản hơn nữa như HTML CSS là gì?

. Nói đơn giản, HTML là ngôn ngữ dùng để mô tả trang web. Trong việc thiết kế web, nó để mô tả nội dung của trang web. Ví dụ gồm các thẻ h1, p, span, i, section, .... Muốn tìm hiểu thêm về HTMl các bạn có thể xem thêm ở đây

. Css là thuộc tính đi cùng với HTMl để qui định các thuộc tính hiển thị của website (ví dụ: để font chữ to lên ta tăng font-size, để tăng độ chiều rộng của div ta tăng width của nó lên) và cũng có thể tìm hiểu thêm ở w3schools.

. Css2 thông thường bao gồm các thuộc tính cơ bản

. Css3 sẽ có thêm các thuộc tính lên quan đến chuyển đông, quay, zoom, ...

Vậy, chúng ta sử dụng bootstrap như nào?

. Trước đó, chúng ta cần biết học bootstrap như thế nào? Vì bootstrap là 1 file css chứa các mã css được định nghĩa dưới các class được quy định sẵn của bootstrap nên để học bootstrap, các bạn cần học thuộc các thuộc tính css, các thẻ của html và các class để có thể viết nhanh.

. Tất nhiên, các bạn có thể không học thuộc cũng được. Khi đó, bạn có thể tra cứu ở w3schools hoặc bootstrap.

. Trong bootstrap sẽ có 4 loại màn hình chính

• Đầu tiên là màn hình xs dành cho điện thoại
• Tiếp đến là màn hình sm dành cho tablets
• Sau đấy là màn hình md dành cho máy tính
• Cuối cùng là màn hình lg dành cho màn hình lớn widescreens

. Tất cả các loại màn hình này đều chung 1 đặc điểm là được chia thành 12 phần của lưới căn chỉnh

Tất nhiên, để nói về bootstrap và giao diện web còn rất nhiều thứ nhưng trên đây là một số các điều cơ bản mà mình tìm hiểu được.

Mình cũng mới tìm hiểu về vấn đề này nên còn nhiều thiếu xót, mong các bạn góp ý cho bài viết thêm bổ ích.

Cảm ơn mọi người đã theo dõi.