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 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
javascript实现获取字符串hash值
May 10 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 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 防恶意刷新实现代码
2010/05/16 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python爬取梨视频的示例
2021/01/29 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
书法兴趣小组活动总结
2014/07/07 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2014年班干部工作总结
2014/11/25 职场文书
白鹤梁导游词
2015/02/06 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
教师节主题班会教案
2015/08/17 职场文书
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL