首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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创建响应式导航条实例代码，希望对大家有所帮助，如果大家想了解更多资讯敬请关注三水点靠木网站，谢谢！

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

- Author -

shirleyqin216

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
jquery URL参数判断，确定菜单样式
May 31 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
JS实现密码框效果
Sep 10 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
浅谈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
JDBC(3) pdf(1) 缓冲区(1) cypress(1) Eclipse(1) ant design(2) 弹窗(1) form表单(1) openGauss(1) 变量提升(1)
You might like
PHP5中MVC结构学习
2006/10/09 PHP
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
js静态作用域的功能。
2006/12/25 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
python使用pipeline批量读写redis的方法
2019/02/18 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python向图片里添加文字
2019/11/26 Python
python图形用户接口实例详解
2019/12/16 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python编写单元测试代码实例
2020/09/10 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
大学生职业生涯规划书
2014/03/14 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2016年党建工作简报
2015/11/26 职场文书
初中体育课教学反思
2016/02/16 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
Android Studio 计算器开发
2022/05/20 Java/Android