BootStrap创建响应式导航条实例代码


Posted in Javascript onMay 31, 2016

BootStrap创建响应式导航条实例代码

BootStrap创建响应式导航条实例代码

首先你得引入bootstrap与jquery

推荐一个CDN:http://cdn.gbtags.com/index.html

然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333

因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码

首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件

•导航条
•按钮
•表单
•下拉菜单

实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html进行了解

PS:class{}这里仅仅是注释并不是HTML代码

PS2:提供了HTML文件与一个在线的案例调试

导航条与导航条LOGO布局

<!--创建一个bootstarp导航条以及导航LOGO布局-->
<nav class="navbar navbar-default">
<div class="navbar-header">
//do sth
</div>
</nav>

导航按钮

<!--创建一个按钮-->
<!--class{
navbar-toggle:向js传递这个按钮是可以点击的
collapsed:不结合navbar-collapse那就是一个默认class..不加貌似也没发现什么bug.
}
data-toggle="collapse":引入collapse插件
data-target="#navbar-gbtag":当点击按钮的时候跳转/打开哪一个标签
aria-expanded="false":辅助性阅读功能..针对特殊人群的设置-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false">
<!--在按钮上添加一些图标和说明
class{
sr-only:隐藏这个标签
incon-bar:图标样式
动手改一下图标样式为glyphicon glyphicon-star试试
}-->
<span class="sr-only">点我啊</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

表单

<div class="form-group">
<!--class{
form-control:设置宽度为%但是我们在父级元素form设置了navbar-form所以宽度会得到一定的控制
}-->
<input type="text" class="form-control" placeholder="搜索" />
</div><!--表单组-->
<button type="submit" class="btn btn-default">搜索</button>
</form><!--表单-->

下拉菜单

<li class="dropdown">
<!--class{
dropdown-toggle:声明这是一个可以下拉的列表..实际上我没发现这个class的具体用途.取消也未发现什么bug
span .caret{
一个小三角的图标
图片样式
}
}
data-toggle="dropdown" :引入下拉菜单组件的一个必要的属性
role="button":起辅助声明作用.声明这个是一个按钮-->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单名称<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">bootstrap</a></li>
<!--class{
divider:分隔线样式
}
role="separator":声明这个元素为一个分隔线-->
<li role="separator" class="divider"></li>
<li><a href="">请关注极客标签</a></li>
</ul><!--下拉菜单-->

总体实现的HTML

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>响应式导航条</title>
 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
 <script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <!--创建一个bootstarp导航条-->
 <nav class="navbar navbar-default">
  <!--创建一个bootstrap全屏布局-->
  <div class="container-fluid">
  <!--创建一个bootstrapLOGO布局-->
  <!--注意:必须要创建navbar-header,把logo以及响应式按钮给包裹进去..否则..大家删除下navbar-header 缩小屏幕点击下拉菜单就知道了-->
  <div class="navbar-header">
  <div class="navbar-brand">
   <p>极客标签</p>
  </div>
  <!--创建一个按钮
  class{
   navbar-toggle:向js传递这个按钮是可以点击的
   collapsed:不结合navbar-collapse那就是一个默认class..不加貌似也没发现什么bug.
  }
  data-toggle="collapse":引入collapse插件
  data-target="#navbar-gbtag":当点击按钮的时候跳转/打开哪一个标签
  aria-expanded="false":辅助性阅读功能..针对特殊人群的设置-->
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false">
   <!--在按钮上添加一些图标和说明
   class{
   sr-only:隐藏这个标签
   incon-bar:图标样式
   动手改一下图标样式为glyphicon glyphicon-star试试
   }-->
   <span class="sr-only">点我啊</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </button>
  </div>
  <!--创建导航条元素布局
  class{
   collapse:配合navbar-collapse 按钮默认是否展开 如果取消collapse 那么按钮默认就是展开的
   navbar-collapse:导航条元素布局必须的class
  }
  id:与按钮的data-targe一致-->
  <div class="collapse navbar-collapse" id="navbar-gbtag">
   <!--创建导航条内部元素
   class{
    nav :创建导航条内部元素的一个必须的基类
    navbar-nav:这点不好解释.因为翻了一下官方文档并没有说的特别详细 这里稍微说一下
    ,:使ul水平居中横排排列.同时宽度为内容宽度不会挤下后面的元素如form;等最后大家可以删除这个class试试就知道作用了
    navbar-right:导航条排列的类 
   }-->
   <ul class="nav navbar-nav">
   <!--class{
    active:默认点击,
    dropdown:创建一个下拉菜单所需要的基类
   }-->
   <li class="active">
    <a href="">Relsoul</a>
   </li>
   <li><a href="">GBTag</a></li>
   <li class="dropdown">
    <!--class{
    dropdown-toggle:声明这是一个可以下拉的列表..实际上我没发现这个class的具体用途.取消也未发现什么bug
    span .caret{
     一个小三角的图标
     图片样式
    }
    }
    data-toggle="dropdown" :引入下拉菜单组件的一个必要的属性
    role="button":起辅助声明作用.声明这个是一个按钮-->
    
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单名称<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="">bootstrap</a></li>
    <!--class{
     divider:分隔线样式
    }
    role="separator":声明这个元素为一个分隔线-->
    <li role="separator" class="divider"></li>
    <li><a href="">请关注极客标签</a></li>
    
    </ul><!--下拉菜单-->
   </li><!--导航子元素-->
   </ul><!--导航元素-->
  <!--class{
  navbar-form:可以呈现良好的垂直对齐具体参考http://v3.bootcss.com/components/#navbar-forms
  navbar-left:用来规定导航条内元素对齐的具体参考http://v3.bootcss.com/components/#navbar-component-alignment
  }-->
  <form class="navbar-form navbar-left" role="search">
   <!--class{
   btn:创建一个按钮所必须的基类
   btn:按钮样式 基于btn基类 具体参考http://v3.bootcss.com/css/#buttons
   form-group:排列表单元素的一个基类具体参考http://v3.bootcss.com/css/#forms
   }-->
   <div class="form-group">
   <!--class{
    form-control:设置宽度为100%但是我们在父级元素form设置了navbar-form所以宽度会得到一定的控制
   }-->
   <input type="text" class="form-control" placeholder="搜索" />
   </div><!--表单组-->
   <button type="submit" class="btn btn-default">搜索</button>
  </form><!--表单-->
  
  <ul class="nav navbar-nav navbar-right">
   <li><a href="">Soul</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单名称<span class="caret"></span></a>
   <ul class="dropdown-menu">
    <li><a href="">bootstrap</a></li>
    <!--class{
     divider:分隔线样式
    }
    role="separator":声明这个元素为一个分隔线-->
    <li role="separator" class="divider"></li>
    <li><a href="">请关注极客标签</a></li>
    
    </ul><!--下拉菜单-->
   </li><!--导航子元素2-->
  </ul><!--导航元素2 -->
  </div><!--导航布局-->
  </div><!--end 全屏布局-->
 </nav>
 </body>
</html>

以上内容是小编给大家介绍的BootStrap创建响应式导航条实例代码,希望对大家有所帮助,如果大家想了解更多资讯敬请关注三水点靠木网站,谢谢!

Javascript 相关文章推荐
Javascript !!的作用
Dec 04 Javascript
javascript中最常用的继承模式 组合继承
Aug 12 Javascript
js Function类型
Dec 04 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
浅谈js中的延迟执行和定时执行
May 31 #Javascript
温习Javascript基础语法之词法结构
May 31 #Javascript
jQuery文字横向滚动效果的实现代码
May 31 #Javascript
Javascript实现跑马灯效果的简单实例
May 31 #Javascript
javascript实现简易计算器的代码
May 31 #Javascript
javascript实现任务栏消息提示的简单实例
May 31 #Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 #Javascript
You might like
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
重定向实现代码
2006/11/20 Javascript
javascript call和apply方法
2008/11/24 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
django解决订单并发问题【推荐】
2019/07/31 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
机械工程及其自动化专业求职信
2014/08/08 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
心得体会格式及范文
2016/01/25 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
了解Redis常见应用场景
2021/06/23 Redis