/
index.html
246 lines (214 loc) · 12.2 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!doctype html>
<html lang="zh-Hant">
<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">
<script src="https://kit.fontawesome.com/235111a63f.js"></script>
<title>夢想部落格</title>
<style>
body{
line-height: 1.9;
}
.breadcrumb{
background-color: transparent;
}
.text-hexschool{
color: #f77754;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #f77754;">
<a class="navbar-brand" href="#">
<i class="far fa-gem"></i>
夢想部落格
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<!-- 麵包屑 -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-hexschool" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-hexschool" href="#">部落格</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>
<div class="row">
<div class="col-md-8">
<h1 class="text-hexschool">Bootstrap 4 繁體中文手冊</h1>
<!-- 作者名字、日期、小標籤 -->
<div class="my-3 text-secondary">
<small>
<span class="mr-4">
<i class="far fa-user"></i>
布蘭地
</span>
<span class="mr-4">2019/08/16</span>
<span>
<a href="#" class="text-hexschool">
<i class="fas fa-tag"></i>
event
</a>
</span>
</small>
</div>
<!-- 主要文章內容 -->
<article>
<p>Bootstrap 是目前最主流的 CSS 框架，由於他包含了大量的元件以及具有良好的架構，在實際運用及擴增也都是非常容易，也越來越多開發者協同一起開發 (Github 上有超過 10 萬個
Star)。如今第四版 Beta
(Bootstrap 4 Beta) 也在 2017/8/10 釋出，我們先來看看他有什麼樣的改變吧！</p>
<h2 class="text-secondary">Bootstrap 4 的特色</h2>
<p>Bootstrap 4 Beta 經過了 Alpha 六個版本的歷練，重新翻修了大量元件以及加入許多新的元素，如果你沒有用過 Alpha 的任何版本，提供了以下摘要讓您快速了解第四版有什麼新新聞：
</p>
<ul>
<li>從 Less 到 Sass: 自從 Sass 不在只能使用 Ruby 編譯後，Libsass 有更快的編譯效率，加上 Sass 本身具有龐大的開發社群，所以 Bootstrap 從 Less
改用 Sass 囉！</li>
<li>Flexbox 以及強化的網格系統: 網格系統不在使用 <code>float</code>，進而改用 <code>flexbox</code>，讓行動裝置及桌面裝置有更彈性的排版方法。
</li>
<li>卡片元件: 許多元件本質相似度較高，如 <code>wells</code>、<code>thumbnails</code>、<code>panels</code>
等等，這些元件被捨棄掉，取而代之的則是卡片元件，不僅可以完成上述元件的功能，且運作的更為美好。</li>
<li>彈性更高的變數: 以往的樣式都是固定的名稱、色彩，透過 Sass <code>$map</code> 變數可以更有彈性的調整、新增、減少不同的品牌色彩、陰影等視覺效果。</li>
<li>IE8、IE9 掰掰: 放棄舊有的瀏覽器支持，讓元件的使用及開發上更為容易，如果還是考慮支援 IE8/IE9、 Safari 8-、 iOS 8- 可以繼續使用 Bootstrap 3。
</li>
<li>重新設計說明文件: 新的文件重新設計了，並且加入一些插件讓搜尋上更為容易！</li>
<li>更多的改變: 重新設計更多更多的樣式，像是自由套色的導覽列、HTML5 的驗證樣式、嶄新的輪播以及許多的元件</li>
</ul>
<h2 class="text-secondary">繁體中文手冊</h2>
<p>加入了這麼多新功能，如果從頭開始了解原文版本也需要花上不少時間，於是夢想學院從兩個月前開始著手翻譯，在正式釋出 Beta 版後的兩個工作日釋出繁體中文手冊，讓對於 Bootstrap
有需求的同學可以加速上手～</p>
<img class="img-fluid"
src="https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/blog%2F2017%2F08%2Fbootstrap4.png?alt=media&token=0b014ac6-b99b-46e7-8336-3fbfda1da3c2"
alt="">
<p>如果你期待夢想學院的 Bootstrap 相關課程，也可以透過以下連結或加入我們的 <a class="text-hexschool" href="#">LINE</a>，等待課程釋出的同時也會通知您喔！
</p>
</article>
<!-- 留言區塊 -->
<div class="card">
<div class="card-header">
留言回覆
</div>
<div class="card-body">
<div class="media">
<img src="https://randomuser.me/api/portraits/lego/6.jpg" width="64px" height="64px" class="mr-3"
alt="...">
<div class="media-body">
<h5 class="mt-0">Mario Carr</h5>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="寫下寶貴的意見"></textarea>
<button type="button" class="btn btn-light mt-2 btn-block">Submit Form</button>
</div>
</div>
</div>
<div class="media mb-5">
<img src="https://randomuser.me/api/portraits/men/89.jpg" width="64px" height="64px" class="mr-3"
alt="...">
<div class="media-body">
<h5 class="mt-0">Herbert Medina</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec
lacinia congue felis in faucibus.
<small class="text-muted">about 6 hours ago</small>
</div>
</div>
<div class="media mb-5">
<img src="https://randomuser.me/api/portraits/women/85.jpg" width="64px" height="64px" class="mr-3"
alt="...">
<div class="media-body">
<h5 class="mt-0">Rebecca Fleming</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec
lacinia congue felis in faucibus.
<small class="text-muted">about 22 hours ago</small>
</div>
</div>
<div class="media mb-3">
<img src="https://randomuser.me/api/portraits/men/78.jpg" width="64px" height="64px" class="mr-3"
alt="...">
<div class="media-body">
<h5 class="mt-0">Nathan Green</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras
purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec
lacinia congue felis in faucibus.
<small class="text-muted">about 2 days ago</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<h2>Tags</h2>
<!-- Badges -->
<a href="#" class="badge badge-info">
<i class="fas fa-tag"></i>
scss
</a>
<a href="#" class="badge badge-info">
<i class="fas fa-tag"></i>
css
</a>
<a href="#" class="badge badge-info">
<i class="fas fa-tag"></i>
html
</a>
<a href="#" class="badge badge-info">
<i class="fas fa-tag"></i>
bootstrap4
</a>
<a href="#" class="badge badge-info">
<i class="fas fa-tag"></i>
design
</a>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-light py-4 mt-3">
<div class="container d-flex justify-content-between">
<div class="text-secondary">
© Copyright 2019 夢想學院
</div>
<div>
<a href="#" class="text-hexschool"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-hexschool"><i class="fab fa-facebook-square"></i></a>
<a href="#" class="text-hexschool"><i class="fab fa-twitter"></i></a>
</div>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>