Sample (especially b-form-select) does not display well in BootstrapVue.

I would like to use the "Complete example" sample on the BootstrapVue site, but it doesn't show well.
In particular, it differs from the sample display in areas other than the table, such as sorting filters.
It seems that b-form-select is not displayed well, so I tried your sample as well, but it still doesn't show the same way as the sample.

Here are the tasks and sources:Could you please check if there is anything wrong?

Create Package

vue create paging-table
*Vue2 is selected.

Install Package

npm install bootstrap bootstrap-vue

Package Contents

{
      "name": "paging-table",
      "version": "0.1.0",
      "private"—true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "serve:backend": "node./src/server.js",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "axios": "^0.27.2",
        "bootstrap": "^5.1.3",
        "bootstrap-vue": "^2.22.0",
        "core-js": "^3.8.3",
        "express": "^4.18.1",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-plugin-router": "~5.0.0",
        "@vue/cli-plugin-vuex": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-vue": "^8.0.3",
        "prettier": "^2.4.1",
        "sass": "^1.32.7",
        "sass-loader": "^12.0.0",
        "vue-template-compiler": "^2.6.14"
      }
    }

import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    
    Vue.config.productionTip=false;
    
    import {BootstrapVue, IconsPlugin} from "bootstrap-vue";
    
    // Import Bootstrap and BootstrapVue CSS files (order is important)
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    
    // Make BootstrapVue available throughout your project
    Vue.use (BootstrapVue);
    // Optionally install the BootstrapVueicon components plugin
    Vue.use (IconsPlugin);
    
    new Vue({
      router,
      store,
      render —(h)=>h(App),
    }).$mount("#app";

node.js vue.js bootstrap form

2022-09-29 22:18

1 Answers

I'm sorry.Resolved.

You can edit the samples on BootstrapVue's official website, so I copied my code here and it naturally came out well (because I copied the samples in the first place).

So when I got back to Getting Started, I found that the first major version was 4.
Now, as you may have noticed, if you look at package.json, it's 5.
Therefore, if you match the version of the site, it will be displayed as a sample.I'm relieved.

Sorry for the silly question.

2022-09-29 22:18

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656