Twitter Bootstrap ".container" class: Làm thế nào để sử dụng nó theo ngữ nghĩa?

Question

Một ngày trước, tôi quyết định chơi xung quanh với Twitter Bootstrap. Tìm thấy nó tuyệt vời crafted, nhưng Im không phải là fan hâm mộ của tất cả những lớp học gây ô nhiễm html của tôi.

Vì vậy, tôi đang cố gắng sử dụng Less để làm cho nó ngữ nghĩa hơn. Tôi đã làm khá tốt đến mức tôi bước qua trên lớp học .container. Có một bản mix trong tập tin "mixins.less" (dòng 580) đặt chiều rộng vùng chứa. Nhưng tôi không thể làm cho nó hoạt động mà không bao gồm lớp trực tiếp trên html. Tôi luôn luôn nhận được lỗi biên dịch khi đặt nó trong tập tin tùy chỉnh của tôi. Tôi đã thử sao chép và chèn nó vào tập tin của mình, nhưng không thành công ... bất cứ ai đã trải qua điều này?

Tắt khóa học, tôi có thể buộc chiều rộng theo cách thủ công, nhưng tôi không nghĩ đó là cách tiếp cận tốt nhất. Ý tưởng nào?

Answer 1

This là điều trị tốt nhất mà tôi đã tìm thấy. Vay từ các ví dụ tác giả:

Hầu hết mọi người sử dụng này:

<div class="row"> 
    <div class="span6">...</div> 
    <div class="span6">...</div> 
</div> 

Nếu bạn đang như tôi, sau đó bạn đang cố gắng để có được như thế này:

<!- our new, semanticized HTML --> 
<div class="article"> 
    <div class="main-section">...</div> 
    <div class="aside">...</div> 
</div> 

<!-- its accompanying Less stylesheet --> 
.article { 
    .makeRow();  // Mixin provided by Bootstrap 
    .main-section { 
    .makeColumn(10); // Mixin provided by Bootstrap 
    } 
    .aside { 
    .makeColumn(2); // Mixin provided by Bootstrap 
    } 
} 

Answer 2

Vấn đề với câu trả lời trên là makeRow() và makeColumn() mixins không đáp ứng. Tôi rất mong được viết tên lớp ngữ nghĩa nhưng tôi không thấy kết quả như khi viết ví dụ hàng và span6 offset1 tên lớp.

Bạn có thể kiểm tra https://github.com/twitter/bootstrap/issues/2242 để biết thêm thông tin.