Jak utworzyć przestrzeń nazw Twitter Bootstrap, aby style nie powodowały konfliktów

Chcę używać Twitter Bootstrap, ale tylko na określonych elementach, więc muszę znaleźć sposób na prefiksowanie wszystkich klas Twitter Bootstrap moim prefiksem lub użycie mniejszej liczby kombinacji. Nie mam jeszcze z tym doświadczenia, więc nie bardzo rozumiem, jak to zrobić. Oto przykład kodu HTML, który próbuję nadać stylowi:

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

W tym przykładzie Twitter Bootstrap będzie wyglądał normalnie w obu stylach h1, ale chcę być bardziej selektywny co do obszarów, w których stosuję style Twitter Bootstrap.

Okazało się to łatwiejsze niż myślałem. Zarówno Less, jak i Sass obsługują przestrzenie nazw (nawet przy użyciu tej samej składni). Kiedy dołączasz bootstrap, możesz to zrobić w selektorze, aby umieścić go w przestrzeni nazw:

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

Aktualizacja: w przypadku nowszych wersji LESS, oto jak to zrobić:

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

Tutaj udzielono odpowiedzi na podobne pytanie.

@ Andrew świetna odpowiedź. Warto również zauważyć, że bootstrap modyfikuje treść {}, głównie w celu dodania czcionki. Więc kiedy nadasz mu przestrzeń nazw przez LESS / SASS, twój wyjściowy plik css będzie wyglądał następująco: (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 tagu body w twoim div, więc zawartość bootstrap nie będzie miała czcionki bootstrap (ponieważ cały bootstrap dziedziczy czcionkę po rodzicu)

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

Umieszczając odpowiedzi @Andrew, @Kevin i @ adamj razem (plus kilka innych stylów), jeśli umieścisz następujące elementy w pliku o nazwie „bootstrap-namespaced.less”, możesz po prostu zaimportować „bootstrap-namespaced.less” do dowolnego mniej plik:

// 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 zepsuje funkcjonalność modalną, ponieważ bootstrap dodaje klasę „modal-backdrop” bezpośrednio do treści. Rozwiązaniem jest przeniesienie tego elementu po otwarciu okna modalnego, np .:

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

Możesz usunąć element w module obsługi dla zdarzenia „hide.bs.modal”.

Użyj wersji plików .less. Określ, których mniej plików potrzebujesz, a następnie zawiń te pliki .less za pomocą:

.bootstrap-styles {

    h1 { }

}

To da ci wynik:

.bootstrap-styles h1 { }

Zrobiłem GIST z Bootstrap 3 w klasie o nazwie .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Zacząłem od tego narzędzia: http://www.css-prefix.com/ A resztę naprawiłem, wyszukując i zamieniając 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%}

Przestrzenie nazw przerywają tło div wtyczki Modal, ponieważ jest on zawsze dodawany bezpośrednio do tagu <body>, pomijając element przestrzeni nazw, do którego zastosowano style.

Możesz to naprawić, zmieniając odniesienie do wtyczki na $bodyprzed wyświetleniem tła:

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

$bodyNieruchomość decyduje, gdzie zostaną dodane tłem.

Aby lepiej wyjaśnić wszystkie kroki, o których mówił Andrew, tym, którzy nie wiedzą, czym jest Less. Oto link, który całkiem dobrze wyjaśnia jak to się robi krok po kroku Jak izolować 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 kod HTML w div z klasą bootstrapiso:

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

Szablon strony z izolowanym bootstrapem 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>

Napotkałem ten sam problem 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 . Zapraszam do korzystania.

Jako kolejna uwaga 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;
}

Pierwszy klon bootstrap z github:

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

Wymagania dotyczące instalacji:

npm install

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

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

Skompiluj bootstrap:

npm run dist

Otwórz dist/css/bootstrap.cssi usuń przestrzeń nazw z tagu htmli body.

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

Baw się dobrze!