twitter Bootstrap Popovers (and bootstrap in general) not Working
Question
I realize this question has been asked multiple times before, but unfortunately, I am unable to find a solution from the existing questions & answers. I have created an html file which I think will have bootstrap functionality by linking to the CDN. It has a link to the JQuery CDN as well.
Well ... I just noticed that the Bootstrap styles are not loading at all. I am not sure why.
Nonetheless, I am assuming that fix will be relatively minor, but I have been struggling for much longer than that to figure out why the Popover is not working.
Please, if you are answering, make sure you are referencing the Bootstrap 3 rules.
note: the structure of the below code was taken straight from the Bootstrap website.
Without further ado !
Here's the code.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="btn-group-vertical">
<a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click">1</a>
<a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click">2</a>
<a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click">3</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script>
$('.btn').popover();
</script>
</body>
</html>
1 answers
solution1
1 ACCPTED 2013-11-07 22:36:34
You need to add http: to this link -
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
So this is the answer:
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.