web-dev-qa-db-ja.com

Twitterの名前空間を設定する方法Bootstrapスタイルが競合しないようにする

Twitter Bootstrapを使用したいが、特定の要素でのみ使用するため、すべてのTwitter Bootstrapクラスにプレフィックスを付けるか、またはより少ないmixinを使用する方法を見つけ出す必要があります。まだこれを経験しているので、私はこれを行う方法をよく理解していません。ここに私がスタイルしようとしているHTMLの例です：

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

この例では、Twitter Bootstrapは両方ともh1sですが、Twitter Bootstrap=スタイルを適用する領域をより選択的にしたいです。

twitter-bootstrapless
98
Andrew

これは思ったより簡単だった。 LessとSassはどちらもネームスペースをサポートしています（同じ構文を使用しても）。ブートストラップを含める場合は、セレクタ内で名前空間に含めることができます。

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

更新：LESSの新しいバージョンについては、以下の方法で行います：

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

同様の質問がここで回答されました。

126
Andrew

@アンドリュー素晴らしい答え。また、主にフォントを追加するために、bootstrapが本体{}を変更することにも注意してください。そのため、LESS/SASSを介して名前空間を作成すると、出力CSSファイルは次のようになります（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;
}

しかし、明らかにdiv内にはbodyタグがないため、bootstrapコンテンツにはbootstrapフォントがありません（すべてのbootstrapは親からフォントを継承するため）

修正するには、答えは次のとおりです。

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

    @import 'bootstrap';
}
33
Kevin

@ Andrew、@ Kevin、@ adamjの回答（および他のいくつかのスタイル）を組み合わせて、「bootstrap-namespaced.less」という名前のファイルに以下を含めると、単に 'bootstrap-namespaced.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;
}
9
Singularity

bootstrap CSSに名前空間を追加すると、bootstrap=がモーダル背景クラスを本体に直接追加するため、CSSはモーダル機能を破壊します。回避策はこれを移動することですモーダルを開いた後の要素、たとえば：

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

'hide.bs.modal'イベントのハンドラーで要素を削除できます。

7
user3567343

ファイルの.lessバージョンを使用します。必要なファイルの数を減らし、それらの.lessファイルを次のものでラップします。

.bootstrap-styles {

    h1 { }

}

これにより、次の出力が得られます。

.bootstrap-styles h1 { }
3
Scott Simpson

アンドリューがレスが何であるかを知らない人々のために話していたすべてのステップをよりよく説明するために。これがどのようにステップバイステップで実行されるかをよく説明するリンクです Bootstrapまたは他のCSSライブラリを分離する方法

2
eKelvin

Bootstrap 3 .bootstrap-wrapperという名前のクラス内ですべてGistを実行しました https://Gist.github.com/onigetoc/20c4c3933cabd8672e3e

私はこのツールから始めました： http://www.css-prefix.com/ そして、PHPstormで検索と置換で残りを修正します。 @ font-faceのすべてのフォントはmaxcdnでホストされます。

最初の行の例

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

Namespacingは、常に<body>タグに直接追加され、スタイルが適用されたnamespacing要素をバイパスするため、Modalプラグインの背景divを壊します。

これを修正するには、背景を表示する前にプラグインの参照を$bodyに変更します。

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

$bodyプロパティは、背景を追加する場所を決定します。

1
thenickdude

皆のためのさらなるメモとして。背景でモーダルを機能させるには、これらのスタイルを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;
}
0
Matthew Kirkley

@Andrewによって提案された同じ問題と方法に直面しましたが、残念ながら私の特定のケースでは役に立ちませんでした。 Bootstrapクラスは別のフレームワークのクラスと衝突しました。これが、このプロジェクトが受け入れられた方法です https://github.com/sneas/bootstrap-sass-namespace 。自由に使用できます。

0
sneas

最も簡単な解決策-Bootstrapのカスタムビルド分離cssクラスの使用を開始します。

たとえば、Bootstrap 4.1 css4.1ディレクトリからのファイルのダウンロード-

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

そして、クラスbootstrapisoでdivにHTMLをラップします：

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

分離されたbootstrap 4のページテンプレートは

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