Laravel 5.4 未捕获的错误：Bootstrap 需要 jQuery

Question

我的 Laravel APP 没有移动响应，我认为是因为Uncaught Error: Bootstrap requires jQuery

已经问过无数 Stackoverflow 问题，但没有一个对我有用。

已经尝试过以下解决方案： Laravel - Bootstrap's JavaScript requires jQuery error

https://laracasts.com/discuss/channels/general-discussion/bootstraps-javascript-requires-jquery-error

Error: Bootstrap's JavaScript requires jQuery on laravel 5.4

这是它在移动设备上的外观：

主刀片文件 list.blade.php

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<!------ Include the above in your HEAD tag ---------->
<style>
    body {
        /* Safari 4-5, Chrome 1-9 */
        /*background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));*/

        /* Safari 5.1+, Chrome 10+ */
        /*background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);*/

        /* Firefox 3.6+ */
        /*background: -moz-radial-gradient(circle, #1a82f7, #2F2727);*/

        /* IE 10 */
        /*background: -ms-radial-gradient(circle, #1a82f7, #2F2727);*/
        height: 600px;
    }

    .centered-form {
        margin-top: 60px;
    }

    label.label-floatlabel {
        font-weight: bold;
        color: #46b8da;
        font-size: 11px;
    }

    .panel-body {
        background: #EEEEEE !important;
    }

    .panel-heading {
        background-color: #CCCCCC !important;
        text-align: center !important;
    }

    .panel-default {
        border: 1px solid black;
        border-radius: 0px !important;
        margin-bottom: 0px !important;
    }

    .box-body {
        margin-bottom: 14px;
    }

    .btn-info {
        background-color: #2d78c2 !important;
        border-color: #2d78c2 !important;
    }
    #res_title{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    #res_desc{
        font-size: 10px;
        overflow-wrap: break-word;
        height: 30px;
        overflow: hidden;
    }
    #res_result{
        font-size: 10px;
        font-weight: 600;
    }
    #items{
        width: 100px;
        border: 1px solid black;
        padding: 5px;
        margin-right: 3px;
        height: 100px;
    }
    #result_box_div
    {
        margin-top: 20px;
        display: inline-flex;
    }
</style>

<script type="text/javascript" src="https://www.clubdesign.at/floatlabels.js"></script>

<div class="container">
    <div class="row centered-form">
        <div class="col-xs-12 col-sm-8 col-md-8 col-sm-offset-2 col-md-offset-2">
            <div class="panel panel-default">
                <!-- <div class="panel-heading">
                        <h3 class="panel-title">Charging Parameter</h3>
                    </div>-->
                <div class="panel-body">
                    {!! csrf_field() !!}
                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label"><b>Battery Mode & lManufacturer :</b></label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->Manufacture->battery_manufaturer_name ?> &
                                <?php echo $record->Model->model_number ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('cp_batter_voltage') ? ' has-error' : '' }}">
                                    <label class="control-label">Voltage of each battery :</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->cp_batter_voltage ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('battery_system') ? ' has-error' : '' }}">
                                    <label class="control-label">Number of total batteries :</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->battery_system ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('cp_amp_hours') ? ' has-error' : '' }}">
                                    <label class="control-label">Amp-hour capacity of each battery :</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->cp_amp_hours ?>
                            </div>
                        </div>
                    </div>

                    <div class="box-body">
                        <div class="row" id='custom_fields'>
                            <div class="col-md-6">
                                <div class="form-group{{ $errors->has('cp_system_voltage') ? ' has-error' : '' }}">
                                    <label class="control-label">System Voltage : </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <?php echo $record->cp_system_voltage ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-heading" style="text-align:center !important;">
                    <!--<p><b>P3 = <?php echo $p3_variable; ?></b></p>-->
                    <a href="{{ url('/') }}?cp_id={{$record->id}}" class="btn btn-primary"><i class="fa fa-arrow-left"></i> Edit</a>
                </div>
            </div>
        </div>
    </div>

    <!--special notes-->
    <div class="col-xs-12 col-sm-8 col-md-8 col-sm-offset-2 col-md-offset-2" style="margin-left: 15.8% !important;">
        <div id="result_box_div">
            <?php echo $battery_profiledata; ?>
        </div>
    </div>

</div>

<script>
    $(function () {
        $('input').floatlabel({
            labelEndTop: 0
        });
    });
</script>

Answer 1

你必须在加载 Bootstrap JS 之前加载 jQuery

使用这个

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

而不是

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

bootstrap 3.1.0 也需要 Jquery 1.9.0 或更高版本 https://github.com/twbs/bootstrap/blob/v3.1.0/bower.json

  "dependencies": {
    "jquery": ">= 1.9.0"
  }