Html 引导：页面未正确加载_Html_Twitter Bootstrap

Html 引导：页面未正确加载

html twitter-bootstrap

Html 引导：页面未正确加载,html,twitter-bootstrap,Html,Twitter Bootstrap,我现在正在学习Bootstrap，这确实是我第一次尝试。我遵循了书中的一个例子，它应该是有效的但是，当运行页面时，结果是不同的这是我的.html页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

我现在正在学习

Bootstrap

，这确实是我第一次尝试。我遵循了书中的一个例子，它应该是有效的

但是，当运行页面时，结果是不同的

这是我的

.html

页面：

<!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">

        <title>Bootstrap Grid System</title>
        <link rel="styleheet" type="text/css" href="css/bootstrap.css"/>

        <!--[if lt IE 9]>
        <script src="js/html5shiv.js" type="text/javascript"></script>
        <script src="js/respond.min.js" type="text/javascript"></script>
        <![endif]-->
    </head>
<body>

        <script src="js/jquery-1.11.3.js" type="text/javascript"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <h4>Column 1</h4>
            </div>
            <div class="col-xs-6">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
</body>
</html>


自举网格系统
第1栏
第2栏

它应该在左侧和右侧生成两列：

但它会产生以下结果：

我真的不知道为什么？有什么想法吗？

如果您的文件（css/bootstrap.css、js/bootstrap.js）位于文件夹中并且“包含”在html中，请使用firebug或类似的开发工具进行检查

您也可以使用引导CDN，以确保加载css和js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

似乎没有加载引导javascript文件。尝试将其更改为：

<head>   
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

我根据以下链接进行了尝试：

看起来好多了。如果您使用示例查看控制台，它会告诉您“bootstrap的js需要jquery”

我这样试过，效果更好：

<!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">

    <title>Bootstrap Grid System</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">


</head>


自举网格系统


第1栏
第2栏

也许是关于jquery版本的。试试看

将脚本放在文档的开头或正文的结尾之前。然后检查浏览器控制台中是否有任何错误。所有包含文件的路径是否正确？请先使用CDN并检查其是否有效--->我以前尝试过这种组合。所有路径都是正确的，请尝试使用引导CDN@gene-为什么这是你问题的答案？谢谢。成功了。我复制的链接，因为他们显示，它的工作。另外，我在正文的末尾移动了脚本引用，不客气。顺便说一下，我衷心推荐我附加的链接。那个教程很好

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <h4>Column 1</h4>
        </div>
        <div class="col-xs-6">
            <h4>Column 2</h4>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>