我正在尝试按照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列的行。但我得到输出:
请告诉我这样做的正确方法是什么?
答案 0 :(得分: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以来发生了重大变化。
答案 1 :(得分:1)
还添加了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>
答案 2 :(得分:0)
您使用的是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">
答案 3 :(得分:0)
您需要在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>
<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;