再写漂亮一点要有响应式
时间: 2024-02-10 22:10:32 浏览: 25
好的,以下是一个使用Vue和Bootstrap写的响应式登录页面的示例代码:
```html
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">{{title}}</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" v-model="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" v-model="password" placeholder="请输入密码">
</div>
<button type="button" class="btn btn-primary" @click="login">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: '登录',
username: '',
password: ''
}
},
methods: {
login() {
// 处理登录逻辑,可以向后端发送请求进行验证
console.log('用户名:', this.username)
console.log('密码:', this.password)
}
}
}
</script>
<style>
@media (min-width: 576px) {
.card {
margin-top: 5rem;
}
}
</style>
```
在这个示例中,我们使用了Bootstrap提供的响应式设计规则,通过媒体查询设置了在窗口宽度大于等于576px时,登录框的上边距为5rem。这样可以使得登录框在不同屏幕尺寸下都能够居中显示,同时保持美观。