Tweet
Tweet

Slide 1

Slide 1 text

Bootstrap 網站排版神器 — 逃離密密⿇⿇的 CSS

Slide 2

Slide 2 text

由 HTML, CSS, JS
 組成的前端框架 RWD響應式排版
 ⾏動優先

Slide 3

Slide 3 text

讓你不需要寫 CSS
 適當的 HTML 加上 Bootstrap Class
 就能漂亮排版

Slide 4

Slide 4 text

使⽤
 BootstrapCDN 從 Bootstrap 官網獲得

Slide 5

Slide 5 text

.container .container-fliud Bootstrap 排版 .container .container-fliud

Slide 6

Slide 6 text

Container 長度

Slide 7

Slide 7 text

Padding class=“p-3” class=“pt-3” class=“pb-3” class=“pr-3” class=“pl-3”

Slide 8

Slide 8 text

Margin class=“m-3” class=“mt-3” class=“mb-3” class=“mr-3” class=“ml-3”

Slide 9

Slide 9 text

Buttons class=“btn btn-primary”

Slide 10

Slide 10 text

Modal

Slide 11

Slide 11 text

Dropdown

Slide 12

Slide 12 text

Carousel Example

Slide 13

Slide 13 text

NavBar

Slide 14

Slide 14 text

Carousel