Thiết kế giao diện Website tương thích với mọi thiết bị bằng Bootstrap CSS FrameWork

Bootstrap là một bộ mã nguồn mở bằng CSS và JavaScript được dùng để thiết lập giao diện Website. Bootstrap được tạo ra để làm việc với tất cả các mức độ kỹ năng khác nhau của lập trình viên, tất cả các thiết bị khác nhau, và các mức độ dự án khác nhau.

Giao diện Website Trường Cao đẳng Sư phạm Yên bái được thiết kế bằng Bootstrap

- Bộ tiền xử lý: Ngoài vanilla CSS, Bootstrap còn hỗ trợ hai bộ tiền xử lý CSS phổ biến nhất là Less và Sass.

- Một framework, mọi thiết bị: Bootstrap dễ dàng tích hợp và hiệu quả với quy mô dự án của bạn, Với một bộ mã nguồn căn bản, từ mobile đến tablet đến desktop.

- Tài liệu đầy đủ: Với Bootstrap, bạn sẽ có được tài liệu phong phú và trong sáng với hàng trăm ví dụ, code mẫu, và nhiều hơn nữa.

Mặc định, Bootstrap được thiết lập ở dạng Responsive tương thích với tất cả các thiết bị từ di động đến Desktop. Đặc biệt nó được xây dựng tương thích với tất cả các trình duyệt cũ đến mới (Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt).

Để bắt đầu, bạn cần Download gói Bootstrap trên trang chính thức tại địa chỉ: http://getbootstrap.com. Ở đây, bạn nên download về gói Bootstrap đã biên dịch bao gồm các thành phần như hình dưới đây:

 

Đặt gói này vào thư mục chứa Website của bạn (bao gồm 3 thư mục con là css, js và fonts.

Tiếp đó, xây dựng trang index.html đưa hai file css và hai file javascript vào Website với phương thức như sau:

- Hai file bootstrap.min.css và bootstrap-theme.min.css đặt ở giữa hai thẻ <head></head>

- Hai file bootstrap.js và file jquery (file này Download từ trang Web chính thức của Jquery) được đặt ở cuối trang.

Để đảm bảo việc render và "chạm phóng to", chúng ta cần thêm thẻ meta viewport vào <head>:

       <meta name="viewport" content="width=device-width, initial-scale=1">

 

Chi tiết, để bắt đầu làm việc với Bootstrap bạn có một thiết lập cho trang index.html đơn giản như sau:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động

Tiếp đó là các thiết lập từng thành phần cho giao diện cho Website theo các tài liệu hướng dẫn trên trang Bootstrap.com . Chúc các bạn thành công!


Xem thêm: