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

Chủ nhật - 24/02/2019 07:52
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.
Thiết kế giao diện Website tương thích với mọi thiết bị bằng Bootstrap CSS FrameWork

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.

giaodienwebsite zpshfac6sat

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>

<link<meta<meta<meta </link<></p><p><code border-radius:="" class="language-html" courier="" data-lang="html" font-size:="" padding:="" style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " white-space:=""><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><html< span=""><link< span=""><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><meta< span=""><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><meta< span=""><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><meta< span=""><span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"><link< span=""> <span class="nt" style="box-sizing: border-box; color: rgb(47, 111, 159);"></span> </link<></span></span></span></span></link<></html<></span></code></p><link< span=""><link< span=""><link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""></link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div>

<html<link<meta<meta<meta<link </link<></span></span></span></span></link<></html<></span></code></p><link< span=""><link< span=""><link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""></link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div></link<></html<></span></code></p><link< span=""><link< span=""><link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""></link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div></html<></span></code></p><link< span=""><link< span=""><link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""></link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div>

<link<link<link<meta<meta<meta

<link<meta<meta<meta</link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div>

<link <link<meta<meta<meta

<link<meta<meta<meta </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p><link< span=""><meta< span=""><meta< span=""><meta< span=""> </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div>

<link <link<meta<meta<meta

<link<meta<meta<meta </link<></p><link< span=""> <link< span=""><meta< span=""><meta< span=""><meta< span=""><p style="text-align: justify;"><img alt="" src="http://i937.photobucket.com/albums/ad212/dothanh1/website-didong_zpsavmrceul.jpg" style="text-align: center; width: 100%;" /></p><p style="text-align: center;"><em style="text-align: center;">Giao diện Website Trường Cao đẳng Sư phạm Yên Bái trên điện thoại di động</em></p><p style="text-align: justify;">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 <a href="http://getbootstrap.com/" target="_blank">Bootstrap.com</a> . Chúc các bạn thành công!</p></link<></link<></link<></link<></link<></link<></link<></link<></link<></div>

<link <link<meta<meta<meta

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!

</link<></link<></link<></link<></link<></link<></link<></link<></link<></div></link<></link<></link<></link<></link<></link<></link<></link<></div></link<></link<></link<></link<></link<></link<></link<></div></link<></link<></link<></link<></link<></link<></div></link<></link<></link<></link<></link<></div></link<></link<></link<></link<></div></link<></link<></link<></div></link<></link<></div></link<></div>

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây