bootstrap.min.css和标签页出现问题。当我使用时:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
页面的格式是我想要的格式,但是当我切换选项卡时,其他选项卡的内容不显示(当我切换回第一个页面时显示):
选择“菜单1”:
当我使用时:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
格式不好:
但是显示其他选项卡的内容:
是否有一个引导CSS CDN可以同时提供良好的格式和选项卡?
这是完整的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Camp</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<!-- Le styles -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
text-align: center;
}
.myheader {
display:flex;
text-align: center;
}
.myimg {
width: 130px;
height: auto;
}
.pull-right {
text-align: right;
}
/* Tooltip container */
/* Tooltip text */
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
.error {
color: red;
}
.req {
color: red;
}
</style>
<!-- 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]-->
<!-- Fav and touch icons -->
</head>
<body>
<div id="campDisplay" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showCampForm">
<div class="container-fluid shadow">
<div class="jumbotron col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Camp</h3>
<div class="container-fluid">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="home" class="container tab-pane active col-lg-12 col-md-12 col-sm-12 col-xs-12"><br>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">Start Date<span class="req"> *</span></label>
<div class="input-group date" id="datepicker1">
<input type="text" class="form-control" id="startDate" name="startDate" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">End Date<span class="req"> *</span></label>
<div class='input-group date' id='datepicker2'>
<input type="text" class="form-control" id="endDate" name="endDate" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="location">Location of Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="location" name="location" placeholder="Location of Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="details">Details of Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="details" name="details" placeholder="Details of Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="nights">Nights in Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="nights" name="nights" placeholder="Nights in Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="building">Nights in a building:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="building" name="building" placeholder="Nights in a building">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="canvas">Nights under canvas:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="canvas" name="canvas" placeholder="Nights under canvas">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="actualKM">Kilometres Travelled:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="actualKM" name="actualKM" placeholder="Kilometres Travelled">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="offset">Offset:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="offset" name="offset" placeholder="Offset">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Outcome:</label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="outcome" name="outcome" placeholder="Outcome">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button id="update" class="btn btn-large btn-primary" >Update</button>
<button id="clear" class="btn btn-large btn-primary" >Clear</button>
<button id="delete" class="btn btn-large btn-primary" >Delete</button>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Photograph:</label>
<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8" type="file" id="photo" name="photo" placeholder="Photograph">
<img src="..." alt="..." class="img-thumbnail">
</div>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/camp.js"></script>
</body>
</html>
答案 0 :(得分:0)
使用以下参考价
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
对于表单输入,请使用“ form-group”,它将在表单控件周围隔开。
答案 1 :(得分:0)
这是我用来解决它的代码:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Camp</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<!-- Le styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" />
<!-- Text Editor -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<!-- Text Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
text-align: center;
}
.myheader {
display:flex;
text-align: center;
}
.myimg {
width: 130px;
height: auto;
}
.pull-right {
text-align: right;
}
/* Tooltip container */
/* Tooltip text */
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
/********************************************************************/
/*** PANEL ***/
.panel.with-nav-tabs .panel-heading{
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
.error {
color: red;
}
.req {
color: red;
}
/********************************************************************/
/*** Other formatting ***/
/********************************************************************/
/*** z-index to ensure date is infront of modal ***/
.control-label {
z-index: 900;
}
.datepicker {
z-index: 999 !important;
}
</style>
</head>
<body>
<div id="campDisplay" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showCampForm">
<div class="page-header">
<h1>Camps</h1>
</div>
<div class="col-md-12">
<div class="panel with-nav-tabs panel-primary">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1primary" data-toggle="tab">Primary 1</a></li>
<li><a href="#tab2primary" data-toggle="tab">Primary 2</a></li>
<li><a href="#tab3primary" data-toggle="tab">Primary 3</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#tab4primary" data-toggle="tab">Primary 4</a></li>
<li><a href="#tab5primary" data-toggle="tab">Primary 5</a></li>
</ul>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1primary">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">Start Date<span class="req"> *</span></label>
<div class="input-group date" id="datepicker1">
<input type="text" class="form-control" id="startDate" name="startDate" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group">
<label class="control-label control-label-left col-lg-5 col-md-5 col-sm-5 col-xs-5" for="startDate">End Date<span class="req"> *</span></label>
<div class='input-group date' id='datepicker2'>
<input type="text" class="form-control" id="endDate" name="endDate" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="location">Location of Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="location" name="location" placeholder="Location of Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="summernote">Details of Camp:<span class="req"> *</span></label>
<div id="summernote"></div>
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="nights">Nights in Camp:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="nights" name="nights" placeholder="Nights in Camp">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="building">Nights in a building:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="building" name="building" placeholder="Nights in a building">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="canvas">Nights under canvas:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="canvas" name="canvas" placeholder="Nights under canvas">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="actualKM">Kilometres Travelled:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="actualKM" name="actualKM" placeholder="Kilometres Travelled">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="offset">Offset:<span class="req"> *</span></label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="offset" name="offset" placeholder="Offset">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Outcome:</label>
<input class="row col-lg-8 col-md-8 col-sm-8 col-xs-8" type="text" id="outcome" name="outcome" placeholder="Outcome">
</div>
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button id="update" class="btn btn-large btn-primary" >Update</button>
<button id="clear" class="btn btn-large btn-primary" >Clear</button>
<button id="delete" class="btn btn-large btn-primary" >Delete</button>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="outcome">Photograph:</label>
<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8" type="file" id="photo" name="photo" placeholder="Photograph">
<img src="..." alt="..." class="img-thumbnail">
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2primary">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane fade" id="tab3primary">Primary 3</div>
<div class="tab-pane fade" id="tab4primary">Primary 4</div>
<div class="tab-pane fade" id="tab5primary">Primary 5</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/camp.js"></script>
<script>
$('#summernote').summernote({
placeholder: 'Details of the Camp',
tabsize: 2,
height: 100
});
</script>
</body>
</html>