为了账号安全,请及时绑定邮箱和手机立即绑定

使用Bootstrap制作导航栏

标签:
JavaScript

废话不多说,直接上代码。

    <body ><!--若采用浮动,则需要加-->    <nav class="navbar navbar-default navbar-static-top">    <!--navbar navbar-default:首先声明是一个导航栏,然后声明用导航栏的default样式        可以通过navbar-default、navbar-inverse,navbar-collapse等为导航栏设置整体样式        navbar-fixed-top,将导航栏浮动 navbar-static-top,将导航栏固定        更多搭配,自行配置!    -->        <div class="container">            <a href="#" class="navbar-brand"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/logo.png" style="width: 50px; height: 30px;"></a>            <!-- logo位置,href是网站首页的地址 -->            <div class="navbar-header"><!-- 设置为 头部文件-->                <button class="navbar-toggle" data-toggle= "collapse" data-tatget"#zhankai-btn">                    <!--navbar-toggle:首先声明一个,折叠按钮.                        data-toggle:声明打开对象                        collapse:声明打开方法:折叠                        data-tatget:声明目标对象,这里根据id做关联                         该折叠功能,存在js版本,js加载的顺序,浏览器等原因,点击失效的问题                    -->                    <span>>>></span>                </button>            </div>            <div class="collapse navbar-collapse" id="zhankai-btn">            <!-- collapse navbar-collapse:定义一个根据不同屏幕可以折叠的导航栏                将可以折叠的内容,放于折叠容器中            -->                <ul class="nav navbar-nav">                    <!--nav navbar-nav:首先声明是一个导航内容,然后声明该内容属于navbar -->                    <li class="active"><a href="#">首页</a></li><!--active为当前激活状态 -->                    <li><a href="#">视频</a></li>                    <li><a href="#">图片</a></li>                    <li><a href="#">文章</a></li>                    <li><a href="#">教程</a></li>                    <li><a href="#">关于</a></li>                    <li><a href="#">下载</a></li>                    <li><a href="#">家园</a></li>                </ul>                <form class="navbar-form navbar-left" name="" action="" onsubmit="return XXXX">                <!-- 按照现实中的情况制作一个搜索框                    navbar-form:声明这是一个导航栏中的form表单,navbar-left左对齐                -->                    <input type="text" placeholder="请输入查找的内容" class="form-control"/>                    <button type="submit">                        <span class="glyphicon glyphicon-search"></span>                        <!--glyphicon glyphicon-search:先声明使用Bootstrap图标,然后声明使用搜索图标 -->                    </button>                </form>                <a href="#" class="btn navbar-btn btn-primary btn-xs navbar-right">现在报名</a>                <ul class="nav navbar-nav navbar-right">                    <li><a href="#">登录</a></li>                    <li><a href="#">注册</a></li>                </ul>            </div>        </div>    </nav>    <div class="container alert-danger"><!--alert-danger给该div一个醒目色块-->        <h3>网站内容可以栅格布局</h3>        <p>            以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!            以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!            以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!            以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!            以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!        </p>        </div><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js" ></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.js" ></script></body>


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消