Question

我正在尝试按照Orielly Bootstrap book学习Bootstrap。

这是简单的HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/bootstrap.min.js"></script>
<div class="row">
    <div class="span8">Span 8</div>
    <div class="span4">Span 4</div>
</div>
</body>
</html>

我已经下载了Bootstrap，我在正确的位置bootstrap.css和bootstrap.min.js。根据代码，我们应该得到一个包含2列的行。但我得到输出：

请告诉我这样做的正确方法是什么？

Answer 1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

看起来你正在阅读的书已经过时了。这是Bootstrap 2中使用的语法（不再支持）。

据推测，您已经下载了Bootstrap 3或4的CSS。请参阅their documentation for the current syntax，自Bootstrap 2以来发生了重大变化。

Answer 2

还添加了bootstrap所需的视口元

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 </head>

<body>
     <h1>Hello, world!</h1>
<div class="row">
    <div class="col-md-8">Span 8</div>
    <div class="col-md-4">Span 4</div>
</div>


 </body>

</html>

Answer 3

您使用的是Bootstrap 2的旧语法。让我们切换到BS3或4。

基本的东西（测试，玩，无论如何）。我建议使用CDN源代码来启动Bootstrap。并了解所有documentation。

最新编译和缩小的CSS

SmtpClient smtpClient = new SmtpClient("smtp.myserver.com", 25);

最新编译和缩小的JavaScript

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Answer 4

您需要在div container/container-fluid中拨打课程。

演示HTML5 + Bootstrap + Font Awesome Template来源LINK

<div class="container">
  <div class="col-md-12">
      <h1>Hello, world!</h1>
      <div class="row">
          <div class="span8">Span 8</div>
          <div class="span4">Span 4</div>
      </div>
  </div>
</div>

Live link

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-12">
      <h1>Hello, world!</h1>
      <div class="row">
          <div class="span8">Span 8</div>
          <div class="span4">Span 4</div>
      </div>
  </div>
</div>

＆＃13;

基本Bootstrap无法正常工作

4 个答案: