BootStrap创建响应式导航条实例代码
作者：shirleyqin216 发布时间：2023-08-09 02:09:55
标签：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创建响应式导航条实例代码，希望对大家有所帮助
0
投稿猜你喜欢
在main.js中按需引入import { Toast} from 'vantVue.use(Toast)页面中的methods中使- 条形图是用宽度相同的条形的高度或长短来表示数据多少的图形。用来绘制离散的数据，能够一眼看出各个数据的大小，比较数据之间的差异。绘制一个简单的
- python函数的两种嵌套方法使用函数的嵌套有两种方式：交叉嵌套回环嵌套交叉嵌套交叉嵌套的方式是在本函数中调用同一级或上一级函数的嵌套方法：
- 本文转自微信公众号："算法与编程之美"1、前言侧滑是一个非常实用的选项组件，它在Android App应用中非常广泛，常
- 本文文章主要介绍了Python内置函数—vars的具体使用方法，分享给大家，具体如下：英文文档：vars([object])Return t
- PHP PDO 大对象 (LOBs)应用程序在某一时刻，可能需要在数据库中存储"大"数据。"大"通常
- 由于文件夹可能有多层目录，因此需要对其进行递归遍历。本文采取了简单的协议定制，定义了五条命令，指令Head如下：Sync：标识开始同步文件夹
- 目录1.准备工作2. 开始2.1 生成控件2.2 定义输入和计算函数2.3 绑定键盘事件2.4 循环3.全部代码4. 结束语做一个计算器，这
- 在我之前写的几篇网站优化的文章中，着墨最多的是减少HTTP请求。通过减少请求数目，你的浏览器必须能对你的网站所有内容成功检索，总的HTTP请
- 前言数据分析就是将数据以各种图表的形式展现给领导，供领导做决策用，因此熟练掌握饼图、柱状图、线图等图表制作是一个数据分析师必备的技能。Pyt
- 写在前面如非特别说明，下文均基于Python3命名空间与作用于跟名字的绑定相关性很大，可以结合另一篇介绍Python名字、对象及其绑定的文章
- 本文实例讲述了Go语言中使用反射的方法。分享给大家供大家参考。具体实现方法如下：// Data Modeltype Dish struct
- PHP中主要用strtr()和str_repalce()这两个函数替换字符串和数组，但你们都知道他们这两个函数的区别和用法吗？有不少文章在说
- 最终的效果如下：step.inc.php 安装步骤效果类： /** * step.inc.php 安装步骤效果类 * * 从Comsenz产
- logging模块简介Python的logging模块提供了通用的日志系统，可以方便第三方模块或者是应用使用。这个模块提供不同的日志级别，并
- EcmaScript正則表達式( 深入淺出系列之淺出 ^_^ )在线正则表达式测试：http://www.aspxhome.com/RegE
- 目录 一、前言1.1 什么是 import 机制？1.2 import 是如何执行的？二、import 机制概览三、import
- 1、df=DataFrame([{‘A':'11','B':'12'},{‘A
- 一、Pycharm下载与安装附：Python、Pycharm和Anaconda的关系：Python是一种解释型、面向对象、动态数据类型的高级
- 在前文说过，如果想要更好的做接口测试，我们要利用自己的代码基础与代码优势，所以该章节不会再介绍商业化的、通用的接口测试工具，重点介绍如何通过
