在容器内加载链接(Bootstrap - template)

Load links inside container (Bootstrap Stater-Template)

本文关键字：Bootstrap template 链接 加载      更新时间：2023-09-26

我正在尝试使用Bootstrap Starter Template在以下链接中加载链接/url: http://getbootstrap.com/examples/starter-template/

上述页面的源代码如下所示。

<!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">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">
        <title>Starter Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="starter-template.css" rel="stylesheet">
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
       <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
       <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
       <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
       <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
       <![endif]-->
    </head>

 <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
        <div class="container">
            <div class="starter-template">
                <h1>Bootstrap starter template</h1>
                <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
            </div>
        </div><!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="../../dist/js/bootstrap.min.js"></script>
    </body>
</html>

我的最终目标是加载链接，即选项从导航栏/菜单栏内的容器。到目前为止，添加url到"

  • 对
    • "在没有导航栏的情况下打开新网页中的链接。相反，我想在以下位置打开链接: 
    <div class="container">
    <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>
</div><!-- /.container -->

    这将确保导航栏在我浏览页面时出现。

    如果您需要任何确认，请告诉我。以下链接可用于查看网站:http://getbootstrap.com/examples/starter-template/

    每个页面上都有全局部分，例如徽标、导航栏、页脚等等。container和它的列可能会也可能不会每页改变。如果您只想更改。container中的文本，您可以创建一个名为about.html的页面，从菜单中的所有实例链接到它，然后复制整个页面。您可以使用包含，使用CMS，或者复制整个html，然后在您想要的部分中更改html。要从另一个源加载某个div内的内容，您可以使用jQuery或javascript或iframe，但这不是创建站点的正常方式。你可以查找iframes并在div中加载html，这方面有很多帮助，但一般网站不是这样构建的

    相关文章：