使用Bootstrap制作導(dǎo)航欄
標(biāo)簽：
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>
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦