首页
所有分类
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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
js仿微信抢红包功能
Sep 25 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
抽象类(1) Scheduled(1) 模拟登录(1) 乱码(3) 接口(1) 扫雷(1) Date(1) 单向链表(1) router(1) 路由(1)
You might like
PHP自动生成表单代码分享
2015/06/19 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python实现人机五子棋
2020/03/25 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
python如何写个俄罗斯方块
2020/11/06 Python
python IP地址转整数
2020/11/20 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Under Armour安德玛德国官网：美国高端运动科技品牌
2019/03/09 全球购物
班组安全员工作职责
2014/02/01 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
好媳妇事迹材料
2014/12/24 职场文书
征求意见函
2015/06/05 职场文书
初中毕业感言300字
2015/07/31 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
vue elementUI表格控制对应列
2022/04/13 Vue.js