我的 Twitter Bootstrap“注销”按钮样式不合适。
这是按钮的小片段：
<a class="btn btn-danger btn-small" href="logout.php" data-toggle="tooltip" rel="tooltip" data-placement="bottom" title="Return to sign-in">Logout</a>
这是整个页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cornerstone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way
to the bottom of the topbar */
}
h1 {
color: #624949;
}
h2 {
color: #624949;
}
p {
color: #624949;
}
.btn-custom-lighten.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #644a4a;
background-image: -moz-linear-gradient(top, #584141, #755757);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#584141), to(#755757));
background-image: -webkit-linear-gradient(top, #584141, #755757);
background-image: -o-linear-gradient(top, #584141, #755757);
background-image: linear-gradient(to bottom, #584141, #755757);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff584141', endColorstr='#ff755757', GradientType=0);
border-color: #755757 #755757 #493636;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #755757;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover, .btn-custom-lighten:focus, .btn-custom-lighten:active, .btn-custom-lighten.active, .btn-custom-lighten.disabled, .btn-custom-lighten[disabled] {
color: #ffffff;
background-color: #755757;
*background-color: #674c4c;
}
.btn-custom-lighten:active, .btn-custom-lighten.active {
background-color: #584141;
}
form {
margin: 0;
padding: 0;
}
</style>
<link rel="shortcut icon" href="http://cstonecc.org/favicon.ico">
</head>
<body background="assets/img/background.jpg">
<div class="container">
<!-- Jumbotron -->
<div class="jumbotron">
<h1 class="">Dashboard</h1>
<p class="lead">
Welcome to the dashboard. Configure below!
</p>
<a class="btn btn-danger btn-small" href="logout.php" data-toggle="tooltip" rel="tooltip" data-placement="bottom" title="Return to sign-in">Logout</a>
</div>
<br />
<div class="row-fluid">
<div class="span4">
<button class="btn btn-large btn-custom-lighten" type="button"
data-toggle="modal" rel="tooltip" data-placement="top" title="Click to configure" data-target="#carouselModal">
Carousel
</button>
<div id="carouselModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h3>Carousel</h3>
</div>
<form action="update-carousel.php" method="post">
<div class="modal-body">
<section class="row">
<div>
<p>
<textarea name="carousel" rows="4" style="margin: 0px 0px 10px; width: 501px; height: 101px; max-width: 501px;"><?php $file = new SPLFileObject('carousel.txt');
foreach ($file as $line)
echo($line);
?></textarea>
</p>
</div>
</section>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
Close
</button>
<input type="submit" id="carousel-save" name="carousel-save" class="btn btn-success" value="Save" />
</div>
</div>
<p></p>
</div></form>
<div class="span4">
<p></p>
</div>
<div class="span4">
<p></p>
</div>
</div>
<p>
<br />
</p>
<p>
<br />
</p>
<p>
<br />
</p>
<p>
<br />
</p>
<!--<hr>-->
<div class="footer">
<br />
<br />
<br />
<br />
<p class="">
Copyright 2013 (C) <a style="color: #000000;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="Visit our website" href="http://cstonecc.org">Cornerstone</a>
</p>
</div>
</div>
<!-- /container -->
<style>
body {
padding-top: 20px;
padding-bottom: 60px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
margin: 60px 0;
}
/* Main marketing message */
.jumbotron {
margin: 80px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$("[rel='tooltip']").tooltip();
});
</script>
</body>
</html>