在Jhispter上使用bootstrap主题? [英] Use of bootstrap theme on Jhispter?

问题描述

我不是jhipster和Web应用程序编程的专业人士. 因此，也许我的问题很愚蠢，我想知道是否可以使用Bootstrap主题，例如您可以在这里找到的主题:链接?

I'm not a pro with jhipster and web application programmation. So maybe my question is stupid, I would like to know if it's possible to use a Bootstrap theme like the one you can find here : link for Jhipster's homepage?

如果是，我应该做些什么来更新Jhipster中的CSS，我应该如何修改JavaScript文件?

If yes what should I change to update the CSS in Jhipster and how should I adapt the JavaScript files?

如果Bootstrap无法实现，那么您是否可以在Jhipster上使用类似的东西?

If it's not possible with Bootstrap do you have something similar that can be used on Jhipster?

这是我的Jhipster版本:

Here is my Jhipster version:

 {
  "generator-jhipster": {

    "promptValues": {
      "packageName": "com.mycompany.myapp"
    },
    "jhipsterVersion": "4.6.2",
    "baseName": "testdesign",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "ehcache",
    "clusteredHttpSession": false,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": "elasticsearch",
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "aba9f3a1b9b0feaa096db087cc1d692102a1f6b6",
    "clientFramework": "angularX",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "otherModules": [
      {
        "name": "generator-jhipster-primeng",
        "version": "2.0.53"
      }
    ],
    "enableTranslation": false
  }
}

推荐答案

您需要导入所需主题的必要文件.大多数引导主题都是由CSS文件和一些JS等组成的.

You need to import the necessary files of the theme you want. Most bootstrap themes are composed of CSS files and some JS mainly, etc.

通过以下步骤，可以通过"vendor.ts" 将这些文件导入到jhipster项目中.

Import those files in your jhipster project could do it through "vendor.ts", with the following steps.

1. 转到"myprojectjh\src\main\webapp\content".
2. 为您的主题创建一个文件夹. (例如"mytheme01").
3. 打开创建的文件夹并复制主题(例如:"theme.css")的必要文件.
4. 转到"myprojectjh\src\main\webapp\app"并打开文件"vendor.ts" .
5. 写以下行以导入必要的文件(例如:"theme.css"). import '../content/mytheme01/theme.css'.
6. 保存更改并再次运行您的应用程序.

1. Go to "myprojectjh\src\main\webapp\content".
2. Create a folder for your theme. (ex. "mytheme01").
3. Open the created folder and copy the necessary files of the theme (ex: "theme.css").
4. Go to "myprojectjh\src\main\webapp\app" and open the file "vendor.ts".
5. Write the following line to import the necessary files (ex: "theme.css"). import '../content/mytheme01/theme.css'.
6. Save the changes and run your application again.

您的文件 vendor.ts 可能如下所示:

Your file vendor.ts could look like this:

注意::此外，您还可以编辑文件"_ bootstrap-variables.scss" 或"global.scss" 进行必要的调整，以便正确显示您的主题.

NOTE: Additionally, you can edit the file "_bootstrap-variables.scss" or "global.scss" to make some other necessary adjustments so that your theme is displayed correctly.

希望对您有所帮助.

这篇关于在Jhispter上使用bootstrap主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！