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 focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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 file_exists问题杂谈
2012/05/07 PHP
PHP比你想象的好得多
2014/11/27 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python的动态重新封装的教程
2015/04/11 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
pandas的resample重采样的使用
2020/04/24 Python
游戏商店:Eneba
2020/04/25 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
奥巴马当选演讲稿
2014/09/10 职场文书
单方投资意向书
2015/05/11 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android