Hello, BootStrap!
Bootstrap CDN 가져오기
Google에 "bootstrap cdn" 검색 [시작하기 · 부트스트랩]클릭
CDN을 복사
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Hello, BootStrap!
기존 Hello, Vue!에 BootStrap CDN 추가 * [ https://sambalim.tistory.com/22 ] 참고
(앞으로의 예제에서는 BootStrap의 CSS만 사용예정)
body 태그 내 전체에 해당하는 div 영역에 반응형 고정너비 class="container"를 적어줍니다.
(전체 너비를 사용하는 경우, ".container-fluid"를 사용합니다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, Vue.js!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"></script>
</head>
<body>
<div id="app" class="container">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
});
</script>
</body>
</html>
실행결과
'FrontEnd > Vue.js' 카테고리의 다른 글
| [Vue.js] Vue 시작하기 (0) | 2019.01.13 |
|---|---|
| [Vue.js] Vue 추천이유 (0) | 2019.01.13 |
| [Vue.js] MVVM (0) | 2019.01.13 |