如何使用Twitter Bootstrap网格系统？

ASD 发表于 Dev

123

阿斯

我正在尝试使用Twitter Bootstrap网格系统，但是遇到了一些麻烦。删除jQuery脚本链接确实会引发错误，因此我假设它正在加载js文件，但是我并没有像我所希望的那样显示div。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php require_once 'controllers/loadController.php'; ?>

    <link href="css/bootstrap.css" rel="stylesheet">

    <title>Test title</title>
</head>

<body>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content--> 
      <?php echo loadController("sidebar"); ?>
    </div>
    <div class="span10">
      <!--Body content-->
      <?php echo loadController("main"); ?>
    </div>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

我究竟做错了什么？

我所得到的只是loadController的输出。我在Windows上，使用Apache（工作正常），当我单击“查看源代码”中的链接时，它会显示缩小的/未缩小的文本-因此文件存在。见下图：

在此处输入图片说明

低音

如果我明白了您的意思，则您想在左侧的侧边栏上在右侧显示内容，而ou正在使用span2和span10作为在Bootstrap 2.xx上找到的内容，现在是3.3.4，可以尝试以下代码：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <!--Sidebar content--> 
      Sidebar content
    </div>
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
      <!--Body content-->
     Body content
    </div>
  </div>
</div>

和现场jsFiddle在这里

有关更多信息，请参阅twitter bootstrap 3.x网格系统，而不是twitter bootstrap 2.x网格系统。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。