Question

我正在开发一个使用boostrap 3的应用程序，不幸的是boostrap 3文件（.css / js）已被大量修改，我的工作是包含SummerNote Text编辑器，一切都运行良好，但他的风格真的搞砸了由于之前已经完成的定制，现在是否可以仅在特定模式中包含和使用Boostrap 4？

下面是示例代码！谢谢！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>bootstrap4</title>

    <!-- My app uses Boostrap 3 and has been heavily modified  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <!-- My app uses Boostrap 3 and has been heavily modified  -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote-bs4.js"></script>
  </head>
  <body>

    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Summer Note</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div id="summernote"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

   
    <script>
      $('#summernote').summernote({
        placeholder: '',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

Answer 1

您必须为模式创建新文件，并在同一页面中包含summernote和bootstrap 4，然后将新文件添加到现有文件中。注意：请在底部添加新文件，以免覆盖现有的bs版本样式

如何在特定的Boostrap Modal上使用Boostrap 4？

1 个答案: