0

Twitter の Bootstrap について学び始めましたが、いくつか質問があります。簡単なページを作ってみました。これが私が書いているものです: http://k-off.org/files/index.htmlコードを少し見ていただけますか?

1）私が理解しているように、デフォルトのグリッドのすべての行には12個のセルがあります。したがって、空の div class="span4" /div を作成し、次に div class="span4" CONTENT /div を作成し、さらに空の div class="span4" /div を作成すると、コンテンツ div がページの中央に配置されます。 、 うん？この例で使用するサンプル コードがありますが、動作しません。

<!--ROW WITH INPUT TEXT FORM AND BUTTON. DIV SPAN3, FORM {DIV SPAN5, DIV SPAN1}, DIV SPAN3-->
<div class="row">
  <div class="span3"></div>

  <form>
    <div class="span5">
      <input type="text" class="span3" placeholder="Type something…">
    </div>
    <div class="span1">
      <input type="submit" class="btn btn-success" value="Lorem">
    </div>
  </form>

  <div class="span3"></div>
</div>

2) div 内の要素の幅を管理するにはどうすればよいですか? 前の例では、2 つの div を持つフォームを作成したいと考えています。1 つ目は span5、2 つ目は span1 です。1 番目にはテキスト入力が含まれ、2 番目にはボタンが含まれます。そこで、これらのテキスト入力とボタンを、span5 と span1 の幅で作成したいと思います。どうすればいいですか？

3) メインのブートストラップ ページhttp://twitter.github.com/bootstrap/で、サイズを変更すると要素 (h1、p、ボタン) のスタイルが変わることに気付きました。h1 と p は小さくなり、2ダウンロード ボタンは、サイズが変更された小さなページの幅 = 100% の列に 1 列に並んでいます。これどうやってするの？

4) ページのサイズを変更すると、ナビゲーション バーのメニューが非表示になり、ナビゲーション ボタンが右隅に表示されます。ただし、ページにjqueryを含めましたが、機能したくありません。なんで？

前もって感謝します！

更新: hovmand さん、素早い返信ありがとうございます。

1, 2)オフセットを使用していくつかの変更を加えました。ofset4 で div を作成し、span3 で入力を入れました。次に、span1 が指定されたボタンを含む別の div。結果として、次のようになります: offset_4_cells|input_for_3_cells|button_for_1_cell|other_cells. 私が行ったコードがあります：

<!--ROW WITH INPUT TEXT FORM AND BUTTON.-->
<div class="row">
  <!--<div class="offset3"></div>-->
  <form>
    <div class="offset4">
      <input type="text" class="span3" placeholder="Type something…">
    </div>
    <div>
      <input type="submit" class="btn btn-success span1" value="Go">
    </div>
  </form>
</div>
<!--ROW WITH ALERT.-->
<div class="row">
    <div class="alert alert-error span4 offset4">Alert</div>
</div>

それでもうまくいきません。興味深いことに、アラートのある2行目では完全に機能しました。ボタンの入力ごとに個別のdivを作成して、入力またはボタンに直接オフセットスタイルを指定しないでください。つまり、input type="text" class="offset4 span3" placeholder="Type something…"

3) ええと、bootstrap-responsive.css が含まれていることに気付きました。ボタンのサイズが変更されますが (非常に奇妙な方法で)、h1 と p は同じままです。これについて読んでみます、ありがとう。

4) 修正しました。今それは動作します！また、知りたいです。これで、16 個の js ファイルすべてをコードに含めました。ドロップダウンナビゲーションバーにそれらすべてが本当に必要ですか?

更新されたコードは次の場所にあります: http://k-off.org/files/index2.html

4

2 に答える 2

1

1) 100% 理解しているかどうかはわかりませんが、オフセット列が解決策になるかもしれません: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

2) クラスを div に配置する代わりに、span5それらを入力フィールドに配置し、クラスspan1をボタンに配置します。

3) この機能はレスポンシブ デザインと呼ばれます: http://twitter.github.com/bootstrap/scaffolding.html#responsive

4) js ファイルの場所が間違っているためだと思います。たとえば、ファイルhttp://k-off.org/assets/js/bootstrap-tooltip.jsが見つかりません。

編集に返信

1）あなたが何を達成しようとしているのか正確にはわかりませんが、おそらくクラスのさまざまな種類の組み合わせで遊んでみる必要があります。それがうまくいくことを願っています。

4) フロントページのダウンロードボタンをクリックすると得られるjsファイルを同梱すれば十分だと思います。それらを個別にダウンロードできる理由は、一部の機能のみが必要な場合です。

于 2012-04-29T19:08:16.493 に答える
0

(流体グリッド システムではなく) グリッド システムを使用している場合は、各子のスパンが親のスパンに加算されます。おそらく次のように、span4 offset4 div 内に入力要素が必要です。

<!--ROW WITH INPUT TEXT FORM AND BUTTON.-->
<div class="row">
  <div class="span4 offset4">
  <form>
    <input type="text" class="span3" placeholder="Type something…">
    <input type="submit" class="btn btn-success span1" value="Go">
  </form>
</div>
<!--ROW WITH ALERT.-->
<div class="row">
    <div class="alert alert-error span4 offset4">Alert</div>
</div>

また、nav ドロップダウンのみを使用している場合は、すべての js ファイルは必要ありません。そのために必要なのは「ツールチップ」だけだと思う​​ので、必ずそのファイルを含めてください。(または、すべての js ファイルを組み合わせた縮小バージョンである bootstrap.min.js を含めることもできます)。

于 2012-04-29T20:26:10.777 に答える