61

古いページやフォームがテーブルでレイアウトされた既存のWebサイトがあり、徐々にCSSに移行しようとしています。Twitter Bootstrapスタイルシート（特にフォームのスタイル）を使用したいのですが、明示的に要求したページのセクションでのみ使用します。たとえば、フォーム全体を次のようにdivで囲むことができます。

<div class="bootstrap">
 <!-- everything in here should have the Bootstrap CSS applied -->
 <form>
   <p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
 </form>
</div>

他のすべてのフォームを同時に変更することはできないため、他のすべてのフォームを現在と同じままにしておく必要があります。これを行う簡単な方法はありますか？Bootstrap CSSのすべてのスタイルを調べて、親セレクターを追加することはできますが（たとえば、「p」は「div.bootstrap p」になります）、時間がかかり、スタイルを見逃しやすくなります。

編集：そのようなことが不可能な場合、ファイルからすべてのスタイルを抽出し、プレフィックスを追加して、それらを再度保存できる無料のツールはありますか？

4

7 に答える 7

46

Bootstrap 3の場合、以下を使用すると簡単になりますless。

Bootstrapソースコードをダウンロードして、次のstyle.lessようなファイルを作成します。

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

最後に、lessファイルをコンパイルする必要があります。多くの選択肢があります

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js

または、を使用してファイルnpmをインストールしてlessからコンパイルします。style.lessstyle.css

npm install -g less
lessc style.less style.css
于 2013-02-27T14:55:15.343 に答える
28

最終的な修正は、SASS（オフサイトの誰かが推奨）を使用することでした。これにより、要素をネストして、最終的なCSSを自動的に生成できるようになります。ステップバイステップのプロセスは次のとおりです。

  1. 2つのブートストラップファイル（bootstrap.cssおよびbootstrap-responsive.css）をに連結しますbootstrap-all.css。
  2. bootstrap-all.scssコンテンツを含む新しいSASSファイルを作成しますdiv.bootstrap {。
  3. に追加bootstrap-all.cssしbootstrap-all.scssます。
  4. に追加してdiv.bootstrapセレクターを閉じます。}bootstrap-all.scss
  5. SASSを実行bootstrap-all.scssして、最終的なCSSファイルを作成します。
  6. 最終ファイルでYUICompressorを実行して、最小化されたバージョンを作成します。
  7. 最小化されたバージョンをhead要素に追加し、スタイルを適用するすべてのものをでラップします<div class="bootstrap"></div>。
于 2012-08-07T08:25:34.640 に答える
15

仕事やその他の理由でLESS/SASSを使用できない場合は、CSSソリューションを考え出しました。

  1. 私はこのサイトhttp://www.css-prefix.com/を使用し、そこにbootstrap.min.cssをコピーして貼り付けました。プレフィックス='.bootstrap'とスペーサー=''を設定しました。完全ではない場合を除いて、すべてに.bootstrapのプレフィックスが付きます。
  2. '.bootstrap @media'のgrepを実行すると、開き角かっこの右側の最初のクラスの親として.bootstrapがないことがわかります。これらすべてのオカレンスに.bootstrapを追加します。私にとっては約68です。
  3. 次に、すべての「.bootstrap@media」を「@media」に置き換えます。
  4. 最後のステップは、すべての'.bootstrap@'を'@'に置き換えることです（約5回出現する必要があります）。

例：

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

に交換する必要があります 

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

強引な方法の一種なので、必ず最初に上記のLESS/SASS方法を試してください。

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>
于 2015-06-25T20:56:52.773 に答える
6

簡単な解決策があります。

  1. ブートストラップcssコンテンツをこの（http://css2sass.herokuapp.com/）オンラインcssからscss/sassコンバーターにコピーします。

  2. div.bootstrap{scssコンテンツの先頭にタグ情報（例）を追加し、最後にタグを閉じます。

  3. scssのコンテンツ全体をこのscssからcssへのコンバーター（https://www.sassmeister.com/）にコピーして変換します:)

于 2017-12-08T10:51:20.610 に答える
4

私はこれらの答えのどれにも満足していませんでした。Lessを使用してルールのスコープを設定すると、あらゆる種類の欠陥が発生しました。たとえば、Clearfixはすべて台無しにされました。そして、のようなルールは、私が本当に望んでいたものの代わりにbutton.closeなりました： 。button.bootstrap close.bootstrap button.close

私は別のアプローチを取りました。私はPostCSSを使用して、Bootstrapで提供されるすぐに使用可能なCSSを処理しています。Scopifyプラグインを使用して、すべてのルールを。でスコープし.bootstrapます。

これは主にそこに到達します。もちろん、無意味になるルールと無意味になるルールがhtmlあります。心配はいりません...PostCSS変換を記述してクリーンアップすることができます。body.bootstrap html.bootstrap body

var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
    return function(css, result) {
        css.walkRules(function(rule) {
            rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
            rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
        });
    }
});

class="bootstrap"これで、トップレベルにを追加することで、すべてのBootstrapスタイリングを分離できます。

于 2016-01-25T21:21:13.933 に答える
3

それは大変です。同じWebページの異なる部分に異なるcssスタイルシートを適用することはできません。

これを行う唯一の方法は、コンテンツ用に別のファイルを作成してブートストラップスタイルを取得し、次のようにページにi-frameすることだと思います。

<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>

次にcontent-to-take-bootstrap-styles.html 、ヘッダーのブートストラップスタイルシートを参照します。ただし、iframeの複雑さはすべてあります。たとえば、iframe要素はコンテンツの長さに合わせて拡張されません。

于 2012-08-06T15:46:49.257 に答える
1

Bootstrap 4.1（LESSでコンパイル）用にすぐに使用できる分離されたcssを使用できます-

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

テーマのCSSを分離しました-

Bootstrap CSSを使用するには、次のように、HTMLをクラスbootstrapisoを使用してdivでラップします。

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

そして、次のようにフォルダcss4.1のcssスタイルを使用します。

<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>

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

終わり！

于 2018-04-16T17:22:52.290 に答える