Cara namespace Twitter Bootstrap agar gaya tidak konflik

Saya ingin menggunakan Twitter Bootstrap, tetapi hanya pada elemen tertentu, jadi saya perlu mencari cara untuk mengawali semua kelas Twitter Bootstrap dengan awalan saya, atau menggunakan lebih sedikit mixin. Saya belum berpengalaman dengan ini jadi saya tidak begitu mengerti bagaimana melakukan ini. Berikut adalah contoh HTML yang saya coba buat gaya:

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

Dalam contoh ini, Twitter Bootstrap akan menata keduanya secara normal h1, tetapi saya ingin lebih selektif tentang area mana yang saya gunakan untuk menerapkan gaya Bootstrap Twitter.

Ini ternyata lebih mudah dari yang saya kira. Baik Less dan Sass mendukung namespacing (bahkan menggunakan sintaks yang sama). Saat Anda menyertakan bootstrap, Anda dapat melakukannya dalam selektor ke namespace-nya:

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

Pembaruan: Untuk versi LESS yang lebih baru, berikut cara melakukannya:

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

Pertanyaan serupa dijawab di sini.

@Andrew jawaban yang bagus. Anda juga ingin mencatat bahwa bootstrap mengubah tubuh {}, terutama untuk menambahkan font. Jadi ketika Anda menamainya melalui LESS / SASS file css output Anda terlihat seperti ini: (dalam 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;
}

tetapi jelas tidak akan ada tag body di dalam div Anda, jadi konten bootstrap Anda tidak akan memiliki font bootstrap (karena semua bootstrap mewarisi font dari induk)

Untuk memperbaikinya, jawabannya harus:

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

    @import 'bootstrap';
}

Menggabungkan jawaban @Andrew, @Kevin dan @ adamj (ditambah beberapa gaya lainnya), jika Anda menyertakan yang berikut ini dalam file bernama "bootstrap-namespaced.less", Anda cukup mengimpor 'bootstrap-namespaced.less' ke mengajukan:

// 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;
}

Menambahkan namespace ke bootstrap CSS akan merusak fungsionalitas modal karena bootstrap menambahkan kelas 'modal-backdrop' langsung ke body. Solusinya adalah dengan memindahkan elemen ini setelah membuka modal, misalnya:

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

Anda dapat menghapus elemen di handler untuk acara 'hide.bs.modal'.

Gunakan file versi .less. Tentukan lebih sedikit file yang Anda perlukan, lalu bungkus file .less tersebut dengan:

.bootstrap-styles {

    h1 { }

}

Ini akan memberi Anda hasil dari:

.bootstrap-styles h1 { }

Saya melakukan GIST dengan Bootstrap 3 semua di dalam kelas bernama .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Saya mulai dengan alat ini: http://www.css-prefix.com/ Dan perbaiki sisanya dengan cari dan ganti di PHPstorm. Semua font @ font-face dihosting di maxcdn.

Contoh baris pertama

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

Namespacing merusak div backdrop Modal plugin, karena itu selalu ditambahkan langsung ke tag <body>, melewati elemen namespacing Anda yang memiliki gaya yang diterapkan padanya.

Anda dapat memperbaikinya dengan mengubah referensi plugin $bodysebelum menampilkan latar belakang:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

The $bodyproperti memutuskan di mana latar belakang akan ditambahkan.

Untuk menjelaskan dengan lebih baik semua langkah yang dibicarakan Andrew bagi mereka yang tidak tahu apa itu Less. Berikut adalah tautan yang menjelaskan dengan cukup baik bagaimana hal itu dilakukan langkah demi langkah Bagaimana mengisolasi Bootstrap atau pustaka CSS lainnya

Solusi paling sederhana - mulai gunakan kelas css terisolasi yang dibuat khusus untuk Bootstrap.

Misalnya, untuk Bootstrap 4.1 unduh file dari direktori css4.1 -

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

dan bungkus HTML Anda dalam div dengan kelas bootstrapiso:

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

Template halaman dengan bootstrap 4 terisolasi akan

<!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>

Saya menghadapi masalah dan metode yang sama yang diusulkan oleh @Andrew sayangnya tidak membantu dalam kasus khusus saya. Kelas bootstrap bertabrakan dengan kelas dari kerangka lain. Ini adalah bagaimana proyek ini telah dimasukkan https://github.com/sneas/bootstrap-sass-namespace . Silakan gunakan.

Sebagai catatan lebih lanjut untuk semua orang. Untuk mendapatkan modals yang bekerja dengan backdrop Anda cukup menyalin style ini dari 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;
}

Bootstrap klon pertama dari github:

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

Instal persyaratan:

npm install

Buka scss / bootstrap.scss dan tambahkan namespace Anda:

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

Kompilasi bootstrap:

npm run dist

Buka dist/css/bootstrap.cssdan hapus namespace dari tag htmldan body.

Setelah itu salin konten folder dist ke dalam proyek Anda dan Anda sudah siap.

Selamat bersenang-senang!