-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
121 lines (116 loc) · 6.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Internal CSS -->
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Vootstrap Library</title>
</head>
<body>
<div id="app" v-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">{{ logo.text }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li :class="['nav-item', {'active': currentSection === sections.main }]" v-if="sections.main.isAvailable">
<a class="nav-link" href="#" @click="currentSection = sections.main">Home</a>
</li>
<li :class="['nav-item', {'active': currentSection === sections.button }]" v-if="sections.button.isAvailable">
<a class="nav-link" href="#" @click="currentSection = sections.button">Buttons</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid slight-margin-from-top">
<div id="main-section" v-if="currentSection === sections.main">
<h1>Incredible Vootstrap</h1>
<p>
Vootstrap is a collection of <a href="https://vuejs.org">Vue.js</a> components with <a href="https://getbootstrap.com">Bootstrap</a> under the hood.
</p>
<p>
While Vootstrap is a carefully thought-out combination of Vue and Bootstrap frameworks, it gives you an incredible simplicity and makes your frontend programming experience much more enjoyable 🎉
</p>
<p>
It works well for both websites and hybrid mobile apps. You can use popular components from Bootstrap filled with the power of reactive programming given by Vue.
</p>
<p>
The main advantage of Vootstrap is the syntax. The entire library is built with keeping in mind the idea of unbelievable flexibility. It's easy enough for beginners and helpful for experienced developers.
</p>
</div>
<div id="button-section" v-else-if="currentSection === sections.button">
<h1>Amazing Buttons</h1>
<p>
<h3>Small</h3>
<vt-button-primary-small title="Primary Small"></vt-button-primary-small>
<vt-button-secondary-small title="Secondary Small"></vt-button-secondary-small>
<vt-button-success-small title="Success Small"></vt-button-success-small>
<vt-button-danger-small title="Danger Small"></vt-button-danger-small>
<vt-button-warning-small title="Warning Small"></vt-button-warning-small>
<vt-button-info-small title="Info Small"></vt-button-info-small>
<vt-button-light-small title="Light Small"></vt-button-light-small>
<vt-button-dark-small title="Dark Small"></vt-button-dark-small>
<vt-button-link-small title="Link Small"></vt-button-link-small>
</p>
<p>
<h3>Medium</h3>
<vt-button-primary title="Primary Medium"></vt-button-primary>
<vt-button-secondary title="Secondary Medium"></vt-button-secondary>
<vt-button-success title="Success Medium"></vt-button-success>
<vt-button-danger title="Danger Medium"></vt-button-danger>
<vt-button-warning title="Warning Medium"></vt-button-warning>
<vt-button-info title="Info Medium"></vt-button-info>
<vt-button-light title="Light Medium"></vt-button-light>
<vt-button-dark title="Dark Medium"></vt-button-dark>
<vt-button-link title="Link Medium"></vt-button-link>
</p>
<p>
<h3>Large</h3>
<vt-button-primary-large title="Primary Large"></vt-button-primary-large>
<vt-button-secondary-large title="Secondary Large"></vt-button-secondary-large>
<vt-button-success-large title="Success Large"></vt-button-success-large>
<vt-button-danger-large title="Danger Large"></vt-button-danger-large>
<vt-button-warning-large title="Warning Large"></vt-button-warning-large>
<vt-button-info-large title="Info Large"></vt-button-info-large>
<vt-button-light-large title="Light Large"></vt-button-light-large>
<vt-button-dark-large title="Dark Large"></vt-button-dark-large>
<vt-button-link-large title="Link Large"></vt-button-link-large>
</p>
<p>
<h3>Outline</h3>
<vt-button-primary-outline title="Primary Outline"></vt-button-primary-outline>
<vt-button-secondary-outline title="Secondary Outline"></vt-button-secondary-outline>
<vt-button-success-outline title="Success Outline"></vt-button-success-outline>
<vt-button-danger-outline title="Danger Outline"></vt-button-danger-outline>
<vt-button-warning-outline title="Warning Outline"></vt-button-warning-outline>
<vt-button-info-outline title="Info Outline"></vt-button-info-outline>
<vt-button-light-outline title="Light Outline"></vt-button-light-outline>
<vt-button-dark-outline title="Dark Outline"></vt-button-dark-outline>
<vt-button-link-outline title="Link Outline"></vt-button-link-outline>
</p>
</div>
<div id="undefined-section" v-else>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- Vootstrap -->
<script type="text/javascript" src="../vootstrap.js"></script>
<!-- Internal JS -->
<script type="text/javascript" src="js/view-model.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>