Bootstrap.pdf

Transcript

1. Bootstrap 網站排版神器 — 逃離密密⿇⿇的 CSS
2. 由 HTML, CSS, JS
 組成的前端框架 RWD響應式排版
 ⾏動優先
3. 讓你不需要寫 CSS
 適當的 HTML 加上 Bootstrap Class
 就能漂亮排版
4. <!-- CSS only --> <link rel="stylesheet" href="https://stackpath.bootstra bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAO crossorigin="anonymous"> <!-- JS, Popper.js, and jQuery --> <script src="https://code.jquery.com/jquery-3.5.1.slim. DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+ script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.1 integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstr integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL crossorigin="anonymous"></script> 使⽤
 BootstrapCDN 從 Bootstrap 官網獲得
5. .container .container-fliud Bootstrap 排版 .container .container-fliud
6. Container 長度
7. Padding class=“p-3” class=“pt-3” class=“pb-3” class=“pr-3” class=“pl-3”
8. Margin class=“m-3” class=“mt-3” class=“mb-3” class=“mr-3” class=“ml-3”
9. Buttons class=“btn btn-primary”
10. Modal
11. Dropdown
12. Carousel Example
13. NavBar
14. Carousel