Twitter Bootstrap ad alanı nasıl kullanılır, böylece stiller çakışmaz

Twitter Önyükleme'yi kullanmak istiyorum, ancak yalnızca belirli öğelerde, bu nedenle tüm Twitter Önyükleme sınıflarına önekimle önek eklemenin veya daha az karışım kullanmanın bir yolunu bulmam gerekiyor. Henüz bu konuda deneyimli değilim, bu yüzden bunu nasıl yapacağımı tam olarak anlamıyorum. Stil vermeye çalıştığım HTML'ye bir örnek:

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

Bu örnekte, Twitter Bootstrap her ikisinin de normal stili olurdu h1, ancak Twitter Bootstrap stillerini hangi alanlarda uygulayacağım konusunda daha seçici olmak istiyorum.

Bu düşündüğümden daha kolay oldu. Hem Less hem de Sass, ad aralığını destekler (aynı sözdizimini çift kullanarak). Bootstrap'i dahil ettiğinizde, bunu adlandırmak için bir seçici içinde yapabilirsiniz:

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

Güncelleme: LESS'in daha yeni sürümleri için bunu şu şekilde yapabilirsiniz:

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

Burada benzer bir soru cevaplandı.

@Andrew harika cevap. Ayrıca, bootstrap'in özellikle yazı tipi eklemek için {} gövdesini değiştirdiğini de not etmek isteyeceksiniz. Dolayısıyla, onu LESS / SASS aracılığıyla ad alanını adlandırdığınızda, çıktı css dosyanız şu şekilde görünür: (bootstrap 3'te)

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

ancak belli ki div'inizde bir gövde etiketi olmayacak, bu nedenle önyükleme içeriğiniz önyükleme yazı tipine sahip olmayacak (çünkü tüm önyükleme, yazı tipini ebeveynden devralır)

Düzeltmek için cevap şöyle olmalıdır:

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

    @import 'bootstrap';
}

@Andrew, @Kevin ve @ adamj'ın yanıtlarını bir araya getirerek (artı birkaç başka stil), aşağıdakileri "bootstrap-namespaced.less" adlı bir dosyaya eklerseniz, 'bootstrap-namespaced.less'ı herhangi bir kısma aktarabilirsiniz. dosya:

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

Önyükleme CSS'ye bir ad alanı eklemek, önyükleme doğrudan gövdeye bir 'modal-zemin' sınıfı eklediği için kalıcı işlevselliği bozar. Geçici bir çözüm, modal'ı açtıktan sonra bu öğeyi taşımaktır, örneğin:

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

'Hide.bs.modal' olayı için bir işleyicideki öğeyi kaldırabilirsiniz.

Dosyaların .less sürümünü kullanın. Daha az dosyaya ihtiyacınız olduğunu belirleyin, ardından bu .less dosyalarını şununla sarın:

.bootstrap-styles {

    h1 { }

}

Bu size şu çıktıyı verecektir:

.bootstrap-styles h1 { }

Bootstrap 3 ile tümü .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e adlı bir sınıf içinde bir GIST yaptım

Bu araçla başladım: http://www.css-prefix.com/ Ve geri kalanını PHPstorm'da arama ve değiştirme ile düzeltin. Tüm fontlar @ font-face maxcdn'de barındırılır.

İlk satır örneği

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

Ad alanı, Modal eklentisinin arka plan div bölümünü bozar, çünkü bu her zaman doğrudan <body> etiketine eklenir ve stillerin uygulandığı ad alanı öğenizi atlar.

Eklentinin referansını $bodyarka planı göstermeden önce olarak değiştirerek bunu düzeltebilirsiniz :

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

$bodyArka eklenecektir nerede mülkiyet karar verir.

Less'in ne olduğunu bilmeyenler için Andrew'un bahsettiği tüm adımları daha iyi açıklamak için. İşte adım adım nasıl yapıldığını oldukça iyi açıklayan bir bağlantı Bootstrap veya diğer CSS kitaplıkları nasıl izole edilir

En basit çözüm - Bootstrap için özel derlenmiş yalıtılmış css sınıflarını kullanmaya başlayın.

Örneğin, Bootstrap 4.1 için dosyaları css4.1 dizininden indirin -

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

ve HTML'nizi bootstrapiso sınıfıyla bir div içine sarın:

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

İzole önyükleme 4 içeren sayfa şablonu

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

@Andrew tarafından önerilen aynı sorun ve yöntemle karşılaştım ne yazık ki benim özel durumumda yardımcı olmadı. Bootstrap sınıfları, başka bir çerçeveden sınıflarla çarpıştı. Bu proje bu şekilde https://github.com/sneas/bootstrap-sass-namespace . Kullanmaktan çekinmeyin.

Herkes için başka bir not olarak. Bir fon ile çalışan modalleri elde etmek için bu stilleri bootstrap3'ten kopyalayabilirsiniz.

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

Github'dan ilk klon önyüklemesi:

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

Yükleme gereksinimleri:

npm install

Scss / bootstrap.scss dosyasını açın ve ad alanınızı ekleyin:

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

Bootstrap'i derleyin:

npm run dist

Ad dist/css/bootstrap.cssalanını htmlve bodyetiketinden açın ve kaldırın .

Daha sonra dist klasörünün içeriğini projenize kopyalayın ve hazırsınız.

İyi eğlenceler!