Bootstrap Tab格式建议使用CDN

时间:2018-07-14 06:00:55

标签: html css bootstrap-4

bootstrap.min.css和标签页出现问题。当我使用时:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

页面的格式是我想要的格式,但是当我切换选项卡时,其他选项卡的内容不显示(当我切换回第一个页面时显示):

enter image description here

选择“菜单1”:

enter image description here

当我使用时:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />

格式不好:

enter image description here

但是显示其他选项卡的内容:

enter image description here

是否有一个引导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>

2 个答案:

答案 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>