3

现在我正在为前端学习 Kotlin，我已经创建了 Kotlin React App 使用

npx create-react-kotlin-app my-app

然后我尝试使用 import 导入 Bootstrap

@file:JsModule("node_modules/boostrap/bootsrap.js")
external class Boostrap {}

然后

在 App.kt 中，渲染函数

     override fun RBuilder.render() {
        div("container") {
            appHeader()
            p("App-intro") {+
                "This is body"
            }
            p("App-ticker") {
                ticker()
            }
        }
    }

我已经使用 npm install 命令添加了引导程序，但是引导程序文件根本没有加载到 UI 中。你能帮我加载引导程序吗？

4

1 回答 1

0

在您的 html 中加载引导脚本

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
  <title>Sample</title>
</head>
<body>
  <div id="root"></div>
  <script src="sample.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"></script>
</body>

并使用您的 css 样式中的类

override fun RBuilder.render() {
    styledDiv {
        css {
            classes = mutableListOf("alert alert-warning text-center")
        }
        +"Sample"
    }
}
于 2020-11-24T04:06:31.603 回答