28

ウィジェットのようなものをGmailメッセージに添付するChrome拡張機能を構築しています。ユーザーが gmail.com サイトにいる場合、すべてのメール (gmail コンテキスト ガジェットのようなもの) の下に表示されます。

アプリで使用する twitter ブートストラップのようないくつかの CSS フレームワークを調べました。mywidget で使用すると、css クラス名の競合が原因で、既存の gmail スタイルが台無しになりました。名前の衝突がない場合に使用できる他のフレームワークはありますか? jquery-ui フレームワークに出会いました。ここのすべてのクラス名は .ui-* で始まるため、名前の競合は発生しません。一意のクラス名を持つ、このような他の css フレームワークはありますか?

4

5 に答える 5

51

更新 2: @GFoley83 によって提供された v3.1.1の要点は次のとおりです。

更新:以下に結合されたペーストビンは、Twitter Bootstrapバージョン 2.0.4です。

確実に最新バージョンを使用し、自分でコンパイルする必要があります。

ブートストラップの少ない ファイルで行ったことは次のとおりです。

.tw-bs {
    @import "less/bootstrap.less";
}

これが結果です: http://pastebin.com/vXgRNDSZ

デモ (jsfiddle)

検索/置換を簡単に実行できるのが気に入らない場合はtw-bs、競合があってはなりません。

于 2012-08-07T08:27:10.430 に答える
6

@Sherbrow ソリューションを使用しましたが、レスポンシブ ファイルも追加する必要がありました。

.my-bootstrap-container {
     @import "less/bootstrap.less";
     @import "less/responsive.less";
}

そして実行します

node_modules/less/bin/lessc demo.less -x > demo.css

誰かが完全なステップバイステップのチュートリアルを必要とする場合は、独自の名前空間コンテナーのブートストラップをコンパイルする方法について、ブログ投稿を作成しましたhttp://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to -your-joomla-2-5-extension

最後の部分は Joomla 用ですが、最初はグローバルに使用できます。また、最新のコンパイル済みブートストラップ バージョン 2.3.2 へのリンクもあります。.dp-containerを検索して置換するだけです。

于 2013-05-11T08:20:19.563 に答える
2

2016 Update: この問題を (ブートストラップを再コンパイルするのではなく) 軽減する今後の方法は、Web コンポーネント、特にシャドウ DOM を利用することです。これにより、Web ブラウザーが別のページを開いたり、ページ間で通信できなくなったりすることなく、アプリを自己完結型 (ほぼ iFrame のように) にすることができます。

あなたのコンポーネントが含まれていると言う<div id='plugin'>...</div>

その div 内にあるものを頭の中のタグに移動できます。

<template id="template"><!--Your Code Here--></template>

テンプレートには、必要なすべてのブートストラップ リンク タグと js を含めることができます。次に、JavaScript/ブックマークレットで、次のように記述できます

var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);

Web コンポーネント (および Shadow DOM) の詳細については、http ://webcomponents.org/articles/introduction-to-shadow-dom/ を参照してください。

于 2016-02-03T06:21:01.953 に答える
0

jquery ui - http://jqueryui.com/の使用から始めました。これは、gmail と衝突しない独自の css クラスがあるためです。YUI は、私が見つけたもう 1 つのフレームワークです。しかし、Sherbrow は、ブートストラップ css を独自の css スタイル名で使用する方法を示しました。

于 2012-08-07T17:37:52.867 に答える
0

現在受け入れられている回答では、フォームが正しくレンダリングされませんでした (SASS とブートストラップ 4 ベータ版を使用)。以下は私にとってはうまくいきます：

.bootstrap {
    @import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';

    box-sizing: border-box;
}

SASS スタイルシートをコンパイルすると、以下が生成されるため、ボックスのサイズ変更は重要です。

.bootstrap html {
  box-sizing: border-box;
  ...
}

つまり、box-sizingプロパティはhtml要素内の要素に配置されますclass="bootstrap"- もちろん存在しません。他のスタイルがオンhtmlになっbodyている可能性があり、手動でスタイルに追加したい場合があります。

これで、ブートストラップを使用してスタイル設定されたコンテンツをbootstrapクラス内に配置できるようになりました。

<div class="bootstrap">
  <div class="container">
    ...
  </div>
</div>
于 2017-09-15T11:12:30.167 に答える