Question

我已经开始学习Twitter的Bootstrap了，我有几个问题。我正在尝试制作一个简单的页面。这是我正在写的那个：http://k-off.org/files/index.html你能看一下代码吗？

1）我不明白，默认网格中的所有行都有12个单元格。所以，如果我做空div class =“span4”/ div，那么div class =“span4”CONTENT / div然后再空div div =“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）我使用抵消做了一些改变。我使用ofset4创建了div，并使用span3创建了输入。然后另一个div与指定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>

仍然无效。 Interesing，在第二行有警报它完成了perfeclty。也许我不应该为每个按钮输入创建单独的div，并为输入或按钮指定偏移样式direclty？我的意思是：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文件组合的缩小版本。）

Twitter的Bootstrap - 关于简单页面的一些问题

2 个答案: