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
Top Related