Tạo trang layout responsive với bootstrap và jquery

Tạo trang layout responsive với bootstrap và jquery là sử dụng boostrap và jquery để tạo trang layout có thể xem dễ dàng trên các thiết bị khác nhau .

A. Tính năng Responsive

Responsive là tính năng làm cho trang web có thể xem tốt, dễ dùng trên nhiều thiết bị khác nhau như desktops, tablets, và phones.

Trang web đó sẽ chuyển cách trình bày thông tin tùy thiết bị người dùng (màn hình lớn vừa, nhỏ)

responsvive

Responsive web design là dùng CSS , HTML để resize, hide, shrink, enlarge, hoặc move nội dung để tạo nên cách trình bày dễ hơn cho người dùng trên thiết bị của họ.

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s

1. ViewPort

Viewport là khái niệm được đưa ra trong HTML5, là vùng mà user có thể trong thấy.  Viewport khác nhau tùy thiết bị của người dùng, nó nhỏ trên điện thoại và lớn hơn trên computer. Để khai báo viewport, bạn dùng tag <meta> đặt trong tag head như sau:

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

Tag <meta> viewport nằm cho browser biết cách thức hiển thị page theo dimensions và scale.

width=device-width khai báo trình duyệt rằng width của page cần căn theo độ rộng màn hình (screen-width) của thiết bị.

initial-scale=1.0 là độ zoom khởi đầu khi page mới được nap.

Đây là ví dụ của 1 trang không có viewport meta tag và có viewport meta tag:

2. Size content

1. Đừng dùng content quá lớn – ví dụ 1 hình hiển thị width > viewport, sẽ làm cho page bị cuộn ngang. Nhớ chỉnh các content để phù hợp với width của viewport.

2. Không đặt nội dung theo 1 width của 1 loại thiết bị nào. Vì width của các loại thiết bị là khác nhau nhiều

3. Dùng CSS media queries để apply các style cho từng loại màn hình thiết bị

3. Media query

Để tạo được responsive, bạn cần biết về kỹ thuật quan trọng là media query.

Media query (dò thiết bị) là 1 kỹ thuật trong CSS3 dùng để dò thiết bị mà người xem đang dùng. Lệnh @media với cú pháp như bên dưới là để dò thiết bị có độ rộng<=600px và apply khối code css cho thiết bị đó.

Ví dụ1:  browser window là <=600px thì màn nền là lightblue:

@media only screen and (max-width: 600px) {
  body {background-color: lightblue; }
}

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

Ví dụ 2: Khi screen width <=768px thì mỗi cột sẽ có width =100%:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

4. Mobile first

Để responsive cho tốt, cần phải mobile first. Mobile First nghĩa là thiết kế trang web trước tiên cho mobile, trước khi design cho desktop và các loại thiết bị khác, điều này giúp cho trang hiển thị tốt hơn trên faster thiết bị nhỏ.

Thay vì chuyển style khi width <=768px, chúng ta sẽ chuyển design khi width > 768px. Điều này sẽ đảm bảo Mobile First:

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mobilefirst

Typical Device Breakpoints

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Trên đây là những nguyên tắc cần thực hiện đê trang web có responsive, thực tế làm không đơn giản đâu. Bạn nên dùng bootstrap để hỗ trợ thực hiện.

B. Xây dựng trang web responsive với Bootstrap và jQuery

1. Khai báo HTML5 doctype

Lệnh:  <!DOCTYPE html>

Đây là lệnh khai báo với trình duyệt trang của bạn dùng html5. Như vậy mới đảm bảo trang của bạn hoạt động đúng với bootstrap và được các search engine không đánh giá thấp.

2. Khai báo Viewport

Dùng lệnh sau trong tag head:

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

3. Responsive images

Images trong Bootstrap có thể điều chỉnh các hình thông qua class .img-responsive. Class này giúp gán max-width: 100%; và height: auto; để hình có thể điều chỉnh tỉ lệ, hiện đẹp hơn.

<img src="..." class="img-responsive" alt="Responsive image">

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_img-responsive&stacked=h

4. Typography

Bootstrap có các class sẵn cho việc định dạng text color, text align, text transform, heading , block quote. Bạn sử dụng chúng để định dạng text, link, heading

5. Dùng grid system

Quan trọng nhất trong việc tổ chức responsive cho trang là dùng grid của bootstrap. Grid system trong bootstrap chia màn hình thành 12 cột cho mỗi dòng trong viewport. Có nhiều class định nghĩa sẵn theo thiết bị để bạn khai báo độ lớn các cột, nhằm giúp bạn tạo trang layout uyển chuyển thay đổi tùy loại thiết bị người dùng

  • Sử dụng .rows để tạo dòng trong layout
  • Các rows phải đặt trong div container, có class là container hoặc container-fluid.

container-fluid bằng 100% độ rộng trang, còn container sẽ fix theo độ rộng (tùy thiết bị).

<div class="container"> ... </div>
  • Dùng các class có tiền tố là col-*-n hoặc col-n để khai báo độ rộng các cột, trong đó n là “độ rộng” (từ 1-12), * diễn tả thiết bị (xs, sm, md, lg, xl) . Nếu dùng col-n, nghĩa là bạn bỏ qua loại thiết bị, như vậy với mọi loại thiết bị thì cột sẽ có độ rộng là n. Ví du: <div class=”col-sm-4″></div>

Bootstrap 4:

col- small devices, screen width <=576px
.col-sm- small devices,  screen width >576px
.col-md- medium devices, screen width >=768px
.col-lg- large devices,  screen width >=992px
.col-xl- xlarge devices , screen width >=1200px

Bootstrap 3:

col-xs- extra small devices Phones, screen width <=768px
.col-sm- small devices Tablets,  screen width >768px
.col-md- medium devices Desktop, screen width >=992px
.col-lg- large devices Desktop,  screen width >=1200px
  • Trong các div tạo cột, có thể dùng nhiều class để khai báo “độ rộng” của cột theo từng loại thiết bị khác nhau. Ví dụ : <div id=”cottrai” class=”col-md-3 col-lg-2″></div>
  • Nên nhớ các nguyên tắc của bootstrap là mobile first và kết thừa từ thiết bị nhỏ. Do đó khi bạn khai báo <div id=”cottrai” class=”col-md-3″></div>. Thìdiv này trêncácloại thiết bị lớn hơn md (như lg, xl) cũng sẽ có độ rộng là 3. Còn thiết bị nhỏ hơn md (như sm,  xs) sẽ full width màn hình.
  • Thường trong trang layout, phải có chỗ để hiện thanh menu, header, footer, nội dung chính, các nội dung phụ. Với header của trang thì bạn dùng tag <header>, footer của trang thì dùng tag<footer>, thanh menu thì dùng tag <nav>

6. Xem thêm

Tạo trang layout với Bootstrap

C. Thực hiện tạo trang

1. Tạo folder website

Mỗi website có nhiều file: như các trang html, css, js, hình ảnh… Bạn đặt chúng trong 1 folder để tính toán địa chỉ liên kết, và sau này đưa toàn bộ file lên mạng internet.

Ví dụ: tạo folder tên tintuc

2. Tạo trang layout và nhúng thư viện

a. Tạo file layout.html code html

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>Tiêu đề trang web</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">  
 </head>
 <body>
  
 </body>
 </html> 
  • Trong trang có tag <!doctype html> đặc trưng của html5
  • Khai báo tiêu đề trang trong tag title.
  • Chỉ định bảng mã utf-8 trong tag meta để hiển thị tốt tiếng việt.
  • Chỉ định viewport trong tag meta để trang web có thể responsive.

b. Nhúng thư viện từ CDN

<!doctype html> <html> <head>
<meta charset="utf-8">
<title>Hello, world! </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
</head>
<body>
 
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" > </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

c. Nhúng thư viện từ local website

Bạn down thư viện bootstrap và jquery về folder website và chèn vào trang

 <!doctype html> <html> <head>
 <meta charset="utf-8">
 <title>Hello, world! </title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href= "css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
 </head>
 <body>
 
 </body>
 </html>
 <script src="js/jquery-3.3.1.slim.min.js"> </script>
 <script src="js/popper.min.js" > </script>
 <script src="js/bootstrap.min.js"> </script> 

d. Tạo file css và nhúng vào trang

  • Tạo file để chứa code css của bạn.  Ví dụ: css/dinhdang.css
  • Nhúng vào trang (trong tag head):
<link rel="stylesheet" href="css/dinhdang.css"/>

e. Coding khởi tạo jquery

Chuẩn bị nơi viết code jquery cho trang, thường code trong tag head

<script>
$(document).ready(function(e){
  // Mã jquery của bạn
     
}); 
</script>

f. Kết quả

Code cho trang sau khi nhúng thư viện là như sau:

<!doctype html> <html> <head>
<meta charset="utf-8">
<title>Hello, world! </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
<link rel="stylesheet" href="css/dinhdang.css"/>
<script>
$(document).ready(function(e){
  // Mã jquery của bạn
     
}); 
</script>
</head>
<body>
 
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" > </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

hoặc

<!doctype html> <html> <head>
<meta charset="utf-8">
<title>Hello, world! </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
<link rel="stylesheet" href="css/dinhdang.css"/>
<script>
$(document).ready(function(e){
  // Mã jquery của bạn
     
}); 
</script>
</head>
<body>
 
</body>
</html>
<script src="js/jquery-3.3.1.slim.min.js"> </script>
<script src="js/popper.min.js" > </script>
<script src="js/bootstrap.min.js"> </script> 

4. Thực hiện các thành phần giao diện

a. Header:

Header là phần đầu của trang. Trong header thường có hình banner, logo, các thông tin cực kỳ quan trọng như: tên thành viên, link giỏ hàng, link đăng ký, link mạng xã hội…

b. Footer:

Ở chân trang, thường hiện mô tả website, thông tin liên hệ, email, điện thoại, thống kê, link mạng xã hội…

b. Menu:

Menu là nơi bạn đặt các link chính của website để user nhắp. Tạo thanh menu với bootstrap khá đơn giản. Lấy code từ component nav của bootstrap đưa vào chỗ hiện menu vả việt hóa.

c. Aside

Là các thông tin phụ, đặt bên phải hoặc bên trái trang. Như form search, form login, tin xem nhiều, hình sự kiện, sản phẩm bán chạy, bản đồ…

d. Nội dung chính:

Vùng nội dung chính là dùng có diện tích lớn nhất, nhưng ít khi nào bao phủ toàn bộ độ rộng màn hình, vùng này có nội dung gì trên trang layout thì tùy ý tưởng của bạn lúc design. Sau này khi lập trình web động, nội dung vùng này sẽ tay đổi tùy ngữ cảnh sử dụng của người dùng.

e. Các thành phần giao diện trong trang:

Bao gồm button, card, accordion, heading, icon, carousel, form, list group, modal, table, badge, alert, hình ảnh… đều có code html và class định dạng sẵn, bạn sử dụng chúng đưa vào trang đề hình thành giao diện.

Bootstrap cũng có các class định dạng màu nền (bg-*), màu chữ (text-*), đường viền (border-*)

5. Các trang khác

Ngoài trang layout, khi thiết kê website , bạn sẽ tạo thêm các trang khác. Ví dụ: trang login, trang giới thiệu, trang liên hệ…