0

我已经开始学习 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

4

2 回答 2

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文件就足够了。您可以单独下载它们的原因是您只需要一些功能。

于 2012-04-29T19:08:16.493 回答
0

如果您使用的是网格系统（而不是流体网格系统），那么每个子项的跨度应该加起来为父项的跨度。您可能希望 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 文件组合的缩小版本）。

于 2012-04-29T20:26:10.777 回答