Twitter的Bootstrap - 關於簡單頁面的幾個問題

Question

我已經開始學習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來製作一個表單。首先是span5，第二是span1。第一個包含文本輸入，第二個包含一個按鈕。所以，我想使這些文本輸入和按鈕的寬度爲span5和span1。我該怎麼做？ 3）我注意到，在主引導頁面http://twitter.github.com/bootstrap/上，當你調整它的大小時，元素（h1，p，按鈕）改變它們的樣式 - h1和p變小，並且2個下載按鈕位於列1中在另一個寬度爲100％的小尺寸頁面上。我怎樣才能做到這一點？

4）當我調整頁面大小時，導航欄上的菜單隱藏，導航按鈕顯示在右上角。儘管我在頁面中包含了jquery，但它不想工作。爲什麼？

在此先感謝！

UPDATE：hovmand，感謝您的回覆速度快，

1，2）我做了使用抵消了一些變化。我用ofset4創建了div，並在裏面輸入了span3。然後指定另一個帶有span1的按鈕。結果它應該如此排除：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> 

仍然無法使用。互動，在第二行警報它工作perfeclty。也許我不應該爲每個按鈕輸入創建單獨的div，並指定輸入或按鈕的偏移樣式direclty？我的意思是：input type =「text」class =「offset4 span3」placeholder =「輸入一些東西...」

3）那麼，我注意到我已經包含bootstrap-responsive.css，並調整了我的按鈕儘管以非常奇怪的方式），同時我的h1和p保持不變。我會閱讀這個，謝謝。

4）我修好了。現在它工作了！另外，我想知道。現在我已將全部16個js文件包含到我的代碼中。我真的需要所有的下拉式導航欄嗎？

更新後的代碼可以在這裏找到：http://k-off.org/files/index2.html

Answer 1

1）我不知道如果我理解100％，但抵銷列可能是您的解決方案：http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

2）而不是把類span5的在div上，把它們放在輸入欄和按鈕上的類span1。

3）的特徵稱爲響應式設計：http://twitter.github.com/bootstrap/scaffolding.html#responsive

4）我想這是因爲你的js文件是錯誤的。例如找不到文件：http://k-off.org/assets/js/bootstrap-tooltip.js。

答覆EDIT

1）我不太知道究竟你的努力來實現，但你應該嘗試不同類型的類組合的發揮。希望它能爲你工作。

4）我認爲包含您在單擊首頁上的下載按鈕時獲得的js文件就足夠了。你可以單獨下載它們的原因是你只需要一些功能。

Answer 2

如果您正在使用網格系統（而不是流體網格系統），那麼每個孩子的跨度應加起來爲父母的跨度。你可能需要一個span4 OFFSET4格內輸入元素，像這樣：

<!--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文件是沒有必要的，如果你只在導航下拉後是。我相信只有'tooltip'是必需的，所以請確保包含該文件。 （或者，您可以包含bootstrap.min.js，它是所有js文件縮小版的組合）。