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
95
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
78
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
96
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
110
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
80
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
150
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
79
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
56

Other Decks in Programming

See All in Programming
Event is what happens
Avatar for MOROHASHI Kyosuke moro
2
2.1k
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
Avatar for bara yutobara
8
7.1k
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
Avatar for Takuya Akiba iwiwi
4
1.4k
baseline으로 마이그레이션, 리팩토링 안전하게 맡기기
Avatar for Sungyong An fornewid
1
530
SODA - FACT BOOK（EN）
Avatar for SODA inc. sodainc
1
190
Railsバージョンを4倍にした話
Avatar for OPTiM optim
0
840
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
340
AIが生成したコードは読むべきか？抽象化設計とコードの品質保証 / abstraction-design-and-quality
Avatar for MinoDriven minodriven
12
7.7k
AIで開発が速くなった先で、開発チームは何を目指すか
Avatar for Yuki Shiho shihochan
1
1.9k
あなたの await、OS まで届いてる？ strace で覗く JavaScript の非同期
Avatar for hasuto sasaki hasutosasaki
1
1.7k
graphql-ruby を Spinel で速くしようとした話
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
130
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
Avatar for Ochtum ochtum
0
170

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
510
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
360
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
560
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.2k
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
2
2.9k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
590
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
470
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
560
Side Projects
Avatar for Sacha Greif sachag
456
43k

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