<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>תצוגה</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<!-- Required scripts -->
<script src="//unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<style>
</style>
</head>
<body dir="rtl">
<div id="app">
<b-row no-gutters>
<b-col v-for="(val, key) in slotsA" cols="3" class="slot">
<b-card v-bind:header="key" class="text-center mb-4">
<b-card-text>{{ val }}</b-card-text>
</b-card>
</b-col>
</b-row>
</div>
<script>
window.app = new Vue({
el: '#app',
data: {
slotsA: {
1: 'ראובן',
2: 'שמעון',
3: 'לוי',
4: 'יהודה',
5: 'יששכר',
6: 'זבולון',
7: 'דן',
8: 'נפתלי',
9: 'גד',
10: 'אשר',
11: 'יוסף',
12: 'בנימין',
},
},
created() {},
beforeDestroy() {},
computed: {},
mounted() {},
methods: {}
});
</script>
</body>
</html>body {
background-image: url(image/background.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.card-header {
}
.card-body {
background-color:#73496d;
border-radius: 0 0 0.25rem 0.25rem;
color: white;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.