2012-01-08 26 views
34

Trong dự án Play 2.0 của tôi, tôi đã tích hợp Bootstrap (vì ít tệp hơn, Play có thể biên dịch chúng một cách nhanh chóng) nhưng bây giờ tôi đã tìm thấy Boilerplate và tôi nghĩ nó sẽ là một ý tưởng hay để sử dụng nó.Làm thế nào để tích hợp HTML5 Boilerplate với Twitter Bootstrap đúng cách?

Sau một chút googling Tôi thấy điều này: http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa

Vì vậy, có vẻ như hội nhập nên có thể, và thậm chí có những 2 dự án mà cố gắng làm điều đó. Vấn đề duy nhất là họ làm những việc hoàn toàn khác nhau và tôi không chắc cái nào là đúng.

https://gist.github.com/1422879 ở trạng thái hiện tại có vẻ như chỉ bỏ qua styles.css tệp đến từ Boilerplate. Tên này được đổi tên thành h5bp.css, nhưng tôi không thấy h5bp.css được bao gồm ở mọi nơi.

https://github.com/elgreg/html5-boilerstrap mặt khác sử dụng cả hai, chỉ tách tệp styles.css thành hai phần (h5bp_normalize.cssstyles.css, bootstrap.css được bao gồm giữa chúng). Nhưng không có bất kỳ xung đột nào giữa Boilerplate và Bootstrap theo cách này?

Vì vậy, tôi hơi lạc lối. Cách làm đúng đắn trong trường hợp này là gì?

+0

gì một phần của html5Boilerplate chính xác Bạn đang tìm kiếm để tích hợp? –

Trả lời

62

Chỉ cần sử dụng Initializr, đó là giải pháp bán chính thức và nó cũng có một bộ tùy chọn lớn. Bootstrap + H5BP được hỗ trợ ra khỏi hộp!

http://www.initializr.com/

3

Tôi đã xóa kiểu đặt lại khỏi bootstrap twitter (bằng cách xóa ít hơn@import tuyên bố) và dán vào html5-boilerplate (trong phần kiểu người dùng). Làm việc tốt.

+0

Điều này nghe có vẻ tốt đẹp :) Nhưng những gì tôi lo lắng là một trong những bình luận dưới đoạn mã (liên kết trong bài đầu tiên): "Tôi không nghĩ rằng việc kết hợp CSS sẽ hoạt động tốt như vậy vì Bootstrap cần thiết lập lại của nó để xóa tiêu đề mặc định Đó là một giả định trong phần còn lại của mã (cho lần cuối cùng tôi đã kiểm tra), mà có thể ảnh hưởng đến những thứ như topbar và các tab/viên thuốc. " Bạn đã sử dụng Bootstrap với sự sửa đổi của mình bao nhiêu? –

+0

Tôi đã sử dụng topbar, tiêu đề và biểu mẫu, thông điệp cảnh báo. Bạn nói đúng, tôi vừa xem biểu định kiểu và tôi thấy rằng tôi đã thêm quy tắc '.alert-message p {margin-top: 0}'. Vì vậy, một số hack với reset sẽ là cần thiết với sự tích hợp như vậy. – welldan97

Các vấn đề liên quan