Tiền tố tất cả các bộ chọn cho twitter bootstrap ở ít

Question

Tôi muốn bắt đầu học Twitter Bootstrap và hợp nhất nó vào trang web của tôi (bắt đầu với các phần tử biểu mẫu) nhưng nó phá vỡ phần còn lại của trang nếu tôi đưa nó vào.

Tôi muốn tiền tố tất cả các selectors vì vậy mà tôi dần dần có thể thêm nội dung đó là bootstrap theo kiểu như vậy: <div class="bootstrap"><!-- bootstrap styled stuff here --></div>

Bởi vì tôi chỉ bắt đầu để tìm hiểu, tôi không thực sự biết những gì có thể với less. Tôi đã thực hiện thủ công tiền tố chọn nhưng tôi tò mò nếu có một cách để làm điều này với less để tôi có thể tìm hiểu nó bằng cách sửa đổi bootstrap trong khi vẫn cô lập nó trong một container bootstrap cần thiết.

Hiện tại, tôi phải thêm tiền tố trong bước thứ hai sau khi biên dịch ít tệp hơn.

Cảm ơn mọi đề xuất!

Answer 1

Bạn có thể chỉnh sửa các tập tin bootstrap.less và đóng gói tất cả mọi thứ trong một cái gì đó như thế này:

.bootstrap { 
    // CSS Reset 
    @import "reset.less"; 

    // Core variables and mixins 
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc 

    [...] 

} 

Cập nhật:

Kể từ file bootstrap sử dụng & điều hành ít hơn, ví dụ:

// list-group.less (bootstrap 3.0.0) 
.list-group-item { 
    [...] 
    a& { 
     [...] 
    } 
} 

Việc biên dịch mã ở trên sẽ kết thúc với các quy tắc sai ngữ nghĩa và không được bắt đầu bằng .bootstrap:

a.bootstrap .list-group-item { 
    color: #555555; 
} 
a.bootstrap .list-group-item .list-group-item-heading { 
    color: #333333; 
} 
a.bootstrap .list-group-item:hover, 
a.bootstrap .list-group-item:focus { 
    text-decoration: none; 
    background-color: #ecf0f1; 
} 

Để khắc phục điều đó sử dụng sau để biên dịch bootstrap:

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css 

Bây giờ các dòng trên sẽ được biên dịch để:

.bootstrap a .list-group-item { 
    color: #555555; 
} 
.bootstrap a .list-group-item .list-group-item-heading { 
    color: #333333; 
} 
.bootstrap a .list-group-item:hover, 
.bootstrap a .list-group-item:focus { 
    text-decoration: none; 
    background-color: #f5f5f5; 
} 

Answer 2

này không thực sự giải quyết vấn đề đặt tên xung đột. Nó đặt một lớp cụ thể như một bộ chọn trước tất cả các lớp CSS bootstrap. Vì vậy, để sử dụng chúng, bạn phải bọc HTML của bạn bên trong một container (giống như một DIV) với một lớp của tên cụ thể đó, sau đó CSS ​​bootstrap sẽ chỉ áp dụng bên trong DIV đó. Có một số vấn đề với điều này.

Một vấn đề là CSS Bootstrap chứa các định nghĩa cho BODY và ​​HTML sẽ không áp dụng nếu bạn đặt bộ chọn ở phía trước chúng.

Một vấn đề khác là khi, trong CSS tùy chỉnh của bạn, bạn xác định một số kiểu kiểu lớp Bootstrap như ".dropdown" hoặc ".table". Bạn có thể xác định các khía cạnh của phong cách mà không được định nghĩa bởi Bootstrap, và bạn có thể ghi đè lên kiểu Bootstrap hoặc làm rối chúng. Ví dụ, nếu Bootstrap định nghĩa lớp đệm trên lớp ".table" và bạn định nghĩa lề trên lớp ".table" của riêng bạn, thì chúng sẽ kết hợp theo các quy tắc ưu tiên CSS khi trang được hiển thị. Ngay cả khi bạn đặt một lớp chọn tùy chỉnh cụ thể trước lớp ".table" của Bootstrap và một lớp chọn khác trước lớp ".table" của riêng bạn, chúng vẫn sẽ kết hợp và tương tác.

Sử dụng lớp trình chọn như thế này không thực sự là "không gian tên" theo đúng nghĩa và không cách ly hoàn toàn CSS. Cách tốt nhất để đạt được sự cô lập thực là tiền tố mỗi tên lớp với một chuỗi tiền tố duy nhất.

Answer 3

Để tránh những vấn đề nêu trong câu trả lời của periklis: tạo của riêng bạn prefixed-bootstrap.less rằng tái biên dịch biên soạnbootstrap.css trong:

.bootstrap { 
    @import (less) 'dist/css/bootstrap.css'; 
    @import (less) 'dist/css/bootstrap-theme.css'; /* optional */ 
} 

Không cần sed lệnh sau đó. Các quan sát được đề cập trong câu trả lời của Lars Nielsen tất nhiên vẫn hợp lệ.