Cara namespace Twitter Bootstrap agar gaya tidak konflik

106

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.

Andrew
sumber
Ini akan membantu "Bagaimana Mengisolasi Bootstrap CSS untuk Menghindari Konflik" formden.com/blog/isolate-bootstrap
Samuel Ev

Jawaban:

131

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
sumber
Hei, saya mencoba mengikuti ini tetapi saya agak bingung. Saya bekerja dengan Angular. Menggunakan CDN, saya telah mereferensikan file bootstrap.min.js, less.min.js, dan bootstrap.min.css. Saya tidak begitu yakin di mana harus melakukan namespacing di aplikasi saya.
Batman
Setelah melakukan ini, modal saya tidak berfungsi seperti yang digunakan juga. Apakah ini yang diharapkan?
Batman
2
@Batman Anda tidak ingin menggunakan CDN, karena pada dasarnya Anda menulis ulang semua Bootstrap untuk menyertakan awalan. Anda perlu menggunakan preprocessor seperti SASS ke @importBootstrap asli. Saya juga memiliki masalah dengan modals, saya pikir karena Bootstrap menerapkan kelas tertentu ke tag body tingkat atas. Saya tidak ingat apakah saya menemukan solusi. Pada akhirnya, saya pikir saya akhirnya menulis pengganti modal saya sendiri.
Andrew
4
Ini tidak berfungsi lagi setelah versi 3 ( hereswhatidid.com/2014/02/… )
adamj
2
Bisakah seseorang menjelaskan ke mana pernyataan impor ini harus pergi? Sepertinya file .less terpisah. Saya melakukan itu dan meletakkannya di folder bootstrap less, tetapi tidak dapat dikompilasi dengan namespacing. Saya pikir saya melewatkan sesuatu
fehays
35

@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';
}
Kevin
sumber
Anda lupamargin: 0;
kolobok
1
Perhatian! Saya tidak tahu kenapa, tapi kurang dihasilkan di beberapa tempat css seperti .my-prefix .my-prefix ..., jadi anda juga perlu mencari & menggantinya.
kolobok
10

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;
}
Keganjilan
sumber
1
Terima kasih. Ini benar-benar solusi terbaik.
kolobok
Bekerja dengan sempurna!
Kévin Berthommier
8

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'.

pengguna3567343
sumber
Jika Anda menggunakan angular dengan ngbootstrap, Anda dapat memilih untuk membuka modal di dalam wadah tertentu. this.modalService.open('myModal', {container: '#modalgoeshere'})
Ena
3

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 { }
Scott Simpson
sumber
3

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%}
Gino
sumber
2

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.

kemudianickdude
sumber
2

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

eKelvin
sumber
1

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>
pengguna3879851
sumber
0

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.

sneas
sumber
0

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;
}
Matthew Kirkley
sumber
0

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!

Tobias Ernst
sumber