BootStrap 超链接变按钮的实现方法
<a href="#"> xuhaitao </a>
上面代码效果如下:
btn btn-default :变成一个按钮样子
btn-lg : 大号的按钮
btn-block : 按钮填充整个宽度
JS按钮(bootstrap)超链接
html代码:
button是bootstrap样式,请先加入bootstrap.min.css和jquery-1.11.1.min.js
<a href="#" id="DownLoadAudio" target="_blank"></a> <button id="Submit6" class="btn btn-sm btn-success" type="button" onclick="openWin(@item.UserID,@item.AudioID)"> <i class="glyphicon glyphicon-download-alt"></i>下载</button>
javascript代码:
<script type="text/javascript"> function openWin(userid, audioid) { var obj = document.getElementById("DownLoadAudio"); obj.href = data.state; obj.click(); } </script>
以上所述是小编给大家介绍的BootStrap 超链接变按钮的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
全面解析Bootstrap表单使用方法(表单按钮)
一.多标签支持 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等. 同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名".btn". <button class="btn btn-default" type="button&
-
详解Bootstrap按钮
描述 Bootstrap Button(按钮)JavaScript 插件允许您加强按钮的功能.您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条. 什么是必需的 您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件.它们都位于 docs/assets/js 文件夹内. 如何使用它 您可以不编写任何 JavaScript 只通过标记使用该插件,也可以通过 JavaScript 启用按钮. Bootstrap 提供了一些选项来定义按
-
基于Bootstrap重置输入框内容按钮插件
当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可. text password email url search tel number datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo
-
JS组件Bootstrap按钮组与下拉按钮详解
本文先为大家分享按钮组的使用方法,具体内容如下 一.按钮组(Button Groups) 1.单个按钮组 用.btn-group封装多个带.btn的<button> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class=&qu
-
Bootstrap每天必学之按钮
1.按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等.那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件. 源码查询: 按钮组也是一个独立的组件,所以可以找到对应的源码文件: ☑ LESS版本:对应的源文件为buttons.less ☑ Sass版本:对应的源文件为_buttons.scss ☑ CSS版本:对应bootstrap.css文件第3131行-第3291行
-
BootStrap 超链接变按钮的实现方法
<a href="#"> xuhaitao </a> 上面代码效果如下: btn btn-default :变成一个按钮样子 btn-lg : 大号的按钮 btn-block : 按钮填充整个宽度 JS按钮(bootstrap)超链接 html代码: button是bootstrap样式,请先加入bootstrap.min.css和jquery-1.11.1.min.js <a href="#" id="DownLoadAud
-
Bootstrap中点击按钮后变灰并显示加载中实例代码
Bootstrap插件非常的好用了,我们今天一起来看一篇关于Bootstrap实现点击按钮之后按钮变成不可点击的一个效果了,具体的如下所示. 1.在按钮中加入data-loading-text,即点击按钮后显示的文字 <button type="submit" class="btn btn-primary btn-check" data-loading-text="提交中...">添加成员</button> 2.当点击按钮
-
Jquery 模拟用户点击超链接或者按钮的方法
复制代码 代码如下: //Jquery 模拟用户点击超链接或者按钮 $("#a").trigger("click");
-
BootStrap使用file-input插件上传图片的方法
最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 首先根据自己的项目路径引入插件css和js文件 注意locale语言文件在fileinput.min.js文件之后引入 <!-- file input --> <link href="../../css/fileinput.min.css"
-
详解Bootstrap各式各样的按钮(推荐)
Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我
-
Bootstrap table 服务器端分页功能实现方法示例
本文实例讲述了Bootstrap table 服务器端分页功能实现方法.分享给大家供大家参考,具体如下: bootstrap版本 为 3.X bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js 前端bootstrap+jQuery,服务端使用spring MVC实现restful风格服务 前端代码块 <table id="test-table" class="col-xs
-
BootStrap扔进Django里的方法详解
因为django的版本差异化比较大,所以以下配置仅供学习参考. D:\www\mysite>python --version Python 2.7.5 >>> print django.__version__ 1.9.4 本记录不作细说,主要配置过程如下: 1.settings.py最后一段,关于静态文件的配置 # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/1.9/howto
-
mint-ui的search组件在键盘显示搜索按钮的实现方法
代码如下所示: <form action="" target="frameFile"> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll
-
BootStrap select2 动态改变值的方法
1,selec2动态赋值 var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" }); $("#e_pid").attr("value", tempP); $("#e_pid").select2({ placeholder: "查找停车场名称(多选)", language: "zh-CN", minimumInp
-
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos
随机推荐
- VMware虚拟机CentOS系统网络设置
- Mysql GTID Mha配置方法
- php使用base64加密解密图片示例分享
- Angularjs 制作购物车功能实例代码
- iOS 10即将来袭!升级你的iOS开发装备
- Python 命令行参数sys.argv
- ASP.NET 文件断点续传实现代码
- asp.net下Linq To Sql注意事项小结
- JS函数重载的解决方案
- JS中生成随机数的用法及相关函数
- 对比PHP对MySQL的缓冲查询和无缓冲查询
- python 调用c语言函数的方法
- Python访问纯真IP数据库脚本分享
- jsp导出身份证到excel时候格式不对但以X结尾的却可以
- C#常用的数据格式转换汇总
- JavaScript实现复制内容到粘贴板代码
- 基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
- ES6 Promise对象概念与用法分析
- SQL Server代理服务无法启动怎么办
- Ubuntu 14.04下创建Genymotion安卓虚拟机的步骤详解