0

私は、PhoneGapで使用するモバイルアプリケーションを構築するための少しの実験を行ってきました。いくつか質問がありますが、レイアウトを定義するとき：

カルーセル画像ギャラリーと同じ効果を使用して、横スクロール付きの単一ページレイアウトを作成したいのですが、画像を切り替える代わりに、ページを切り替えたいと思います。

「ページ」を切り替えるエフェクトのようなカルーセルを実現したいと考えていました。BootstrapやInkなどを使用し、提供されたレイアウトを使用して、各列を異なる画面として動作させることを検討していました。ここで説明されているようなものここに画像の説明を入力してくださいで、赤い四角は現在視覚化されている画面（または列）を表し、青い四角は「見えない」画面（または列）を表します。したがって、ご覧のとおり、各列は画面/ビューポート全体に「拡大縮小」する必要があります。

両方のフレームワークからドキュメントを読んでいると、列の定義が次のようになっているため、これをどのように達成できるかわかりません。

デフォルトのブートストラップグリッドシステムは12列を使用するため、レスポンシブ機能が有効になっていない940px幅のコンテナーになります。レスポンシブCSSファイルを追加すると、ビューポートに応じてグリッドの幅が724ピクセルと1170ピクセルに調整されます。767pxのビューポートの下では、列は流動的になり、垂直に積み重ねられます。

ブートストラップと

インクを使用すると、心のコンテンツに使用できる3つのレイアウトが提供されます。

Sは小さいことを表しますMは大きいことを表しますLは大きいことを表しますデフォルトでは、これらは次の画面サイズ間隔に対応します（これらを1秒でカスタマイズする方法を示します）。

小：幅650ピクセル未満中：幅651〜960ピクセル大：幅961ピクセル以上

インク用。

ですから、私が理解できたことから、意図した効果を完全に達成することはできません。

私の質問は次のとおりです。必要な効果を得るにはどうすればよいですか。また、ブートストラップまたはインクで列の定義を変更して、各列が画面（またはすべての列の合計が12列でなければならないため、列のセット）を表すようにするにはどうすればよいですか。これも可能ですか？私が考慮すべき他の選択肢はありますか？

よろしく、セルソサントス

4

2 に答える 2

2

私はこれをテストしませんでしたが、奇妙なライブラリがなくてもCSS3でうまくいくかもしれません。

まず、次のようなhtmlレイアウトを作成します。

<div id="wrapper">
  <header>Website header</header>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
  <section>
    <header>Page header</header>
    <div class="main">
    </div>
  </section>
</div>

次に、CSSテーブルとテーブルセルを使用して列効果を作成します。テーブルの幅を100*子供にすることが重要です

html, body { height: 100%; }
#wrapper { display: table; width: 400%; margin-top: 100px; }
#wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
#wrapper > section { display: table-cell; height: 100%; width: 25%; }

良い副作用は、画面が回転すると、ページが回転してそれに沿って拡大縮小することです（設定されている場合）

編集：各セクションにマージンを許可する

<div id="wrapper">
  <header>Website header</header>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="page_wrapper">
      <div class="page_bubble">
        <header>Page header</header>
        <div class="main">
        </div>
      </div>
    </div>
  </section>
</div>

各htmlセクションにラッパーと「バブル」が追加されました。ラッパーをposition：relativeに設定し、コンテナーをposition：absoluteに設定します。

.page_wrapper { position: relative; width: 100%; height: 100%; } 
.page_bubble { position: absolute; top: 0px; right: 25px; bottom: 0px; left: 25px; }

高さと幅のあるラッパーで絶対位置のすべての辺を定義する場合。それはどういうわけか、相対的なラッパーを（この場合は）左右に25pxのマージンで埋めるストレッチコンテナとして動作し、内部コンテンツが高さまたは幅を超えたときにオーバーフロー自動を許可します:)この小さなCSSの「ハック」に関する詳細情報：

SuperStretching要素

于 2013-01-05T03:52:30.513 に答える
1

上記の回答に加えて、「上記のコードのようなテーブルセル構造を操作する際にある程度のマージンを確保するにはどうすればよいですか？」という質問への回答として。

テーブルセルでは余白を使用できないため、コンテナを使用できます。私のやり方では、ラッパーとコンテナーの違いがあります。ラッパーは、キャンディーバー（その内容に収まる）の場合と同様に、実際のラッパーのように機能します。コンテナーはスペースを占有し、船のコンテナのように機能します。コンテナは船に置かれますが、船の境界の外側にぶら下がることができます（命名規則にとって重要です）次に、トリックに取り掛かりましょう。

以下は、いくつかの追加を加えた同じ例です

<div id="wrapper">
  <header>Website header</header>
  <div class="cell">
    <section>
      <div class="container">
        <header>Home header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 2 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 3 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
  <div class="cell">
    <section>
      <div class="container">
        <header>Page 4 header</header>
        <div class="main">
          <p>Testpage hahaha</p>
        </div>
      </div>
    </section>
  </div>
</div>

  html, body, #wrapper { height: 100%; }
  #wrapper { display: table; width: 400%; margin-top: 100px; }
  #wrapper > header { position: fixed; top: 0px; height: 100px; width: 100%; } 
  #wrapper > .cell { display: table-cell; height: 100%; width: 25%; }
  /* set position relative in the section since position relative on cells don't work */
  #wrapper > .cell > section { position: relative; height: 100%; }

次のルールは、CSSハックと呼ばれるものです。奇妙な方法で、これにより要素が100％の高さと幅に拡張されます。5つのルールすべてを設定する必要があることに注意してください（絶対位置、上、左、右、下）この場合、左右に15pxを指定します。 '船の境界線'上の.container15px。また、overflow-yはコンテナで使用できます。奇妙なことに、スクロールバーはこの流動的な設計方法で機能します（理由は聞かないでください、しかしそれは素晴らしいです）

#wrapper > .cell > section > .container { 
  position: absolute; 
  top: 0px; right: 15px; bottom: 0px; left: 15px; 
  overflow-y: auto; border: 1px solid #000000; 
}

あなたが見ることができるように、それは本当の魔法ではありませんが、それはトリックを行い、'>'セレクターと組み合わせて厳密な名前を使用するため、他の要素に影響を与えず、ほとんどすべての流動的なWebサイトデザインで使用できます。

于 2013-01-13T22:10:39.447 に答える