Download - Bootstrap4 與他的好搭檔
-
CSS,Angular,Gulp,Hexo,Facebookpixel
FBfb.me/chihcheng.wang.3
2
http://fb.me/chihcheng.wang.3
-
Bootstrap !?
float
RWD
...
Bootstrap
4
-
5
BUG
-
6
-
2,3,4,5
7
-
ClassName
8
-
Bootstrap
Gulp Sass
Beta
9
-
CDN:https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/
bootstrap.min.css
Bower + Gulp + Sass
11
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.csshttps://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css
-
12
Typography
Image
Table
Layout
Grid
Media
Button
Form
Card
Navbar
Modal
Clearfix
Colors
Spacing
Vertical Align
-
13
Grid
Media object
Card
Modal
Button Group
Navbar
Breadcrumb
Button
Tag
Tooltips
Pagination
Nav ( tabs)
-
14
-
(button, form-control, pagination)
(primary, danger, warning, info )
(size, theme)
(active, disabled)
15
-
{ } + { }-{ } + { }-{ } + { }
ex: class="btnbtn-primarybtn-smdisabled"
16
-
17
btn
btn-primary
btn-secondary
btn-success
btn-outline-primary
btn-outline-success
btn-sm
btn-lg
btn-block
active
disabled
-
btn
btn-primary
btn-secondary
btn-success
btn-outline-primary
btn-outline-success
btn-sm
btn-lg
btn-block
active
disabled
18
-
btn
btn-primary
btn-secondary
btn-success
btn-outline-primary
btn-outline-success
btn-sm
btn-lg
btn-block
active
disabled
19
-
20
btn
btn-primary
btn-secondary
btn-success
btn-outline-primary
btn-outline-success
btn-sm
btn-lg
btn-block
active
disabled
-
21
btn
btn-primary
btn-secondary
btn-success
btn-outline-primary
btn-outline-success
btn-sm
btn-lg
btn-block
active
disabled
-
22
btn
btn-primary
btn-secondary
btn-success
btn-outline-primary
btn-outline-success
btn-sm
btn-lg
btn-block
active
disabled
-
23
card
card-img-top
card-header
card-block
card-title
card-text
card-inverse
card-primary
card-outline-secondary
-
24
-
25
-
26
Bootstrap
-
27
( xs, sm, md, lg, xl)
float + padding ( flex) float + margin
column class="row"
class="row" class="col-xx-xx"
-
28
column class="row"
class="row" class="col-xx-xx"
.row
-
29
col
xs
sm
md
lg
1
2
12
{ }-{ }-{ }
ex: class="col-sm-6"
-
30
device width xs, sm ,md, lg, xlsm
12
col row
-
CDN:https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/
bootstrap.min.css
Bower + Gulp + Sass
32
!! https://github.com/Wcc723/gulp-web-designers
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.csshttps://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.csshttps://github.com/Wcc723/gulp-web-designers
-
33
-
https://github.com/Wcc723/gulp-web-designers
34
https://github.com/Wcc723/gulp-web-designers
-
35
1. npminstall2. bowerinstall
3. 4. gulp
-
36
1. Sassbower_componentsbootstrap
2. all.scssvariables
3. Sass
4. PostCSS(autoprefixer)
5. (webserver,ejs)
-
37
Sass
Bootstrap v4 Custom
PostCSS all.css
layout
Web Server
index.html
localhost:4000
Task Sass
Task layout
Task Webserver
autoPrefixer
-
38
1. Bootstrapv4(alpha5)
2. './bower_components/'
-
39
1. includePathsBootstrap4
2.
3.
-
40
1.
2. border-width
3. ( )
4. flex
5.
-
41
Angular js
1. Bootstrap 3
2. angular-bootstrap
3. Bootstrap v3 v4
-
43
-
44
-
45
-
46
-
47
-
48
px rem
-
49
14px 16px
-
1. Borders - new
2. Clearfix -
3. Close icon - x
4. Colors -
5. Display property - display
6. Image replacement -
7. Invisible content - ()
8. Responsive helpers - RWD * 9. Screenreaders -
()
10.Sizing and positioning - new
11. Spacing - new
12.Typography - * 13.Vertical align - new
50
-
51
-
52
Panel
Well
Thumbnails
-
53
-
001
55
-
56
-
57
-
58
-
59
-
61
-
-
-
-
http://www.hexschool.com/
http://www.hexschool.com/
-
62
VPS
- ping
- 1core/1G, 300/mo
- >O<
- (!!)
https://vps.dct-cloud.com/
https://vps.dct-cloud.com/
-
63