web-dev-qa-db-ja.com

bootstrapビューでレスポンシブデザインを使用する方法

少し混乱して、現在の学習に行き詰まっています。 Bootstrap 3のWorkbench、Panels、Viewsを使用する私の努力は私のデスクトップではかなりよく見えますが、Web Developerプラグインでレスポンシブレイアウトをテストすると、携帯電話などの小さな解像度での使用はかなり悲惨に見えます、タブレットなど。この時代では、私はむしろこれらのメディアに主に焦点を当てたいと思います。

私の問題は、ビューグリッドマトリックス（たとえば3 * 4セル）が（1600 * 900）デスクトップで適切に機能することですが、ビューマトリックスレイアウトを小さなメディアで繰り返しますが、明らかに正しくありません。リストだといいですね。少し調べてみましたが、追加の有効なモジュールが見つからない可能性があり、これを見つけました：

https://www.drupal.org/project/views_sensitive_grid

他の人は単にCSS（SPANなど）を使用していると言いますが、私の発見はDrupal固有ではないため、私が一般的に行う必要があることと混同しています。

モバイル、タブレットのレイアウトなど、ユーザーダッシュボードの見栄えをよくする必要があります。Panelページを使用する私のアプローチは今では間違っていたので、これらのページをもう一度再起動するか、欠けている可能性のあることを単純に実行しますそもそも。

誰かが私が物事を進めるために行う必要がある規範にいくつかの指標を与えることができますか？

ご協力いただきありがとうございます。

穏やかにお願いします。私は病気が続いており、進行中の薬は私の認知能力を助けていないので、私はそんなに馬鹿ではありません（-;

viewspanelstheming
2
Paul B

あなたの問題は、ビューのグリッド形式を使用することだと思います。これはテーブルベースであり、希望どおりに応答しません。テーブルは応答性がありますが、テーブルのように表示できます（列の非表示、スライダーの挿入など）。

フォーマットとして「フォーマットされていないリスト」を使用する必要があり、「行クラス」には適切なbootstrap col- *クラスを設定する必要があり、bootstrap行クラスもそこにありますこれを行うには、ビューテンプレートファイルと前処理関数をオーバーライドするのが最善です。

そのためのチュートリアルなどがウェブ上にたくさんあります。

ブートストラップはフレームワークを提供します。HTMLが準拠していることを確認し、必要なクラスを適切な場所に配置するだけです。これは、大きな問題なくビューで実行できます。

これらのモジュールも参考にしてください（Twitter bootstrap documentation を読み、少なくとも基本を理解している場合）。

Views Bootstrap 、 Display Suite Bootstrap Layouts 、 Panels Bootstrap Layouts

4
J. Reynolds

ビューを編集し、フォーマットの下で「フォーマットされていないリスト」を選択します。 [フォーマット]の[設定]で、[行クラス]を選択します：col-md-3 col-sm-6 col-xs-12またはその他の値。

enter image description here

4
Carlos

レスポンシブデザインをページに導入するには、いくつかの方法があります。 Reynoldsが推奨するように、unformatted listtable/htmlリストやグリッドではなく、ビューのフォーマットを使用します。

ビューページで、右側の下端にあるテーマ情報リンクをクリックして、オーバーライドできるテンプレートファイルを確認します。

テンプレートファイルをオーバーライドする方法については、次のDrupal単純なDrupalドキュメントを参照してください。

https://www.drupal.org/node/1089656

テンプレートファイルを正常に上書きしたら。次に、ファイル（コンテンツタイプまたはビューに対応する）を開き、変更を加えます（キャッシュをクリアすることを忘れないでください。つまり、drush cc theme-registry OR drush cc all OR）1行と3列の例は次のとおりです。

<div class="row ..."> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    </div>
 </div>

すべての列を「行」クラスのdivでラップする必要があります。上記は、3つの列を持つ1つの行を提供します。列は、さまざまな表示ポート（超小、小、中、大）に合わせて自動的にサイズ変更されます。メディアクエリとディスプレイポートの詳細については、こちらをご覧ください http://getbootstrap.com/css/#grid-media-queries

詳細と必要なものの練習については、次の例を参照してください（変更すると、それに応じて結果が表示されます）。

http://www.bootply.com/qpQdj66d38http://www.bootply.com/DPiMgjeIqKhttp://www.bootply.com/ stwBZnj7Yh

注：高さが異なる列がある場合は、固定された高さを列に適用します（CSSクラスcol-xx-xxのdiv）。

幸運を祈ります。BootplyとBootstrapドキュメントはあなたの親友です。

1
Raf