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. Java基础之SPI机制

    SPI 机制,全称为 Service Provider Interface,是一种服务发现机制.它通过在 ClassPath 路径下的 META-INF/services 文件夹查找文件,自动加载文件 ...

  2. C# ASP.NET RAZOR 链接SQLSERVER

    @using System.Data.SqlClient; @using System.Data;//必须引用 <html> <body> <h1>Learn Sq ...

  3. c# List集合类常用操作：二、增加

    所有操作基于以下类 class Employees { public int Id { get; set; } public string Name { get; set; } public stri ...

  4. Nginx：多项目开发配置跨域代理

    简述Nginx应用场景(前后端) 当我们开发 vue 项目中可以通过 proxyTable 进行跨域,但如果是原生的 html+css+js ,或者其他没有跨域插件的项目中,想要跨域就要引入配置许多的 ...

  5. JS011. 身份证号码校验（仅34行）

    身份证格式 六位数字地址码 + 八位数字出生日期码 + 三位数字顺序码 + 一位数字校验码 checkIdCard.js checkIdCard: function (idCard){ //15位和1 ...

  6. AI异构通信：重压下的突围，华为P50系列的卓越体验

    撰文 |懂懂 编辑 | 秦言 来源:懂懂笔记 "华为不会让消费者失望."华为消费者业务CEO余承东在P50系列发布会上如是说. 今年4月美国对华为第四轮制裁以来,华为终端产品无缘5 ...

  7. 机器学习——最优化问题：拉格朗日乘子法、KKT条件以及对偶问题

    1 前言 拉格朗日乘子法(Lagrange Multiplier)  和 KKT(Karush-Kuhn-Tucker)  条件是求解约束优化问题的重要方法,在有等式约束时使用拉格朗日乘子法,在有不等 ...

  8. qsc oj-17 喵哈哈村的排队

    http://qscoj.cn/problem/17/ 喵哈哈村的排队 描述 有一堆喵哈哈村的村民们在排队,他们从队列的尾部开始标号,标号为1的村民站在最后面,标号为n的村民站在队列的最前面,而且每个 ...

  9. python爬取疫情数据存入MySQL数据库

    import requests from bs4 import BeautifulSoup import json import time from pymysql import * def mes( ...

  10. 【PHP数据结构】队列的相关逻辑操作

    在逻辑结构中,我们已经学习了一个非常经典的结构类型:栈.今天,我们就来学习另外一个也是非常经典的逻辑结构类型:队列.相信不少同学已经使用过 redis . rabbitmq 之类的缓存队列工具.其实, ...