Bootstrap 导航栏 | 菜鸟教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 响应式的导航栏</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body> <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> </body>
</html>

Bootstrap响应式的导航栏的更多相关文章

  1. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  2. Bootstrap响应式折叠导航

    浏览器宽度缩小到一定值时,导航显示为 <nav class="navbar navbar-inverse navbar-fixed-top" role="navig ...

  3. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  4. 关于禁用bootstrap响应式解决方法

    前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...

  5. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  6. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  7. bootstrap响应式前端页面

    技术:HTML+CSS+JS+bootstrap   概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...

  8. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  9. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

随机推荐

  1. 四种cmd打开方式

    四种cmd打开方式: 开始+系统+命令提示符: Win+R 输入cmd回车(推荐使用): 按住shift键加右键,点击打开PowerShell窗口: 资源管理器的地址栏前加入cmd+空格

  2. 分布式技术专题-分布式协议算法-带你彻底认识Paxos算法、Zab协议和Raft协议的原理和本质

    内容简介指南 Paxo算法指南 Zab算法指南 Raft算法指南 Paxo算法指南 Paxos算法的背景 [Paxos算法]是莱斯利·兰伯特(Leslie Lamport)1990年提出的一种基于消息 ...

  3. kubernetes部署一个应用程序

    文章原文 部署 nginx Deployment 如果你已经完成了Kubernetes的搭建,那我跟我一块来部署第一个应用程序吧.没有完成 Kubernetes 集群搭建的,请参考文档 使用 kube ...

  4. Docker之Alpine制作jre镜像(瘦身)+自定义镜像上传阿里云

    alpine制作jdk镜像 alpine Linux简介 1.Alpine Linux是一个轻型Linux发行版,它不同于通常的Linux发行版,Alpine采用了musl libc 和 BusyBo ...

  5. Raid(0/1/5/10)

    一.Raid需要的硬盘数量 1.raid 0:     最少1块硬盘(但是1块盘没有意义,至少2块才有实际意义) 2.raid 1:     最少2块硬盘 3.raid 5:     最少3块硬盘 4 ...

  6. C#简单工厂模式学习

    刚学习设计模式,还不是太了解,感觉只有多数据库的情况下才用的到,待学习 首先创建空白解决方案,依次创建类库Model,IDAL,SqlServerDAL,DALFactory,BLL,DBUtilit ...

  7. VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })

    案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...

  8. bean.xml配置数据源和读取配置文件配置数据源

    一.bean.xml配置数据源 bean.xml装配bean,依赖注入其属性的时候,对应实体类中属性一定要有set方法, 二.读取配置文件配置数据源 1.配置文件 bean.xml配置: classp ...

  9. Operator 示例:使用 Redis 部署 PHP 留言板应用程序

    「Kubernetes 官方示例:使用 Redis 部署 PHP 留言板应用程序」Operator 化. 源码仓库:https://github.com/jxlwqq/guestbook-operat ...

  10. 浅谈一种浮标浮岛式水质监测“智能哨兵”助力水质监测,多环境应用ke轻松测水!

    浮岛式水质监测站能够在实际使用中,安装方便,能够采集多种参数,溶解氧  氨氮  电导率  盐分 pH值  COD  水位  节省时间和人工,浮标水质监测站是设立在河流.湖泊.水库.近岸海域等流 域内的 ...