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

106

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.

Andrzej
źródło
możliwy duplikat frameworka css dla aplikacji z istniejącym
arkuszem
To pomogłoby „Jak izolować
Samuel Ev,

Odpowiedzi:

132

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.

Andrzej
źródło
Hej, próbuję to śledzić, ale jestem trochę zdezorientowany. Pracuję z Angularem. Korzystając z sieci CDN, odwołałem się do plików bootstrap.min.js, less.min.js i bootstrap.min.css. Nie jestem jednak pewien, gdzie zrobić przestrzeń nazw w mojej aplikacji.
Batman,
Po wykonaniu tej czynności mój modal nie działa tak, jak go używa. Czy można się tego spodziewać?
Batman,
2
@Batman Nie chcesz używać CDN, ponieważ zasadniczo przepisujesz cały Bootstrap, aby zawierał prefiks. Musisz użyć preprocesora, takiego jak SASS, do @importoryginalnego Bootstrapa. Wydaje mi się, że miałem również problemy z modami, ponieważ Bootstrap stosuje określone klasy do tagu body najwyższego poziomu. Nie pamiętam, czy znalazłem rozwiązanie. Wydaje mi się, że w końcu napisałem własną zamianę modalną.
Andrew,
4
To już nie działa po wersji 3 ( hereswhatidid.com/2014/02/… )
adamj
2
Czy ktoś może wyjaśnić, gdzie powinno się znaleźć to oświadczenie importowe? Wygląda na osobny plik .less. Zrobiłem to i umieściłem go w folderze bootstrap less, ale nie kompiluje się z przestrzenią nazw. Myślę, że czegoś mi brakuje
fehays
35

@ 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';
}
Kevin
źródło
Zapomniałeśmargin: 0;
kolobok
1
Uwaga! Nie wiem dlaczego, ale mniej generowany w niektórych miejscach css, takich jak .my-prefix .my-prefix ..., więc musisz go również wyszukać i zamienić.
kolobok
10

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;
}
Osobliwość
źródło
1
Dzięki. To naprawdę najlepsze rozwiązanie.
kolobok
Działa świetnie !
Kévin Berthommier
8

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

user3567343
źródło
Jeśli używasz kątowego z ngbootstrap, możesz otworzyć modal w określonym pojemniku. this.modalService.open('myModal', {container: '#modalgoeshere'})
Włącza
3

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 { }
Scott Simpson
źródło
3

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%}
Gino
źródło
2

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.

thenickdude
źródło
2

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

eKelvin
źródło
1

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>
user3879851
źródło
0

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.

sneas
źródło
0

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;
}
Matthew Kirkley
źródło
0

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!

Tobias Ernst
źródło