无法使最简单的脚手架示例工作

时间：2014-03-16 17:48:03

标签： twitter-bootstrap twitter-bootstrap-3

我对Bootstrap来说是全新的，并且开局不好，因为我甚至无法使最简单的示例工作（！）。我已使用此video tutorial和此scaffolding documention page来编写以下代码：

<!DOCTYPE html>
<html lang='en'>
<head>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type='text/css'>
  <style>
    .row { background-color: red; }
    .span3, .span9 { background-color: blue; }
  </style>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='span3'> span3 </div>
      <div class='span9'> span9 </div>
    </div>
  </div>
  <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'> </script>
  <script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js' type='text/javascript'> </script>
</body>
</html>

显然，我只想要一行，其中一个div跨越3列（12个），另一个div跨越9列。显然是在同一排。但这就是它在Firefox和Chrome中的样子：

enter image description here

是否正确加载了Bootstrap javascript？

如果我删除指向bootstrap.min.js的脚本元素，它没有区别（没有像素一样多）。这应该是这样吗？

可能是Firefox Web Developer Console中的所有CSS和JS警告？

我收到很多CSS警告，例如：

[18:38:44.443] Unknown property 'box-sizing'.  Declaration dropped. @ http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css:7

一个JS警告：

[18:38:44.629] Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. @ http://code.jquery.com/jquery-latest.js:5375

可以解释一下吗？

1 个答案:

答案 0 :(得分：2)

问题是您在使用Bootstrap 2时使用Bootstrap 2的语法。

Bootstrap 3中相同代码的语法是：

<div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-9">.col-md-9</div>
</div>

您可以在此处查看文档：{​​{3}}

相关问题
最新问题