Nhận trả lời các câu hỏi về Bootstrap
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-,…
Nếu mình không muốn padding giữa các cột mà muốn để liền nhau thì làm thế nào?
có phải các cột trong boottrap chia thành 12 phần ko…
cho mình hỏi chút cách làm cố dịnh dòng cho tiêu đề của mỗi bài viết với
nhìn nó bị lệch khi tiêu đề dài 2 dòng với 1 dòng
Fix height hoặc dùng JS !
Cụ thể chút đc k bác.
Js thì dùng cái nào vậy
Đơn giản là bạn dùng css thêm ‘height: 30px’ vào class đó chẳng hạn, thế là nó cố định chiều cao. Còn muốn hay hơn thì dùng jQuery, tìm trong class đó xem thằng nào có height cao nhất, set height đấy cho toàn bộ các phần tử của class.
Cho em hỏi là khi mình dùng thẻ
<div id="slider" class="carousel slide"></div>để tạo một slider như hình dưới, mà em muốn các bóng mờ của control nhạt đi hay mất hẳn thì dùng cách nào vậy ạ ?em có thử mò trong bootstrap.css mà cũng chưa tìm được giải pháp, mong anh giúp đỡ
em cảm ơn !
sorry các bạn, lâu nay mình bận đi làm nên cũng hok có time rảnh.
muốn vậy thì đầu tiên bạn bỏ .row đi sau đó bạn vào file css của bootstrap tìm dòng quy định padding-left và padding-right, thường là 15px, rồi bỏ 2 dòng đó đi là đc.
Thường bootstrap sẽ chia thành 12 cột, tuy nhiên bạn có thể vào đây để customize lại: http://getbootstrap.com/customize/
Hoặc nếu bạn biết Less hoặc Sass thì bạn download source về rồi sửa lại cũng đc. Nếu bạn muốn biết cách làm thì cứ đặt câu hỏi nhé.
bạn tìm đến dòng .carousel-control.right và bỏ thuộc tính background-image nhé
Mình đã rảnh hơn trước (do đến dịp Tết) nên sẵn sàng trả lời mọi câu hỏi về Bootstrap của các bạn.
Bạn cho mình hỏi. Mình chứa các nội dung trong hệ thống grid. Ban đầu khoảng cách trái, phải, trên dưới khá rộng. Mình đã làm hẹp được trái phải, nhưng còn trên dưới thì chưa làm được. Bạn có thể hướng dẫn mình không?
Làm sao để khoảng cách giữa Chi tiết hóa đơn và Hóa đơn ngắn lại. Vì nó thưa quá!
bạn up code lên codepen hoặc jsfiddle đc k? như vậy mới biết code của bạn và dễ sửa hơn.
Chỉnh khoảng cách giữa các dòng thì bạn có thể đặt thêm class chỗ .row và css margin hoặc padding cho nó.
Còn khoảng cách giữa 2 ô như bạn nói thì bạn xem padding, margin của nó thế nào,trong trường hợp margin k đc thì có thể là do nó đang bị vertical collapse. Bạn có thể thêm border hoặc padding cho từng ô.
Xin chào, mình muốn tìm hiểu sâu hơn về Bootstrap, cụ thể là về vấn đề tuỳ biến thanh navigation.
Hiện tại, mình không muốn dùng cấu trúc navbar có sẵn của Bootstrap mà mình muốn tuỳ biến ra 1 navbar của riêng mình mà vẫn có nút bấm Hamburger khi hiển thị trên smartphone giống như navbar có sẵn.
Bạn có thể giúp đỡ mình hoặc tìm hộ mình bài viết tuỳ biến thanh navigation mà hướng dẫn chi tiết, cụ thể về từng thành phần trong đó được không?
bạn cho mình hỏi là mình ko chuyên làm web mình làm app cho win 10 cơ bạn à vậy có thể dùng em này cho nhanh nhỉ đỡ phải chai css nhiều bạn tháy sao ạ
Để làm điều này bạn chỉ cần dùng kỹ thuật HTML và CSS. Nếu bạn k muốn dùng cấu trúc của bootstrap thì:
Bạn muốn biết từng thành phần của cái nav bar của bootstrap thì bạn cứ nhấn f12 và inspect nó ra.
Summary: Một trong những cách học bootstrap hay nhất là bạn lên chính trang của nó copy các đoạn code rồi bỏ vào trang web bạn đang xây dựng, tùy biến cho nó là tự động bạn sẽ hiểu thôi.
Thân.
Mình k biết làm app. Tất nhiên mục đích người ta tạo ra bootstrap là để xây dựng giao diện cho nhanh rồi bạn.
Mình cũng đã copy từng đoạn code vào web của mình để thử từng thẻ và class rồi rồi. Tuy nhiên đến khi động vào thanh navigation thì việc tuỳ biến không được như mong muốn, ví dụ khi mình chèn các khối vuông vào menu đó nó không hiển thị lên ở chiều ngang size 768 (mặc dù đã resize lại chiều cao của nó) nhưng khi về 480 thì ấn vào nút mở rộng menu lại thấy nó có trong đó.
Và trước khi hỏi mình đã search Google rất nhiều rồi. Không có một bài nào hướng dẫn làm menu custom bằng Bootstrap cả, chỉ có những bài hướng dẫn sử dụng menu mặc định của nó thôi
bạn có thể đưa code lên cho m.n fix
Bạn chịu khó học CSS cơ bản đi là bạn có thể tự custom theo ý mình, k cần tìm tuts ở đâu hết. Tài liệu HTML/CSS thì có rất nhiều trên mạng. Sau khi học xong, bạn tự chuyển đổi một layout PSD thành HTML/CSS, có responsive đàng hoàng. Lúc đó bạn sẽ tự custom được bất kỳ framework nào.
Còn nếu như bạn muốn kiểu mì ăn liền, thì bạn đưa code của bạn lên jsfiddle để mọi người fix nhé :))
Ok, cảm ơn bạn vì đã nhiệt tình support!
anh ơi, em muốn là giao diện ntn, chia ra làm 3 cột, có thể resize dc.
Hôm trước @htwap có chỉ cho cái resize rồi, mà ko biết ráp 3 cột bằng bootstrap ntn
mọi người giúp với hihi