Bootstrap 单按钮下拉菜单
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<link href="~/Bootstrap3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/jquery3.3.1/jquery-3.3.1.min.js"></script>//注意:jquery版本太低有可能显示不出效果
<script src="~/Bootstrap3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<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>
</div>
</body>
</html>
Bootstrap 单按钮下拉菜单的更多相关文章
- 8.bootstrap单按钮下拉菜单
1. 2. (1)首先是两个按钮,因此需要<div class="btn-group">加上"btn-group". (2)要将下拉菜单与按钮联系在 ...
- bootstrap:按钮下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap系列 -- 34. 按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...
- Bootstrap系列 -- 24. 下拉菜单基本用法
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...
- Bootstrap-CL:按钮下拉菜单
ylbtech-Bootstrap-CL:按钮下拉菜单 1.返回顶部 1. Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉 ...
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)
实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...
- 【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
- Bootstrap系列 -- 27. 下拉菜单对齐方式
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...
随机推荐
- before/after伪类常见用法
1.清除浮动 ; } /*IE6/IE7*/ .clearfix:after{ display: block; content: "clear"; ; clear: both; o ...
- 蓝牙简单配对(Simple Pairing)协议及代码流程简述
kangear注: 文章转自:http://blog.csdn.net/myxmu/article/details/12217135 原文把图给搞丢了.可是文章太好了,这个时候我就发挥多年的Googl ...
- [NPM] Pipe data from one npm script to another
In an effort to bypass saving temporary build files you can leverage piping and output redirection t ...
- 雷观(十):管理自己的任务列表(TodoList)很重要
由幼年,到青年,再到成年,你会发现自己有越来越多的事情要做.参加工作后,很可能要在多个战线上同时忙碌. 最常见的有,工作(可能会加班加点).爱情(不少人忙着恋爱,需要花费很多心思).个人娱乐(玩游戏看 ...
- Hierarchical Tree Traversal in Graphics Pipeline Stages
BACKGROUND Many algorithms on a graphics processing unit (GPU) may benefit from doing a query in a h ...
- 小强的HTML5移动开发之路(28)—— JavaScript回顾3
一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型 //前三个都有对应的包装类 null:空类型 undefined: ...
- C++程序员经常问的11个问题
下面的这些要点是对所有的C++程序员都适用的.我之所以说它们是最重要的,是因为这些要点中提到的是你通常在C++书中或网站上无法找到的.如:指向成员的指针,这是许多资料中都不愿提到的地方,也是经常出错的 ...
- scala 通过apply创建类的对象
package cn.scala_base.oop.scalaobject; class Boy(name: String) { private var age: Int = 0; println(n ...
- QT5.8.0+MSVC2015安装以及环境配置(不需要安装VS2015)
原文:QT5.8.0+MSVC2015安装以及环境配置(不需要安装VS2015) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/snow_rain_ ...
- React Native细节记录
1.环境搭建部分 安装完node后建议设置npm镜像以加速后面的过程(或使用***工具).注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别! npm config ...