twitter-bootstrap 引导面板无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44997374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap panel is not working properly
提问by Dulara Malindu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>GMP APP</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/custom.css" type="text/css"/>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading"> SignUp to the system </div>
<div class="panel-body">
<<panel content goes here>>
</div>
<div class="panel-footer"> You have 3 More attempts left! </div>
</div>
<script src="javascript/jquery.js"> </script>
<script src="javascript/bootstrap.js"> </script>
</div>
</body>
</html>
bootstrapis linked correctly. But the panel is not working.! I tried everything. I do assume i have correctly linked relevant libraries. This is the output of the browser page source...
引导程序已正确链接。但是面板不工作。！我尝试了一切。我确实假设我已经正确链接了相关库。这是浏览器页面源的输出...
采纳答案by Shiladitya
Here you go with fiddle https://jsfiddle.net/nh2g8mLb/
在这里，您可以使用小提琴https://jsfiddle.net/nh2g8mLb/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading"> SignUp to the system </div>
<div class="panel-body">
Test Panel
</div>
<div class="panel-footer"> You have 3 More attempts left! </div>
</div>
</div>回答by Max
Panels were dropped in bootstrap >= 4.1. You should use now cards instead:
面板在 bootstrap >= 4.1 中被丢弃。您应该使用 now 卡：
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
Body
</div>
<div class="card-footer">
Footer
</div>
</div>
https://getbootstrap.com/docs/4.1/components/card/
https://getbootstrap.com/docs/4.1/components/card/
Migration description: https://getbootstrap.com/docs/4.1/migration/
