[Vue3] Stand Alone #5. bootstrap CDN 으로 사용하기

<head></head> 안에 bootstrap js, css 를 포함시키면 됩니다.

cdn 주소는 여기 또는 여기 를 참고하셔서 버전을 고르시면 됩니다

bootstrap5 의 starter template 으로는

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>Hello Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">

    <!--  Fonts and icons     -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    
    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>

</head>
<body>

<div id="app">
    <button type="button" class="btn btn-success btn-sm" @click="hello">click me</button>
</div>

<script>
    var app = Vue.createApp({
        methods: {
            hello(){
                alert('hello~');
            }
        },
    }).mount('#app')
</script>

이제 button 에 bootstrap css class 를 사용할 수 있습니다.

더 많은 style 은 아래 사이트에서 확인하 실 수 있습니다.

https://getbootstrap.kr/docs/5.0/components/buttons/

버튼

다양한 크기, 상태 등을 지원하는 폼, 대화상자 등의 작업에 Bootstrap의 사용자 지정 버튼 스타일을 사용하세요.

getbootstrap.kr

728x90

저작자표시

'Vue.js' 카테고리의 다른 글

[Vue] vuex 설치 (0)	2023.08.20
[Vue3] Stand Alone #6. Component 만들기 (4)	2022.03.21
[Vue3] Stand Alone #4. fetch post (php json 호출하기) (0)	2022.03.21
[Vue3] Stand Alone #3. v-for, :key (0)	2022.03.20
[Vue3] Stand Alone #2. v-if, v-else-if, v-else, v-show (0)	2022.03.20