Như tiêu đề ạ, với mục đích giúp cho các bạn mới học lập trình web nhanh chóng tiếp cận được với Bootstrap framework, mình xin phép mở chuyên mục này. Đồng thời đều đặn mỗi tuần mình sẽ đăng một bài tìm hiểu cách sử dụng Bootstrap từ cơ bản đến nâng cao, có cả phiên bản tiếng Anh do mình tự viết cho bạn nào muốn học tiếng Anh. Các bạn có thắc mắc gì cứ hỏi nhé, mình sẽ giúp đỡ tận tình. Đầu tiên mình sẽ đăng một số thắc mắc mà mình đã từng gặp khi sử dụng bootstrap cùng các giải đáp của mình:
*** QUESTION ***
Bị rối về cấu trúc .row rồi .container rồi .col-sm-, .col-md-,… của bootstrap?
Khi bị rối về cấu trúc .row rồi .container rồi .col-sm-, .col-md-,… của bootstrap, trước tiên hãy nhớ rằng bootstrap quy định tất cả selector (universe selector) đều có box-sizing: border-box ( * {box-sizing: border-box} )
Do đó những cái padding 15px không có tác dụng cộng thêm width vào các thẻ (trừ .row) mà chỉ có tác dụng căn nội dung ở bên trong mỗi thẻ.
Tại sao phải căn vào bên trong?
Tưởng tượng một page có cấu trúc layout như sau:
******************** ********************
* * * *
* * * *
* cột 1 * * cột 2 *
* * * *
* * * *
* * * *
******************** ********************
Khi đó nếu không dùng padding để căn vào thì các ô nội dung sẽ nằm sát nhau và nhìn rất xấu.
Vậy, tại sao .row lại có margin âm?
Vì thường khi sử dụng framework bootstrap ta sẽ dùng .container ở node ngoài cùng để căn nội dung vào bên trong (sử dụng padding-left, padding-right có giá trị dương). Khi sử dụng các ô có class .col-sm-, .col-md-,… vốn thường có padding-left và padding-right là một giá trị dương sẽ làm cho nội dung tiếp tục bị căn vào bên trong. Do đó, khi dùng các class này phải đi kèm với class .row (có margin-left, margin-right là giá trị âm) để căn lại hai phía ngoài cùng sao cho thẳng hàng với các nội dung trang web không nằm trong các class .col-sm-, .col-md-,…
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?