typescript 将引导JavaScript导入到vanilla项目

yvt65v4c 于 2023-03-19 发布在 TypeScript

关注(0)|答案(2)|浏览(99)

我正在使用Bootstrap v5.2.3并尝试添加JavaScript包。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Big project</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container py-4 px-3 mx-auto">
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>

</html>

我看到bootstrap.bundle.min.js是通过网络加载的，但是模态不能正常工作，就我所知，在v5+中不需要添加jQuery或Popperjs
你知道我错过了什么吗？
我也试过输入语句的 typescript 。

typescript

来源：https://stackoverflow.com/questions/75775842/importing-bootstrap-javascript-to-vanilla-project

2条答案

按热度按时间

5ktev3wc1#

bootstrap.bundle.min.js文件将包括bootstrap和popper js。但它不会有bootstrap.min.css文件，这是需要您的引导设计正常工作。此外，模态弹出窗口工作，你需要有一个按钮，点击，以便您可以打开它。
代码中的工作示例也可以参见Modal文档。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Big project</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <!-- Added this -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container py-4 px-3 mx-auto">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> <!-- Added this -->
      Launch demo modal
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

</html>

赞(0）回复(0）举报 2023-03-19

6kkfgxo02#

这是我的style.scss代码的样子。

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/nav";

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

赞(0）回复(0）举报 2023-03-19

我来回答

typescript 将引导JavaScript导入到vanilla项目

2条答案

相关问题

热门标签

最新问答