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

网络编程 2024/11/15 佚名

3 2 1

首先你得引入bootstrap与jquery

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

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

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

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

"_blank" href="http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html">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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">


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

bootstrap响应式导航条,bootstrap导航条