javascript - 在容器内加载链接(Bootstrap Starter-Template)

标签 javascript jquery html css twitter-bootstrap

我正在尝试使用在以下链接中找到的 Bootstrap 入门模板在容器字段中加载链接/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>

我的最终目标是从容器内的导航栏/菜单栏加载链接,即选项。截至目前,将网址添加到 “

  • 关于
  • ” 在没有我的导航栏的情况下在新网页中打开链接。相反,我想在以下位置打开链接:

    <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/

    最佳答案

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

    关于javascript - 在容器内加载链接(Bootstrap Starter-Template),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25111201/

    相关文章:

    javascript - 当屏幕宽度改变时,CSS 属性不适用。同时使用 css 和 jQuery

    javascript - jQuery 选择具有特定属性的第一个 child

    javascript - 从数组中按索引删除项目的更短方法

    JavaScript:如何检查字符是否为 RTL?

    jquery - IE 10 的 jQuery 问题

    javascript - 是否可以将文本(占位符或标签)添加到输入类型 ="color"并使其可点击?

    javascript - 在第二列中的自动完成中获取第一列中的 ID

    javascript - jquery 速度不够快,无法生效

    javascript - 多文件上传在 Safari 6.1 上面不起作用,除非打开 Web 检查器

    javascript - 如何在鼠标滚动时关闭文档滚动 - 纯javascript