반응형
카드 데크 그룹에 링크를 추가하려면 어떻게 해야 하나요?
참조처: https://bootstrap-vue.js.org/docs/components/card/ #card-card-discard-groups
이 스크립트는 다음과 같습니다.
<div>
<b-card-group deck>
<b-card title="Title"
img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content. This content
is a little bit longer.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title"
img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top>
<p class="card-text">
This card has supporting text below as a natural lead-in
to additional content.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
<b-card title="Title"
img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top>
<p class="card-text">
This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer content
than the first to show that equal height action.
</p>
<div slot="footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</b-card>
</b-card-group>
</div>
제목과 이미지에 링크를 추가하고 싶다
어떻게 해야 하죠?
제목 속성을 에서 삭제해야 합니다.b-card
사용방법b-link
내부b-card-body
대신...
<b-card img-src="https://picsum.photos/300/300/?image=41"
img-alt="Img"
img-top
>
<b-card-body>
<b-link to="/">
Title
</b-link>
<p class="card-text">
This is a wider card with supporting text below as a
natural lead-in to additional content. This content
is a little bit longer.
</p>
</b-card-body>
</b-card>
언급URL : https://stackoverflow.com/questions/52568601/how-can-i-add-link-in-the-card-deck-groups
반응형
'programing' 카테고리의 다른 글
Is it bad to declare a C-style string without const? If so, why? (0) | 2022.08.18 |
---|---|
Vuex, Nuxt:알 수 없는 작업 유형 (0) | 2022.08.18 |
Observerable과 Observable은 언제 사용해야 합니까? (0) | 2022.08.18 |
Vuetify 앱에서 아웃라인 아이콘을 사용하는 방법 (0) | 2022.08.18 |
Nuxt에서 ES6 클래스를 vuex 저장소 상태로 사용 (0) | 2022.08.18 |