BootStrap制作导航条实例代码

前端技术 2023/09/08 JavaScript

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

bootstrap 导航条摸索了好久，要不就是左边和右边不会水平对齐，要不就是颜色不一样，菜鸟最后终于搞定，直接把代码放这里，以后直接用

代码如下所示：

<!DOCTYPE html>
<html lang=\"zh-cn\">
<head>
<meta charset=\"utf-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<title></title>
<link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">
</head>
<body>
<nav class=\"navbar navbar-default\" role = \"navigation\">
<div class=\"container\">
<!-- 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\">
<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=\"#\">KKK</a>
</div>
<div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
<ul class=\"nav navbar-nav\">
<li><a href=\"#\">首页 <span class=\"sr-only\"></span></a></li>
</ul>
<div class=\"navbar-right\">
<ul class=\"nav navbar-nav\">
<li><a href=\"#\">haha<span class=\"sr-only\"></span></a></li>
<li><a href=\"#\">haha<span class=\"sr-only\"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<script src=\"js/jquery.min.js\"></script>
<script src=\"js/bootstrap.min.js\"></script>
</body>
</html>

看一下结果

以上所述是小编给大家介绍的BootStrap制作导航条实例代码，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/20946

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案