Bootstrap下拉按钮不起作用

时间:2017-09-13 04:00:04

标签: javascript bootstrap-4

我是bootstrap的新手。我遇到了关于下拉按钮功能的问题。包括来自远程服务器的jQuery和bootstrap文件(即来自code.jquery.com,cdnjs.cloudflare.com,maxcdn.bootstrapcdn。 com)下拉功能工作正常。但是当通过包含本地存储的文件离线工作时,下拉功能不起作用。请帮忙。提前谢谢。



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  </head>
  <body>

    <div class="container-fluid">
        <div class="btn-toolbar" role="toolbar" aria-level="Toolbar example">

            <div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1">
                <button class="btn btn-outline-primary">Button 1</button>
                <button class="btn btn-outline-primary">Button 2</button>
                <button class="btn btn-outline-primary">Button 3</button>
                <button class="btn btn-outline-primary">Button 4</button>
            </div>

            <div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown">
                <button class="btn btn-outline-secondary">Button 1</button>
                <button class="btn btn-outline-secondary">Button 2</button>
                <button class="btn btn-outline-secondary">Button 3</button>
                <button class="btn btn-outline-secondary">Button 4</button>

                <!--- Nested menu  -->
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                    </div>
                </div>
            </div>

            <div class="input-group">
                <span class="input-group-addon" id="btnGroupAddon">@</span>
                <input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon">
            </div>

        </div>
    </div>

    <script src="jquery/jquery-3.2.1.slim.min.js"></script>
    <script src="popper/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    
  </body>
</html>
&#13;
&#13;
&#13;

&#13;
&#13;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>

    <div class="container-fluid">
        <div class="btn-toolbar" role="toolbar" aria-level="Toolbar example">

            <div class="btn-group btn-group-lg mr-2" role="group" aria-level="Button Group 1">
                <button class="btn btn-outline-primary">Button 1</button>
                <button class="btn btn-outline-primary">Button 2</button>
                <button class="btn btn-outline-primary">Button 3</button>
                <button class="btn btn-outline-primary">Button 4</button>
            </div>

            <div class="btn-group btn-group-lg mr-2" role="group" aria-label="Button group with nested dropdown">
                <button class="btn btn-outline-secondary">Button 1</button>
                <button class="btn btn-outline-secondary">Button 2</button>
                <button class="btn btn-outline-secondary">Button 3</button>
                <button class="btn btn-outline-secondary">Button 4</button>

                <!--- Nested menu  -->
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                    </div>
                </div>
            </div>

            <div class="input-group">
                <span class="input-group-addon" id="btnGroupAddon">@</span>
                <input type="text" class="form-control" placeholder="Email" aria-describedby="btnGroupAddon">
            </div>

        </div>
    </div>

    <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

包含顺序可能是错误的。首先是jquery,然后是bootstrap和你的脚本。 检查页面源中的本地文件路径。 Ctrl + U会打开它。 阅读在浏览器中使用Web控制台的信息。会节省你很多时间。

答案 1 :(得分:0)

好的,你可以去离线引导下拉:

  1. 首先从@ApiOperation(value = "Update Developer (dev)", response = ResponseEntity.class) @RequestMapping(method = RequestMethod.PATCH, value = "/{type:developer}") public ResponseEntity<Response> updateDeveloper( @PathVariable String type, @RequestParam("year") String year, @RequestBody Developer employeeUpdate, ) { .....} @ApiOperation(value = "Update Manager (manager)", response = ResponseEntity.class) @RequestMapping(method = RequestMethod.PATCH, value = "/{type:manager}") public ResponseEntity<Response> updateManager( @PathVariable String type, @RequestParam("year") String year, @RequestBody Manager employeeUpdate, ) { .....}
  2. 下载Slim js
  3. 你还需要Popper.js并从this example下载(下载或克隆绿色按钮)作为zip文件并解压缩并在文件夹内转到dist&gt; esm或umd文件夹并将文件复制到您的位置
  4. 在body标记结束之前用你的bootstrap js文件链接slim.js(jquery文件)和popper.js
  5. 这适用于离线的大多数Js组件(包括dropdown / carousel / popover ...) 请享用!试试吧!(谢谢你)
相关问题