Twitterのブートストラップ - 簡単なページについてのいくつかの質問

Question

私はTwitterのブートストラップを学び始めました。私は単純なページを作ろうとしています。ここに私が書いているものがあります：http://k-off.org/files/index.htmlコードを少し見てください。

1）Iはunrderstandように、デフォルトのグリッド内のすべての行は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でフォームを作成したいと考えています。最初はspan5、2番目はspan1です。最初にテキスト入力があり、2番目にボタンがあります。ですから、これらのテキストをspan5とspan1の幅で入力してボタンにしたいと思います。どうしたらいいですか？

3）メインブートストラップページhttp://twitter.github.com/bootstrap/で、要素のサイズを変更するとh1とpが小さくなり、2つのダウンロードボタンが1列に表示されますサイズが小さい小さなページの幅= 100％のものの下にあります。これどうやってするの？私は、ページのサイズを変更すると

4）、私のナビゲーションバーの皮のメニューやナビゲーションボタンは右上に表示されます。しかし、私はjqueryを私のページに入れました、それは働きたくありません。どうして？

ありがとうございます！

UPDATE：hovmand、速い応答のためのおかげで、

1、2）私は相殺を使用して、いくつかの変更を加えました。 ofset4でdivを作成し、span3で入力をputtedしました。次に、span1が指定されたボタンを持つ別のdiv。その結果、次のようになります：offsetting_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> 

まだ動作しません。 Interesing、それは警告と2列目でそれはperfeclty働いた。多分、私は、ボタンの入力ごとに別々のdivを作成して、入力やボタンのためのオフセットスタイルdirecltyを指定するべきではないでしょうか？私は、入力タイプ= "text" class = "offset4 span3"プレースホルダー= "何か入力してください..."

3）私は、bootstrap-responsive.cssを含めて気づきました。しかし、非常に奇妙な方法で）、私のh1とpは同じままです。これについて、お読みください。

4）私はそれを修正しました。今それは動作します！また、私は知りたいです。今度は私のコードにすべての16のjsファイルを含めました。私は本当にドロップダウンnavbarのためにそれらのすべてが必要ですか？コードはここで見つけることができます更新

：http://k-off.org/files/index2.html

Answer 1

1）私は、私は100％理解してかはわからないが、オフセットの列があなたの解決策になるかもしれません：http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

2）の代わりにクラスspan5を置きますdivの入力フィールドに入力し、ボタンのクラスspan1を入力します。 http://twitter.github.com/bootstrap/scaffolding.html#responsive

4）私はあなたのjsファイルは見当違いであるので、それはあると思う：

3）機能は、応答性の設計と呼ばれています。たとえば、ファイル：http://k-off.org/assets/js/bootstrap-tooltip.jsが見つかりません。

を編集するには1

REPLY）私は正確にあなたが達成しようとするものはかなりわからないんだけど、あなたはおそらくクラスの組み合わせの異なる種類でプレイしてみてください。あなたのために働くことを願っています。

4）フロントページのダウンロードボタンをクリックしたときに表示されるjsファイルを含めるだけで十分だと思います。あなたがそれらを別々にダウンロードできる理由は、機能の一部だけが必要な場合です。

Answer 2

グリッドシステム（流体グリッドシステムとは対照的に）を使用している場合、各子のスパンは親のスパンに合算する必要があります。あなたは、おそらくそうのようなOFFSET4 divのspan4内の入力要素をしたい：あなたが唯一のナビゲーションドロップダウン後にしている場合

<!--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> 

はまた、JSファイルのすべてが必要ではありません。私はそれには「ツールチップ」しか必要でないと考えていますので、そのファイルを必ず含めてください。 （あるいは、すべてのjsファイルを統合したバージョンのbootstrap.min.jsを含めることもできます）。