bootstrap-带下拉菜单的标签页

说明

带下拉菜单的标签页

示例

<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    	<title>Bootstrap 101 Template</title>

    	<!-- Bootstrap -->
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
  	</head>
  	<body>
	  	<div class="container">
			<ul class="nav nav-tabs">
			  	<li role="presentation" class="active"><a href="#">Home</a></li>
			  	<li role="presentation"><a href="#">Profile</a></li>
			  	<li role="presentation" class="dropdown">
    				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      					Dropdown 
      					<span class="caret"></span>
    				</a>
    				<ul class="dropdown-menu">
			          	<li><a href="#">Action</a></li>
			          	<li><a href="#">Another action</a></li>
			          	<li><a href="#">Something else here</a></li>
			          	<li role="separator" class="divider"></li>
			          	<li><a href="#">Separated link</a></li>
			        </ul>
  				</li>
			</ul>
	    </div>

    	<!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    	<!-- Include all compiled plugins (below), or include individual files as needed -->
    	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  	</body>
</html>

输出

时间: 2024-10-26 11:40:44

bootstrap-带下拉菜单的标签页的相关文章

Bootstrap历练实例:带有下拉菜单的标签和胶囊导航

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:带有下拉菜单的标签和胶囊导航</title> <meta charset="utf-8" /> <meta name=&quo

Bootstrap按钮式下拉菜单

前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜单 概述 按钮式下拉菜单其实就是普通的下拉菜单,唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”,display从block换成了inline-block <div class="btn-group"> <button type=&qu

bootstrap的下拉菜单

本文章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.将下拉菜单触发器和下拉菜单都包裹在 放在class.dropdown 里,或者另一个声明了 position: relative; 的元素. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)   关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框   看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的

Bootstrap的下拉菜单float问题

在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"

深入理解BootStrap Item8 -- 下拉菜单

1.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ? LESS版本:对应的源码文件为 dropdowns.less ? Sass版本:对应的源码文件为 _dropdowns.sass ? 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

Rails Bootstrap dropdown下拉菜单没反应解决方法

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { } Mac环境 Rails 5.1.4 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { }

Bootstrap 关于下拉菜单的使用

需要将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ari

Bootstrap 分离式下拉菜单 底端不对齐

解决方案 把 html 头部的 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 改成 <!DOCTYPE html> 具体原因 大概是前者非html5, 而Bootstrap在html5下才有较好的显示效果吧.