Bootstrap Navbar无法在移动设备上运行

时间:2015-12-21 14:13:57

标签: html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>马面的青春部落格</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。-->
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">   <!--插入bootstarp-->
    <link href="CSS/main.css" rel="stylesheet" type="text/css" media="all">
    <script type="text/javascript" src="JavaScript/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="JavaScript/bootstrap.min.js"></script><!--引入js文件-->
    <script type="text/javascript" src="JavaScript/main.js"></script>
</head>
<body>

<nav class="navbar navbar-default" >
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">马面的青春部落格</a>
        </div>
        <div class="collapse navbar-collapse  " id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">
                <li><a href="Blog.html">文章</a></li>
                <li><a href="Photo.html">相册</a></li>
                <li><a href="Person.html">个人简介</a></li>
                <li><a href="Contact.html">联系方式</a></li>
                <li><img class="navimg" src="image/twitter.png" ></li>   
                <li><img class="navimg" src="image/Github.png" ></li>
                <li><img class="navimg" src="image/gmail.png" ></li>

            </ul>

        </div>

</nav>
  
</body>
</html>
&#13;
&#13;
&#13;

示例:markmamian.github.io导航栏无法在移动设备上运行。

2 个答案:

答案 0 :(得分:0)

来自bootstrap网站的完整响应式导航栏的代码。如果您要从中删除部件,请在每个步骤后刷新以查看您出错的地方。

pdf("myplot3.pdf", width=.51, height=.255) 
grid.rect(height=0.95,width=0.95, gp=gpar(col="red"))
dev.off()

答案 1 :(得分:0)

尝试建立巨型网站的基本结构

http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/