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

106

Twitter Bootstrapを使用したいのですが、特定の要素でのみ使用するため、すべてのTwitter Bootstrapクラスに接頭辞を付ける方法を見つける必要があります。または、少ないミックスインを使用します。私はまだこれを経験していないので、これを行う方法がよくわかりません。以下は、スタイルを設定しようとしているHTMLの例です。

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

この例では、Twitter Bootstrapは両方h1のスタイルを通常のスタイルにしますが、Twitter Bootstrapスタイルを適用する領域をより選択したいと思います。

twitter-bootstrap  less 
— アンドリュー
ソース
— Sherbrow
これは、「競合を回避するためにブートストラップCSSを分離する方法」に役立ちます。formden.com/blog/isolate
— Samuel Ev

回答:

131

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

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

更新： LESSの新しいバージョンの場合、その方法は次のとおりです。

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

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

— アンドリュー
ソース
ねえ、私はこれをフォローしようとしていますが、少し混乱しています。Angularを使用しています。CDNを使用して、bootstrap.min.js、less.min.js、およびbootstrap.min.cssファイルを参照しました。ただし、アプリケーションで名前空間をどこに配置すればよいのか本当にわかりません。
— バットマン
これを行った後、私のモーダルは使用しても機能しません。これは予想されることですか？
— バットマン
2
@Batman本質的にすべてのBootstrapを書き換えてプレフィックスを含めるため、CDNを使用したくありません。@import元のブートストラップにSASSのようなプリプロセッサを使用する必要があります。モーダルにも問題がありました。Bootstrapが特定のクラスを最上位のbodyタグに適用するためです。解決策を見つけたかどうか覚えていません。結局、自分でモーダル置換を書いてしまったと思います。
— Andrew
4
これは、バージョン3（hereswhatidid.com/2014/02/…）以降は機能しません
— adamj
2
誰かがこのインポートステートメントの場所を説明できますか？別の.lessファイルのように見えます。私はそれを行い、それをbootstrap lessフォルダーに入れましたが、名前空間でコンパイルできません。私は何かが足りないと思います
— fehays 2015
35

@Andrew素晴らしい回答。また、主にフォントを追加するために、ブートストラップによって本体{}が変更されることにも注意してください。したがって、LESS / SASSを介して名前空間を設定すると、出力cssファイルは次のようになります（ブートストラップ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-styles {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: white;

    @import 'bootstrap';
}
— ケビン
ソース
あなたは忘れましたmargin: 0;
— kolobok
1
注意！理由はわかりませんが、.my-prefix .my-prefix ...などの一部の場所では生成が少ないため、検索して置き換える必要もあります。
— kolobok
10

@ 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;
}
— 特異性
ソース
1
ありがとう。それは本当に最高のソリューションです。
— kolobok
完璧に動作します！
— KEVIN Berthommier
8

ブートストラップCSSに名前空間を追加すると、ブートストラップが本体に「modal-backdrop」クラスを直接追加するため、モーダル機能が無効になります。回避策は、モーダルを開いた後にこの要素を移動することです。例：

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

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

— ユーザー3567343
ソース
ngbootstrapで角度を使用している場合、特定のコンテナー内でモーダルを開くことを選択できます。this.modalService.open('myModal', {container: '#modalgoeshere'})
— 恵那
3

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

.bootstrap-styles {

    h1 { }

}

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

.bootstrap-styles h1 { }
— スコットシンプソン
ソース
2

私はBootstrap 3でGISTをすべて.bootstrap-wrapperという名前のクラス内で行いました 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%}
— ジーノ
ソース
2

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

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

myDialog.modal({
    show: false
});

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

myDialog.modal("show");

$body背景が追加される位置プロパティが決定します。

— thenickdude
ソース
1

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

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

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

そして、bootstrapisoクラスを使用して、HTMLをdivでラップします。

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

孤立したブートストラップ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>
— ユーザー3879851
ソース
0

@Andrewによって提案された同じ問題と方法に直面しましたが、残念ながら私の特定のケースでは役に立ちませんでした。ブートストラップクラスが別のフレームワークのクラスと衝突しました。これが、このプロジェクトがhttps://github.com/sneas/bootstrap-sass-namespaceに採用された方法です。お気軽にご利用ください。

— スネアス
ソース
0

皆のためのさらなるメモとして。背景でモーダルを動作させるには、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

githubからの最初のクローンブートストラップ：

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

インストール要件：

npm install

scss / bootstrap.scssを開き、名前空間を追加します。

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

ブートストラップをコンパイルします。

npm run dist

開いてdist/css/bootstrap.cssから名前空間を削除htmlし、bodyタグ。

その後、distフォルダーのコンテンツをプロジェクトにコピーすれば、準備は完了です。

楽しんで！

— トビアス・エルンスト
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.