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 相关文章推荐
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
vue如何截取字符串
May 06 Javascript
Paypal支付不完全指北
Jun 04 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
js实现京东轮播图效果
2017/06/30 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
python实现巡检系统(solaris)示例
2014/04/02 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
Python实现批量压缩图片
2018/01/25 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
股份合作协议书
2014/04/12 职场文书
文明演讲稿范文
2014/05/12 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers