Bootstrap自动轮播图

最新推荐文章于 2024-01-15 19:39:34 发布

Lingoic

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量554

点赞数 7

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/weixin_54247645/article/details/135151763

版权

文章介绍了如何在Vue.js中使用Bootstrap构建一个带有淡入淡出效果的自动轮播组件，并展示了如何集成表单验证功能。代码展示了`carousel`组件的用法和`@submit.prevent`指令的使用。

摘要由CSDN通过智能技术生成

1.效果如下

在这里插入图片描述

2.代码

<template>
    <div id="carouselExampleIndicators" class="carousel slide" style=" position: absolute; left: 250px;top:200px">
        <div class="carousel-inner carousel-fade" data-bs-ride="carousel">
            <div class="carousel-item active" data-bs-interval="2000">
                <img src="../../../assets/mjuBeautifulScenery.jpg" class="d-block w-20" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="2000">
                <img src="../../../assets/mjuBeautifulScenery1.jpg" class="d-block w-20" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="2000">
                <img src="../../../assets/mjuBeautifulScenery2.jpg" class="d-block w-20" alt="...">
            </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 class="row justify-content-end" style="position: absolute;top:300px;left:0;right:300px;bottom:0;">
        <div class="col-2">
            <!-- prevent 阻止组件之间的向上或向下传递 -->
            <div class="card">
                <div class="card-body">
                    <form @submit.prevent="login">
                        <p class="fs-2 ustify-content-center">登录</p>
                        <div class="mb-3">
                            <label for="username" class="form-label fs-6">学号或教职工工号</label>
                            <input v-model="username" type="text" class="form-control" id="username"
                                placeholder="请输入学号或教职工工号">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label fs-6">密码</label>
                            <input v-model="password" type="password" class="form-control" id="password"
                                placeholder="请输入密码">
                        </div>
                        <div class="error_message">{{ error_message }}</div>
                        <button class="btn btn-primary btn-lg login_button" type="submit">登录</button>
                        <button class="btn btn-info btn-lg login_button" @click="to_register()" type="button">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>