如何在iFrame中包含Bootstrap

时间:2019-07-08 18:21:26

标签: html css twitter-bootstrap iframe head

我目前正在从事一个项目,该项目要求我在iFrame中使用Bootstrap。我尝试将其包含在文档的开头,但未将其应用于iFrame。我一直在尝试将Bootstrap链接插入iFrame的头部,但是我无法定位它。我什至尝试两次将其包括在内(在包含的文档和iFrame的头部),并且没有被应用。谁能建议一个很好的方法吗?

这是我到目前为止的内容: index.html

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    </head>

    <body>
        <div class="row">
            <iframe id="iframe" class="col-lg-12 col-md-12 col-sm-12">

            <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
            </head>

           </iframe>
      </div>
</body>

1 个答案:

答案 0 :(得分:0)

为什么要在正文标签中添加CDN?这就是使用引导程序完成iframe的方式。

 <html>
    <head>
    <meta name="viewport" content="width=device-width, initialscale=1">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>

    <body>
    <div class="row">
        <iframe id="iframe" class="col-lg-12 col-md-12 col-sm-12"></iframe>
    </div>
       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
   </html>