Bootstrap CSS组件之导航条(navbar)


Posted in Javascript onDecember 17, 2016

本文主要大家分享了响应式导航条的具体代码,供大家参考,具体内容如下

1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav
2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form
3.导航条中的按钮,文本,链接navbar-btn、bavbar-text、navbar-link
4.导航条中的项目进行左右浮动navbar-left、navbar-right
5.顶部固定或底部固定nacbar-fixed-top、navbar-fixed-bottom
6.响应式导航条

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap从3.0版本开始全面支持移动平台,贯彻移动先行宗旨 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

 </head>
 <body>

 <!-- 基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav
  创建一个默认的导航栏的步骤如下:
  1.向 <nav> 标签添加 class .navbar、.navbar-default
  2.向上面的元素添加 role="navigation",有助于增加可访问性。
  3.向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
  4.为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可-->

 <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
  <a href="#" class="navbar-brand">前端</a>
  </div>
  <div>
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">JS <span class="caret"></span></a>
   <ul class="dropdown-menu">
    <li><a href="">js高级程序设计</a></li>
    <li><a href="">js设计模式</a></li>
    <li><a href="">js DOM</a></li>
   </ul>
   </li>
  </ul>
  </div>
 </nav>

 <!-- 导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form
  步骤如下:
  1.向 <nav> 标签添加 class .navbar、.navbar-default
  2.向上面的元素添加 role="navigation",有助于增加可访问性。
  3.向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
  4.navbar容器内放置form元素,在form元素上应用navbar-form样式即可,同事navbar-left和navbar-right可用-->
 <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
  <a href="#" class="navbar-brand">Brand</a>
  </div>
  <form role="search" class="navbar-form navbar-left">
  <div class="form-group">
   <input type="text" class="form-control">
  </div>
  <button class="btn btn-default" type="button">左按钮</button>
  </form>

  <form role="search" class="navbar-form navbar-right">
  <div class="form-group">
   <input type="text" class="form-control">
  </div>
  <button class="btn btn-default" type="button">右按钮</button>
  </form>
 </nav>

 <!-- 导航条中的按钮,文本,链接:
  普通导航栏中使用navbar-brand样式得a元素
  还有:navbar-btn、bavbar-text、navbar-link(这些象征性的设置了margin和颜色)-->
 <nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
  <a href="href-"#"" class="navbar-brand">Brand</a>
  </div>
  <ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  </ul>
  <button class="btn btn-class navbar-btn">和ul一起使用的button</button>
 </nav>

 <!-- 导航栏中的文本:
  如果需要在导航中包含文本字符串,请使用 class .navbar-text-->
 <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
  <div class="navbar-header">
  <a class="navbar-brand" href="#">菜鸟教程</a>
  </div>
  <div>
  <p class="navbar-text">Runoob 用户登录</p>
  </div>
  </div>
 </nav>

 <!-- 响应式导航条:
  一个导航条默认情况下都是全屏100%显示,所以通常有很多菜单,但在小屏幕上可能显示不全。
  通常需要根据尺寸隐藏或者去除一部分菜单内容。-->

 <!-- bootstrap是基于jQuery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript初学者常用技巧
Sep 02 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 #Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 #Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 #Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 #Javascript
Bootstrap CSS布局之图像
Dec 17 #Javascript
Bootstrap CSS布局之按钮
Dec 17 #Javascript
Bootstrap CSS布局之表单
Dec 17 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
python创造虚拟环境方法总结
2019/03/04 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python实现密码强度校验
2020/03/18 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
转让协议书
2015/01/27 职场文书
党支部书记岗位职责
2015/02/15 职场文书
工作会议简报
2015/07/20 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫