Google Apps Script - Chapter 4 - Lên layout cho dự án bằng Bootstrap

Giới thiệu về Layout trong Bootstrap 5

Trong bài trước mình có đề cập về cây DOM với thành phần cấu tạo từ những element (node). Thì lên layout là việc sắp xếp những node này một cách hợp lý, phù hợp với nhu cầu thể hiện nội dung ra web-app. Trong css có nhiều thuộc tính phục vụ nhu cầu này, cơ mà bootstrap 5 có tổng hợp lại rồi, nên trong khuôn khổ series này chỉ dừng lại ở việc tìm hiểu cơ bản cách dùng bootstrap thôi nha.

Trước tiên, chúng ta lưu ý qua 3 loại class chính để layout trong bootstrap:

• container là tầng lớn nhất, bao gồm một hoặc nhiều row
• row tương ứng với 1 "dòng", bao gồm nhiều cột (col), row thường chiếm 100% chiều rộng của node chứa nó (ở đây là container)
• col là tầng thấp nhất trong layout, mỗi cột sẽ chiếm toàn bộ hoặc một phần chiều rộng của row (một row được chia làm 12 đơn vị nha, chứ không phải 10 phần đâu)

Ví dụ như hình dưới đây (detail ở Grid system - Bootstrap 5):

Giải thích:

• container trong ví dụ trên bao gồm 2 row
• row thứ nhất được chia làm 4 cột bằng nhau
• row thứ hai được chia làm 2 cột, cột thứ nhất chiếm 8 phần, cột thứ 2 chiếm 4 phần

Giới thiệu về Spacing trong Bootstrap 5

Spacing trong css nói chung và trong bootstrap nói riêng, là một thuộc tính quan trọng để tinh chỉnh styling cho từng node, giúp giãn cách hợp lý hơn. Spacing bao gồm 2 phần chính:

• margin - giãn cách giữa các node với nhau
• padding - giãn cách trong nội tại của node

Một số lưu ý

• giãn cách sẽ được lấy mốc từ rìa của node ha (đại khái vậy)
• chúng ta không nhất thiết phải spacing cho cả 4 phía của một node, từng thuộc tính là có thể tách rời
• ưu tiên dùng padding (theo kinh nghiệm của mình), với tôn chỉ là mỗi node phải hoạt động tốt dù đứng một mình hay ở cạnh node khác

All great and precious things are lonely. - John Steinbeck, East of Eden

Quy tắc trong Bootstrap 5

{property}{sides}-{breakpoint}-{size}

Trong đó:

• property = m hoặc p tương ứng với margin hoặc padding
• sides = s, e, t, b tương ứng với trái, phải, trên dưới, x tương ứng với trái + phải, y tương ứng với trên + dưới
• breakpoint = sm, md, lg, xl, hoặc xxl tương ứng với độ rộng của màn hình, chủ yếu dùng trong reponsive layout nên giờ tạm bỏ qua
• size = 1, 2, 3, 4, 5 để gia tăng độ mức độ giãn cách, 0 để reset, auto để à ừ auto

Ví dụ:

• px-3 để giãn cách trong, bên trái và phải, 1 đoạn 1rem
• me-5 để tạo khoảng cách với node ở phía sau node hiện tại 1 khoảng 3rem
• p-3 m-3 để vừa tạo giãn cách trong vừa tạo giãn cách ngoài về 4 phía 1 đoạn 1rem

Tìm hiểu thêm ở trang document về Spacing của Bootstrap

Tiếp tục Implement

Quay lại dự án nhỏ của chúng ta ở https://script.google.com/home/

Step 4.6.

Quay lại với đề bài

Team HR cần 1 trang web hiển thị thông tin của từng staff trong cty, có ảnh, staff-id, tên, chức vụ.

Với đề tài tương ứng trên, ta có thể tưởng tượng layout bao gồm:

• 1 container bao gồm nhiều row
• mỗi row tương ứng với 1 staff và bao gồm 2 cột
• cột thứ nhất chứa hình, có thể rộng khoảng 2 đơn vị
• cột thứ 2 chứa thông tin còn lại, rộng 6 đơn vị (vẫn thừa 4 đơn vị màn hình bỏ trống chơi)

Tương ứng ta hình thành nên code như sau:

<!-- một container chứa 2 dòng -->
<div class="container">
  <div class="row">
  </div>
  <div class="row">
  </div>
</div>

Tiếp

<!-- một container chứa 2 dòng, mỗi dòng 2 cột -->
<div class="container">
  <div class="row">
    <div class="col-2">
      <!-- cột hình ảnh -->
    </div>
    <div class="col-8">
      <!-- cột thông tin -->
    </div>
  </div>
  <div class="row">
    ... tương tự...
  </div>
</div>

Ở phần hình ảnh, chúng ta tạm thời dùng hình random trên mạng, với chiều rộng x cao là 150 x150.

<img src="https://picsum.photos/seed/1/300/300" height="150" width="150">
<img src="https://picsum.photos/seed/2/300/300" height="150" width="150">

Khoan hẵng đọc tiếp và bắt tay vào thử tạo cho mình layout nhé. Áp dụng cả những kiến thức spacing đã trình bày ở trên.

Mình demo trước kết quả ở thời điểm hiện tại. Code sẽ được đính kèm ở chaper kế tiếp.

Tổng kết

Bằng việc thêm layout và spacing, chúng ta đã có thể styling để ra output theo yêu cầu của đề. Trong chapter tiếp theo (cũng là chương cuối), chúng ta sẽ tiếp tục với việc kết hợp lấy dữ liệu từ Google sheet thông qua GAS với vai trò back-end.

Cám ơn các bạn đã đọc bài.