bootstrap学习，应用了才知道有用！
投稿于 被查看 40797 次 评论：271
bootstrap学习，应用了才知道有用！
接着上次的学习记录来：这次带来警示框alert，按钮button
一.警示框alert
1.在关闭按钮，链接或外部button中添加data-dismiss=“alert”。
2.用js的方法添加click事件。
二.按钮button插件
data-loading-text属性定义加载的文本信息，通过JavaScript给按钮绑定一个事件，并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。
按钮模拟单选框，复选框按钮组自定义属性data-toggle="buttons"。唯一不同的是input属性单选是radio，复选是checkbox。
data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。
1、切换按钮状态（得到焦点）：$("#mybutton").button("toggle")
2、重新恢复按钮：$("#mybutton").button("reset")
3、$("#mybutton").button("任意字符参数名")
替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”.
html 代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>使用×作为关闭</h3>
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert" type="button" >×</button>
<p>恭喜您操作成功！</p>
</div>
<h3>使用js添加点击事件实现关闭</h3>
<div class="alert alert-warning" role="alert" id="myAlert">
<h4>谨防被骗</h4>
<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
<button type="button" class="btn btn-danger" id="close">关闭</button>
</div>
<h3>示例按钮加载状态</h3>
<button class="btn btn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>
<h3>示例单选框</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="options1">男
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options2">女
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options3">未知
</label>
</div>
<h3>复选框</h3>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options1">电影
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options2">音乐
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options3">游戏
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options4">摄影
</label>
</div>
<h3>按钮状态切换data-toggle="button"</h3>
<div class="btn-group" data-toggle="button">
<button type="button" data-toggle="button" class="btn btn-primary">确认</button>
</div>
<div class="btn-group" data-toggle="buttons">
<button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" data-loading-text="Loading...">确认</button>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$("#close").on("click",function(){
$(this).alert("close");
});
$("#loaddingBtn").click(function () {
$(this).button("loading");
});
$("#mybutton").click(function(){
$(this).button('loading').delay(1000).queue(function() {
$(this).button('complete');
});
});
});
</script>
</body>
</html>
用户评论