Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

bootstrap.pdf

Avatar for darrenyaoyaoyao darrenyaoyaoyao
November 06, 2020
Programming
92
1

 bootstrap.pdf

Avatar for darrenyaoyaoyao

darrenyaoyaoyao

November 06, 2020

More Decks by darrenyaoyaoyao

See All by darrenyaoyaoyao
HTML__CSS_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
73
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
89
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
73
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
100
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
75
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
77
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
53

Other Decks in Programming

See All in Programming
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
240
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
120
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
150
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
5
2.6k
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
150
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
970
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
310
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
450
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
10k
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.7k
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
4
1.1k
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
110

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
930
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.9k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
520
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.2k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.2k
Fireside Chat
Avatar for paigeccino paigeccino
43
4k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
900
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
330

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/[email protected] 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