Tutorial 2x Columns in posts/articles bbcode - BBcode cột cho bài viết của XenForo 2

[PVS]

Columns in posts/articles bbcode - BBcode cột cho bài viết của XenForo 2

Bbcode rất đơn giản và trong ví dụ này đang sử dụng thẻ col. Ngoài ra còn có một cột biểu tượng font awesome mà bạn có thể sử dụng nếu bạn muốn hiển thị một biểu tượng trong trình soạn thảo văn bản.

View attachment 228965-ee1dfff41859a67ab4f109df65e45c6a.mp4
​

Có bao nhiêu cột?

Nhiều hay ít tùy thích, nhưng chúng ta sẽ hiểu điều đó sau khi chúng ta xem code CSS.

Trước hết là bbcode tùy chỉnh:
(Trong Admin Control Panel > Content > Custom BB codes nhấp vào Add BB code)

BB code tag	postcol
Title	Columns
HTML replacement	<div class="postcol"> {text} </div>
Font Awesome icon (optional)	columns

Xác định số lượng và chiều rộng của cột bằng CSS

Như thường lệ, bạn thêm code vào template Extra.less của bạn. Có một số cách đơn giản để xác định số lượng và chiều rộng của cột:

1. Xác định chiều rộng của các cột (chiều rộng của trình duyệt sẽ xác định số lượng cột thực tế phù hợp dựa trên chiều rộng/khoảng cách của cột)
2. Xác định số lượng cột (tối đa)

Cả hai phương pháp đều responsive.

Phương pháp 1. Chiều rộng cột + số cột tự động
Sẽ có càng nhiều cột có chiều rộng này có thể vừa với container bài viết. Ở đây đã xác định chiều rộng 250px và khoảng cách 30px giữa các cột.

.postcol {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    -webkit-column-width: 250px;
    -moz-column-width: 250px;
    column-width: 250px;
}

Đây thực sự là chiều rộng cột tối thiểu, vì vậy, nếu chỉ có hai cột phù hợp, mỗi cột sẽ mở rộng để lấp đầy chiều rộng của container, vẫn tuân theo khoảng cách cột.

Bạn có thể kiểm soát số lượng cột bằng cách thay đổi chiều rộng: chiều rộng nhỏ hơn = nhiều cột hơn.

Vì vậy, trên thiết bị di động, bạn sẽ thấy một chế độ xem responsive đẹp của một cột lấp đầy chiều rộng.

Phương pháp 2. Xác định số lượng cột

Phương pháp 1 sẽ tốt cho hầu hết các mục đích nhưng bạn có thể xác định số lượng cột bằng cách sử dụng column-count, tuy nhiên để responsive, bạn cũng nên bao gồm chiều rộng của cột (như trên), thông thường nó sẽ buộc số lượng cột đó bất kể chiều rộng trình duyệt hoặc thiết bị.

Vì vậy, đây thực sự là số lượng cột tối đa sẽ hiển thị tùy thuộc vào chiều rộng của container và tất cả những gì đã làm là thêm số lượng cột vào phương thức 1.

.postcol {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    -webkit-column-width: 250px;
    -moz-column-width: 250px;
    column-width: 250px;
}

Trong trường hợp này, nó sẽ hiển thị hai cột nhưng giảm xuống một cột trên thiết bị di động hoặc thiết bị có nghĩa là hai cột 250px sẽ không vừa.

Rời khỏi column-width để buộc số lượng cột là có thể nhưng trong trường hợp đó, bạn sẽ có các cột rất mỏng trên nhiều thiết bị di động.

Rõ ràng bạn có thể thử nghiệm với số lượng và chiều rộng cột cho phù hợp với phong cách và sở thích của riêng bạn.

Chúc các bạn thành công.

Nguồn: xenforo.com​