Question

对于我的生活，我无法弄清楚如何在HTML文件中包含引导程序..

我正在使用此代码但它不起作用..

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@3.1.1" />
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-semver="3.1.1" data-require="bootstrap@3.1.1"></script>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Optional theme -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
      <div class="container-fluid">
    <div class="row-fluid">
    <div class="span2">
    asdf
    <!--Sidebar content-->
    </div>
    <div class="span10">
    sadf
    <!--Body content-->
    </div>
    </div>
    </div>
</body>

</html>

我想使用CDN

Answer 1

您已加入bootstrap 3.响应式网格类必须为col-md-2和col-md-10 如果从文件系统启动此文件，则必须在所有src =＆＃34; //...＆＃34;

上添加http：

更改

<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

要

<script data-require="jquery@2.1.1" data-semver="2.1.1" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

它可以使用此代码：

<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@3.1.1" />
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-semver="3.1.1" data-require="bootstrap@3.1.1"></script>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Optional theme -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
      <div class="container">
    <div class="row">
    <div class="col-xs-2 col-md-2">
    asdf
    <!--Sidebar content-->
    </div>
    <div class="col-xs-10 col-md-10">
    sadf
    <!--Body content-->
    </div>
    </div>
    </div>
</body>

</html>

Answer 2

您需要http：因为您正在使用基于文件，这意味着您有一个html文件，您正在点击并在浏览器中打开。一旦你开始使用localhost或服务器，你可以删除http：这样网站就会加载资源，无论是http还是https

    <html>

<head>
    <!-- Latest compiled and minified CSS -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" data-semver="3.2.0" data-require="bootstrap-css@3.1.1" />
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Optional theme -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
    <!-- Latest compiled and minified JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

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

</html>

包括HTML中的bootstrap

2 个答案: