废话不多说,直接上代码。
<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 src="img/logo.png" ></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一个醒目色块-->
<h4>网站内容可以栅格布局</h4>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
演示效果: