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 个下载按钮站在一列一个在另一个下，宽度 = 100% 的一个小的、调整大小的页面。我该怎么做？

4)当我调整页面大小时，导航栏上的菜单会隐藏，并且导航按钮会显示在右上角。虽然，我已经在我的页面中包含了 jquery，但它不想工作。为什么？

提前致谢！

更新：hovmand，感谢您的快速回复，

1, 2)我使用偏移做了一些改变。我用 offset4 创建了 div 并在里面放了 span3 的输入。然后是另一个带有指定 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>

还是不行。有趣的是，在第二排的警报中，它工作得非常完美。也许我不应该为按钮的每个输入创建单独的 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

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 未找到。

回复编辑

1) 我不太确定您到底想达到什么目标，但您可能应该尝试使用不同类型的类组合。希望它对你有用。

4）我认为包含点击首页下载按钮时得到的js文件就足够了。您可以单独下载它们的原因是您只需要某些功能。

Answer 2

如果您使用的是网格系统（与流体网格系统相反），则每个子项的跨度应加起来为父项的跨度。您可能希望 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>

此外，如果您只是在导航下拉菜单之后，则不需要所有 js 文件。我相信只需要“工具提示”，因此请确保包含该文件。 （或者，您可以只包含 bootstrap.min.js，它是所有 js 文件组合的缩小版本）。