BootStrap制作导航条实例代码

  • Post author:
  • Post category:其他




什么是 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=


"#"


>

设计之家

http://www.doilcn.com/<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>



版权声明:本文为TCS1164原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。