0

RESPONSIVE TEMPLATEでJoomla 2.5を使用しています。しかし、私のコンポーネントは応答しません。TWITTER BOOTSTRAPを使用してコンポーネントの応答性を変更するにはどうすればよいですか?

Plsが私に提案を与えることを知っている人は誰でも

ありがとう

プラサンナ

4

1 に答える 1

1

興味深い挑戦です。他の人が指摘しているように、URL の例を見ないと具体的な提案をする方法はありませんが、これで始めることができます。

  • ブートストラップ css とオプションで bootstrap.js をテンプレートに追加してサイト全体に含めるか、JS CSS コントロールなどの拡張機能を使用して特定のページにのみロードします。
  • カスタム CSS はおそらく、拡張機能を使用するページの要素だけをターゲットにする必要があります。モジュールの場合は、モジュール クラス サフィックスを追加します (モジュール マネージャー > 詳細設定の下)。または、メニュー項目の場合は、リンク CSS スタイル (メニュー マネージャー > リンク > リンク タイプ オプションの下) を追加します。
  • 一部のプラグインやコンポーネントには Bootstrap js が必要になるため、これが必要な場合とそうでない場合があります。その場合は、bootstrap.js を呼び出す前に jQuery も追加する必要があります。Joomla 2.5 を使用しているため、デフォルトで MooTools がロードされます。これは jQuery と競合する可能性があるため、拡張機能を使用して jQuery をロードするか、 mootoolsを無効にできる場合があります

それから楽しい部分が始まります。

  • ブラウザーで拡張機能を使用しているページに移動し、拡張機能によって挿入された要素を調べ、ハードコードされた寸法を持つ要素を探し、カスタム CSS スタイルシートを使用してこれらをパーセンテージ値でオーバーライドします。

    たとえば、サイズがハードコードされた画像があり、上記のモジュール クラス サフィックスにmake-responsiveを使用する場合、カスタム css は次のようになります。

    .make-レスポンシブ img {
    幅: 30%; 高さ: 自動; }

    実際には、拡張機能によって複数の画像が挿入される可能性があり、それらを異なるスタイルにする必要があるため、問題の画像だけをターゲットにするためにフックできる他のプロパティまたはクラスを探します (例: .make-responsive table img {..})

  • プロセスをさらに改良するには、メディアクエリを使用してさまざまなデバイス幅をターゲットにする必要がある場合があります
  • ブラウザの幅で遊んだときに何が起こるかを調べます。必要な配置を得るために、特定のビューポートで一部のセレクターにフロートとクリアを追加する必要がある場合や、一部の要素を非表示にする必要がある場合もあります。

運が良ければ、これだけで十分です。拡張機能がテーブル レイアウトに大きく依存している場合、それを扱うのは難しいかもしれません。

幸運を！

于 2013-06-16T12:11:36.810 に答える