39,084
社区成员
发帖
与我相关
我的任务
分享bootstrap 模态框大小
在使用bootstrap开发页面时，怎么自定义模态框的宽度，比如这个登录页面右边空白太多，我想将模态框的宽度设置为较小的值，但其他的模态框还是使用默认的值。谢谢！
...全文
请发表友善的回复…
发表回复
业余草 2015-02-03
- 打赏
- 举报
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>商家登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Joychao <joy@joychao.cc>">
</head>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link class="bootstrap library" rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/js/sandbox/bootstrap-2.2.0/css/bootstrap.min.css">
<script class="bootstrap library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script class="bootstrap library" src="http://sandbox.runjs.cn/js/sandbox/bootstrap-2.2.0/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<section class="loginBox row-fluid">
<section class="span7 left">
<h2>商户登录</h2>
<p><input type="text" name="username" /></p>
<p><input type="text" name="password" /></p>
<section class="row-fluid">
<section class="span8 lh30"><label><input type="checkbox" name="rememberme" />下次自动登录</label></section>
<section class="span1"><input type="button" value=" 登录 " class="btn btn-primary"></section>
</section>
</section>
<section class="span5 right">
<h2>没有帐户？</h2>
<section>
<p>这里有一段文字啊，很多的文字啊，太多太多的文字了，主要可以介绍介绍注册的好处和公司或者项目概况。。。</p>
<p><input type="button" value=" 注册 " class="btn"></p>
</section>
</section>
</section><!-- /loginBox -->
</div> <!-- /container -->
</body>
</html>
*{margin:0;padding: 0;}
body{background: #444 url(http://sandbox.runjs.cn/uploads/rs/418/nkls38xx/carbon_fibre_big.png)}
.loginBox{width:420px;height:230px;padding:0 20px;border:1px solid #fff; color:#000; margin-top:40px; border-radius:8px;background: white;box-shadow:0 0 15px #222; background: -moz-linear-gradient(top, #fff, #efefef 8%);background: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#f4f4f4));font:11px/1.5em 'Microsoft YaHei' ;position: absolute;left:50%;top:50%;margin-left:-210px;margin-top:-115px;}
.loginBox h2{height:45px;font-size:20px;font-weight:normal;}
.loginBox .left{border-right:1px solid #ccc;height:100%;padding-right: 20px; }效果图：
业余草 2015-02-03
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<title>RunJS 演示代码</title>
</head>
<body>
<div class='content'>
<div style='padding-right:40px'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div style='padding-right:20px'>
<div></div>
<div></div>
<div style='margin-right:122px'>
</div>
</div>
<div>
<div></div>
<div></div>
<div style='margin-right:142px'></div>
</div>
<div>
<div></div>
<div style='margin-right:82px' class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:62px' class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:42px' class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:62px' class="play"></div>
<div class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div></div>
<div style='margin-right:82px' class="play"></div>
<div class="play"></div>
<div style='margin-right:42px'></div>
</div>
<div>
<div style='margin-right:22px'></div>
<div style='margin-right:142px'></div>
</div>
<div>
<div style='margin-right:42px'></div>
<div></div>
<div style='margin-right:102px'></div>
</div>
<div>
<div style='margin-right:62px'></div>
<div></div>
<div style='margin-right:82px'></div>
</div>
<div>
<div style='margin-right:42px'></div>
<div></div>
<div style='margin-right:102px'></div>
</div>
<div>
<div style='margin-right:22px'></div>
<div></div>
<div style='margin-right:122px'></div>
</div>
<div>
<div></div>
<div></div>
<div style='margin-right:142px'></div>
</div>
<div>
<div></div>
<div style='margin-right:162px'></div>
</div>
</div>
</body>
</html>
body{
margin:50px;
background-color:#2C3437;
}
.content{
display:inline-block;
width:350px;
height:239px;
margin-right:-4px;
}
.play{
cursor:pointer;
background-color:#060;
}
div>div{
display:block;
height:20px;
}
div>div>div{
width:16px;
height:16px;
background-color:#FFF;
display:inline-block;
float:right;
margin:2px;
}
$(document).ready(function(){
animate();
$(".play").click(animate).mouseover(function(){
$(".play").css({"background-color":"#A55"});
}).mouseout(function(){
$(".play").css({"background-color":"#060"});
});
});
function animate(){
$('div>div>div').each(function(id){
$(this).css({
position: 'relative',
top: '-200px',
opacity: 0
});
var wait = Math.floor((Math.random()*3000)+1);
$(this).delay(wait).animate({
top: '0px',
opacity: 1
},1000);
});
}
效果图：
