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)

相关推荐

  • 谈一谈bootstrap响应式布局

    随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用.在工作中也会发现,现在很多的客户都有在手机.平板等移动终端上使用管理系统的需求.如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力.这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的.本次介绍的是轻量级.开源的.免费的bootstrap. 搭建开发环境 首先下载官网的boostrap源码包:http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有c

  • BootStrap学习笔记之nav导航栏和面包屑导航

    nav导航栏 <nav role="navigation" class="navbar navbar-default"> <div class="container-fluid"></div> <div class="navbar-header"> <a href="#" class="navbar-brand"> 大大的log

  • BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

    本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法.分享给大家供大家参考,具体如下: Bootstrap官网中,只介绍了breadcrumb的布局(如下图),未介绍使用方法,如何动态增加面包屑title及点击事件的响应. 本人在使用过程中探索出以下的方式. 首先,在html文件里定义div <div> <ul class="breadcrumb " style="margin-bottom:0px;visibility:

  • Bootstrap禁用响应式布局的实现方法

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

  • Bootstrap CSS组件之面包屑导航(breadcrumb)

    面包屑breadcrumb一般用于导航,表示当前页面所在的位置 面包屑可以设置其他相关的小标记内容,比如标签.徽章标记等. //源码 //基础样式 .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } //所有li项都是内联块方式 .breadcrumb > li { display: inline-block

  • Bootstrap Navbar Component实现响应式导航

    目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一个规定的类名时是做了些什么 根据自己的需求进行改装 对比自己的实现方法,找出差距. 1.实现: 我想要模仿一个这样的响应式导航: 按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航: 代码: <nav class="navbar navbar-defa

  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是

  • Bootstrap开发实战之响应式轮播图

    本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"

  • bootstrap响应式表格实例详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情的方式显示(也就是下图:) 首先,先实现在移动端能由左图到右图的转换: 代码如下: <meta charset="UTF-8"> <title></title> <!--引入bootstrap的css文件--> <link type=&

  • Bootstrap组件学习之导航、标签、面包屑导航(精品)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- <link rel="stylesheet" >--> <link rel="stylesheet" href="css/bootst

  • Bootstrap响应式表格详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机 下面是手机端显示的样式 代码如下: 1.test.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css"

随机推荐