BootStrap制作导航条实例代码

最新推荐文章于 2024-05-14 09:55:02 发布

GMY20

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量523

点赞数

分类专栏：脚本编程

本文链接：https://blog.csdn.net/TCS1164/article/details/51334618

版权

脚本编程专栏收录该内容

56 篇文章 0 订阅

订阅专栏

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

GMY20

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap制作导航条实例代码

什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。bootstrap 导航条摸索了好久，要不就是左边和右边不会水平对齐，要不就是颜色不一样，菜鸟最后终于搞定，直接把代码放这里，以后直接用"zh-cn">"utf-8">"X-UA-Compa
复制链接

扫一扫