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