bootstrap jq

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
$(‘#add‘).on(‘click‘,function(){
$(".one a").append(‘<span>点数</span>‘);
console.log(‘sssss‘);
})
$(‘[data-toggle="tooltip"]‘).tooltip();

$(‘[data-toggle="popover"]‘).popover();

$(‘.bbb‘).on(‘click‘,function(){
console.log(‘saaaa‘);
var $btn = $(this).button(‘loading‘);
$btn.button(‘reset‘);
})

$(‘#close‘).on(‘closed.bs.alert‘, function () {
// do something…
console.log(‘cloase btn‘);
})
})
</script>
<body>
<div class="one container">
<a href="#" class="">dsds</a>
<button id="add" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="向下提示">添加</button>
<br><br><br><br><br><br><br><br><br>
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>

<div class="row">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-trigger="focus" data-placement="top" title="Popover title" data-content="And here‘s some<br>\nd amazing content.<br> It‘s very engaging. Right?">点我弹出/隐藏弹出框</button>
</div>

<div class="row">
<div class="alert alert-success">
<button type="button" id="close" class="close" data-dismiss="alert" aria-hidden="true">
&times;
</button>
<strong>提示成功</strong>
</div>

</div>
<div class="row">
<button type="button" id="submit" class="btn btn-default bbb" data-loading-text="Loading..." >提交</button>

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>

<script>
$(‘#myButton‘).on(‘click‘, function () {
var $btn = $(this).button(‘loading‘)
// business logic...
// $btn.button(‘reset‘)
setTimeout(function(){ $btn.button(‘reset‘) },2000);
})
</script>
</div>

<div class="row">
<a class="btn btn-default" data-toggle="collapse" expanded="false" href="#collEx">
打开
</a>
<div class="collapse" id="collEx">
<div class="well">
dsdsdsdsd
</div>
</div>
</div>

</div>
</body>
</html>

时间: 2024-10-09 23:19:36

bootstrap jq的相关文章

转:在线框架引用 bootstrap/jq/jqmobile/css框架

bootstrap百度调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> 使用 Bootstrap 中文网提供

项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置

vue项目创建 环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ ? 2.安装cnpm: >: npm install -g cnpm --registry=https://registry.npm.taobao.org ? 3.安装vue最新脚手架: >: cnpm install -g @vue/cli ? 注:如果2.3步报错,清除缓存后重新走2.3步 >: npm cache clean --force 创建项目 ''' 1.切到项目文

路飞项目(一)——项目架构

永久配置安装源 为了加速模块的下载 1.文件管理器文件路径地址栏敲:%APPDATA% 回车,快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中 2.新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件 3.新增 pip.ini 配置文件内容 配置内容 [global] index-url = http://pypi.douban.com/simple [install] use-mirrors =true mirrors =http://pypi.doub

jq bootstrap select 点击不能动弹

jq  bootstrap select 点击不能动弹   因为是样式selectpicker  冲突. 解决办法换 样式  form-control <select name="type_name1" id="type_name1" style="width: 210px" class="form-control" > </select> 为option追加值:document.getElementB

第七十三篇 jq进阶与bootstrap了解

//参考文档 jquery API: "http://jquery.cuishifeng.cn/css.html" 一.jq属性操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性操作</title> </head> <body> <img src="https://ss0.bd

用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自己做的,主要还是因为前端差,还有就是懒.请大家不要太过在意命名和前端样式,我并没有进入公司工作,命名没有具体规范,都是随心所欲.前端实在太差,如果你觉得颜色样式太差,只能说明我的审美有问题,咱们主要看功能实现. 上篇文章发布后有一定的推荐量和浏量,对一个初学者来说,自认为还是挺不错的.最主要的是收到

bootstrap 的jq插件 button 结构解析

首先声明:JS是没有类的概念的,所以的一切都是派生自现有对象的一个副本:如果有面向对象语言的基础,可以当做类来理解: 然后这是对jquery对象的插件对象的分析图,同时我是用button对象举例分析的,自己一己之见,,分析之前先 科普对象-构造函数 //构造函数 function myConstructor(messg){ //this的指向是对象,指向环境一定不要搞混乱,也可以使用apply或者call指定指向环境: this.messg=messg; //私有属性 var separator

bootstrap无限级分类 jq拓展 之前的无限级分类的封装版~

HTML部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级联动封装</title> <link href="./css/bootstrap.css" rel="stylesheet"> <script src="./js/jque

Bootstrap 框架、插件

Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品.所以更加准确说,我们更多的时候是去学习如何去使用Bootstrap,那么我们该如何学会更好的使用Bootstrap?下面是我个人在Bootstrap学习使用过程中得一些心得,在这儿跟大家分享,不足之处欢迎前辈们多多指教! 第一:在学习一个新的知识,我们首先的明白它是什么以及我们为