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文件缩小版的组合）。