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 常用函数库详解
Oct 21 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
Vue切换Tab动态渲染组件的操作
Sep 21 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
destoon数据库表说明汇总
2014/07/15 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[03:30]DOTA2完美“圣”典精彩集锦
2016/12/27 DOTA
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Python如何发布程序的详细教程
2018/10/09 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
药剂专业自荐信范文
2014/04/16 职场文书
阅兵口号
2014/06/19 职场文书
公司周年庆活动方案
2014/08/25 职场文书
暑期培训心得体会
2014/09/02 职场文书
优秀员工推荐材料
2014/12/20 职场文书
家长学校教学计划
2015/01/19 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
医生行业员工的辞职信
2019/06/24 职场文书