Jak przestrzeni nazw Twitter Bootstrap, aby style nie konflikt

@ Andrzej świetna odpowiedź. Warto również zauważyć, że bootstrap modyfikuje treść {}, głównie w celu dodania czcionki. Więc gdy przestrzeń nazw jest przez LESS/SASS Twój wyjściowy plik css wygląda tak: (w 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;
}

Ale oczywiście nie będzie znacznika body wewnątrz div, więc zawartość bootstrap nie będzie miała czcionki bootstrap (ponieważ wszystkie bootstrap dziedziczą czcionkę od rodzica)

Aby naprawić, odpowiedź powinna brzmieć:

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

    @import 'bootstrap';
}

Łączenie odpowiedzi @Andrew, @ Kevin i @ adamj (plus kilka innych stylów), jeśli umieścisz poniższe w pliku o nazwie "Bootstrap-namespace.mniej", można po prostu zaimportować ' bootstrap-namespace.less ' do dowolnego pliku less:

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

Dodanie przestrzeni nazw do Bootstrap CSS spowoduje przerwanie funkcjonalności modalnej, ponieważ Bootstrap dodaje klasę 'modal-background' bezpośrednio do ciała. Obejście polega na przesunięciu tego elementu po otwarciu modalu, np.:

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

Możesz usunąć element z obsługi zdarzenia 'hide. BS. modal'.

Użyj .mniejsza wersja plików. Określ, których mniej plików potrzebujesz, a następnie zawiń je .less files with:

.bootstrap-styles {

    h1 { }

}

To daje wynik:

.bootstrap-styles h1 { }

Zrobiłem GIST z Bootstrap 3 wszystko wewnątrz klasy o nazwie .Bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Zacząłem od tego narzędzia: http://www.css-prefix.com / I naprawić resztę za pomocą wyszukiwania i zastępowania w PHPstorm. Wszystkie czcionki @ font-face są hostowane na maxcdn.

Przykład pierwszej linii

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

Pierwszy klon bootstrap z Githuba:

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

Wymagania instalacji:

npm install

Otwórz scss/bootstrap.scss i dodaj swoją przestrzeń nazw:

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

Kompiluj bootstrap:

npm run dist

Otwórz dist/css/bootstrap.css i usuń przestrzeń nazw z tagu html i body.

Następnie skopiuj zawartość folderu dist do swojego projektu i gotowe.

Przestrzeń nazw przerywa div wtyczki modalnej, ponieważ jest ona zawsze dodawana bezpośrednio do tagu

Możesz to naprawić, zmieniając odniesienie wtyczki na $body, zanim wyświetli tło:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

Właściwość $body decyduje, gdzie zostanie dodane tło.

Aby lepiej wyjaśnić wszystkie kroki, o których mówił Andrew dla tych, którzy nie wiedzą, co to jest mniej. Oto link, który bardzo dobrze wyjaśnia, jak to się robi krok po kroku Jak wyizolować Bootstrap lub inne biblioteki CSS

Najprostsze rozwiązanie-zacznij używać niestandardowych izolowanych klas css dla Bootstrap.

Na przykład dla Bootstrap 4.1 pobierz pliki z katalogu css4. 1 -

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

I zawiń swój HTML w div z klasą bootstrapiso:

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

Szablon strony z izolowanym bootstrap 4 będzie

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

Spotkałem się z tym samym problemem i metoda zaproponowana przez @ Andrew niestety nie pomogła w moim konkretnym przypadku. Klasy Bootstrap zderzyły się z klasami z innego frameworka. Tak powstał ten projekt https://github.com/sneas/bootstrap-sass-namespace .

Jako kolejna notka dla wszystkich. Aby modały działały z tłem, możesz po prostu skopiować te style z 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;
}