Cách đặt không gian tên Twitter Bootstrap để các kiểu không xung đột

Tôi muốn sử dụng Twitter Bootstrap, nhưng chỉ trên các phần tử cụ thể, vì vậy tôi cần tìm ra cách để tạo tiền tố cho tất cả các lớp Twitter Bootstrap bằng tiền tố của mình hoặc sử dụng ít mixin hơn. Tôi chưa có kinh nghiệm về việc này nên tôi không hiểu rõ về cách thực hiện việc này. Đây là một ví dụ về HTML mà tôi đang cố gắng tạo kiểu:

<div class="normal-styles">
  <h1>dont style this with bootstrap</h1>
  <div class="bootstrap-styles">
    <h1>use bootstrap</h1>
  </div>
</div>

Trong ví dụ này, Twitter Bootstrap sẽ tạo kiểu bình thường cho cả hai kiểu h1, nhưng tôi muốn chọn lọc hơn về những khu vực mà tôi áp dụng kiểu Twitter Bootstrap.

Điều này hóa ra dễ dàng hơn tôi nghĩ. Cả Less và Sass đều hỗ trợ không gian tên (thậm chí sử dụng cùng một cú pháp). Khi bạn bao gồm bootstrap, bạn có thể làm như vậy trong một bộ chọn để tạo không gian tên cho nó:

.bootstrap-styles {
  @import 'bootstrap';
}

Cập nhật: Đối với các phiên bản LESS mới hơn, đây là cách thực hiện:

.bootstrap-styles {
  @import (less) url("bootstrap.css");
}

Một câu hỏi tương tự đã được trả lời ở đây.

@Andrew câu trả lời tuyệt vời. Bạn cũng sẽ muốn lưu ý rằng bootstrap sửa đổi phần thân {}, chủ yếu là để thêm phông chữ. Vì vậy, khi bạn không gian tên nó thông qua LESS / SASS, tệp css đầu ra của bạn trông giống như sau: (trong bootstrap 3)

.bootstrap-styles body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;
}

nhưng rõ ràng sẽ không có thẻ body bên trong div của bạn, vì vậy nội dung bootstrap của bạn sẽ không có phông chữ bootstrap (vì tất cả bootstrap đều kế thừa phông chữ từ cha)

Để khắc phục, câu trả lời phải là:

.bootstrap-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}

Kết hợp các câu trả lời của @Andrew, @Kevin và @ adamj lại với nhau (cùng với một số kiểu khác), nếu bạn bao gồm các câu trả lời sau trong tệp có tên "bootstrap-namespaced.less", bạn chỉ cần nhập 'bootstrap-namespaced.less' vào bất kỳ tập tin:

// bootstrap-namespaced.less

// This less file is intended to be imported from other less files. 
// Example usage:
// my-custom-namespace {
//  import 'bootstrap-namespaced.less';
// }

// Import bootstrap.css (but treat it as a less file) to avoid problems 
// with the way Bootstrap is using the parent operator (&).
@import (less) 'bootstrap.css';

// Manually include styles using selectors that will not work when namespaced.

@import 'variables.less';

& {
    // From normalize.less

    // Previously inside "html {"
    // font-family: sans-serif; // Overridden below
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    // Previously inside "body {"
    margin: 0;

    // From scaffolding.less

    // Previously inside "html {"
    // font-size: 10px; // Overridden below
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    // Previously inside "body {"
    font-family: @font-family-base;
    font-size: @font-size-base;
    line-height: @line-height-base;
    color: @text-color;
    background-color: @body-bg;
}

Thêm một không gian tên vào bootstrap CSS sẽ phá vỡ chức năng của phương thức vì bootstrap thêm một lớp 'modal-backdrop' trực tiếp vào phần thân. Một cách giải quyết là di chuyển phần tử này sau khi mở phương thức, ví dụ:

$('#myModal').modal();
var modalHolder = $('<div class="your-namespace"></div>');
$('body').append(modalHolder);
$('.modal-backdrop').first().appendTo(modalHolder); 

Bạn có thể xóa phần tử trong trình xử lý cho sự kiện 'hide.bs.modal'.

Sử dụng phiên bản .less của tệp. Xác định tệp nào bạn yêu cầu ít hơn, sau đó bọc các tệp .less đó bằng:

.bootstrap-styles {

    h1 { }

}

Điều này sẽ cung cấp cho bạn đầu ra của:

.bootstrap-styles h1 { }

Tôi đã thực hiện GIST với Bootstrap 3 tất cả bên trong một lớp có tên .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Tôi đã bắt đầu với công cụ này: http://www.css-prefix.com/ Và sửa phần còn lại bằng tìm kiếm và thay thế trong PHPstorm. Tất cả các phông chữ @ font-face đều được lưu trữ trên maxcdn.

Ví dụ dòng đầu tiên

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

Không gian tên phá vỡ div phông nền của plugin Modal, vì nó luôn được thêm trực tiếp vào thẻ <body>, bỏ qua phần tử không gian tên có các kiểu được áp dụng cho nó.

Bạn có thể khắc phục điều này bằng cách thay đổi tham chiếu của plugin thành $bodytrước khi nó hiển thị phông nền:

myDialog.modal({
    show: false
});

myDialog.data("bs.modal").$body = $(myNamespacingElement);

myDialog.modal("show");

Các $bodybất động sản quyết định nơi bối cảnh sẽ được thêm vào.

Để giải thích rõ hơn tất cả các bước mà Andrew đã nói về cho những người không biết Less là gì. Đây là một liên kết giải thích khá tốt về cách nó được thực hiện từng bước Cách tách biệt Bootstrap hoặc các thư viện CSS khác

Giải pháp đơn giản nhất - bắt đầu sử dụng các lớp css cô lập xây dựng tùy chỉnh cho Bootstrap.

Ví dụ, đối với Bootstrap 4.1 tải xuống các tệp từ thư mục css4.1 -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

và bọc HTML của bạn trong một div với lớp bootstrapiso:

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

Mẫu trang với bootstrap 4 tách biệt sẽ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <title>Page1</title>

    <!-- Isolated Bootstrap4 CSS - -->
    <link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">   

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>

  </head>

  <body>

  <div class="bootstrapiso">
  <!-- Any HTML here will be styled with Bootstrap CSS -->
  </div>

  </body>
</html>

Rất tiếc, tôi đã gặp phải vấn đề tương tự và phương pháp do @Andrew đề xuất đã không giúp được gì trong trường hợp cụ thể của tôi. Các lớp Bootstrap đã va chạm với các lớp từ một khung công tác khác. Đây là cách dự án này được chấp nhận https://github.com/sneas/bootstrap-sass-namespace . Hãy thoải mái sử dụng.

Như một lưu ý thêm cho mọi người. Để có được các phương thức hoạt động với phông nền, bạn chỉ cần sao chép các kiểu này từ bootstrap3

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

Bản sao bootstrap đầu tiên từ github:

git clone https://github.com/twbs/bootstrap.git

Yêu cầu cài đặt:

npm install

Mở scss / bootstrap.scss và thêm không gian tên của bạn:

.your-namespace {
    @import "functions";
    ...
    @import "utilities/api";
}

Biên dịch bootstrap:

npm run dist

Mở dist/css/bootstrap.cssvà xóa không gian tên khỏi thẻ htmlvà body.

Sau đó, sao chép nội dung của thư mục dist vào dự án của bạn và bạn đã hoàn tất.

Chúc vui vẻ!