vue-django 前端bootstrap配置

2、前端引入bootstrap

下载bootstrap源码，放在vue中的src目录中

https://v5.bootcss.com/docs/getting-started/download/


https://getbootstrap.net/docs/getting-started/introduction/

在vue根目录修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import bootstrapcss from './bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css'
import bootstrapjs from './bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js'

createApp(App).use(store, bootstrapcss, bootstrapjs).use(router).mount('#app')

导入可能会出现may use special comments to disable some warnings. Use // eslint-disable-next-line to ignorede报错

https://blog.csdn.net/Maxueyingying/article/details/134201296

3、初始化配置

后面补充

package.json种加入以下代码

"rules": {
      "generator-star-spacing": "off",
      "no-tabs":"off",
      "no-unused-vars":"off",
      "no-console":"off",
      "no-irregular-whitespace":"off",
      "no-debugger": "off"
    }

4、导航栏嵌入

[Navbar · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)](https://v5.bootcss.com/docs/components/navbar/)中navbar中挑选导航栏

后面补充

导航栏美化

Navsbar中选择样式

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">

导航栏固定在top顶部

<div class="fixed-top">...</div>

导航栏固定在bottom底部

<div class="fixed-bottom">...</div>

5、幻灯片

找到carousel模块

自己修改home页面

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <h1>this is a home page</h1> -->
    <!-- 幻灯片start -->
    <div class="carousel" >
      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="3000">
      <img src="../assets/new/1.jpg" class="d-block w-100" alt="..." style="width: 100%; height: 450px;">
      <div class="carousel-caption d-none d-md-block">
        <h5>警世通言 冯梦龙</h5>
        <p>人道洛阳花似锦，偏我来时不遇春</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="../assets/new/2.jpg" class="d-block w-100" alt="..." style="width: 100%; height: 450px;">
      <div class="carousel-caption d-none d-md-block">
        <h5>警世通言 冯梦龙</h5>
        <p>人道洛阳花似锦，偏我来时不遇春</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="../assets/new/3.jpg" class="d-block w-100" alt="..." style="width: 100%; height: 450px;">
      <div class="carousel-caption d-none d-md-block">
        <h5>警世通言 冯梦龙</h5>
        <p>人道洛阳花似锦，偏我来时不遇春</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
    </div>
<!-- 幻灯片end -->
  </div>
</template>

<script>

</script>

6、布局样式

Layout布局——>grid

自适应

<div class="col-sm"></div>
<div class="col-md"></div>

7、组件封装

在compoents中新建FooterView.vue

<!--自己完善-->
<template>
  <div class="footer-bar">
    我是底部页面
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.footer-bar{
    width: 100%;
    height: 300px;
    background-color:rgb(44,42,42);
}
</style>

将底部引入到其他页面

在</template>下输入以下代码

<script>
import FooterBar from '@/components/FooterBar.vue';
// 调用语句
export default{
  components:{
    FooterBar
  }
}
</script>

在<template></template>中引入视图<FooterBar></FooterBar>