Upgrade to Pro — share decks privately, control downloads, hide ads and more …

bootstrap.pdf

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for darrenyaoyaoyao darrenyaoyaoyao
November 06, 2020
Programming
89
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
68
Pug.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
88
Sass.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
72
jquery.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
1
99
0c8adb02-ade8-47bb-9939-4d45110ffefd.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
70
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
99
Javascript_基礎二.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
140
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
72
HTML__CSS_基礎_.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
46

Other Decks in Programming

See All in Programming
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
130
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
Avatar for Kurumi Watabe krm963
0
250
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
550
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
1
270
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
140
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
650
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
170
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
400
【やさしく解説 設計編・中級 #6】良いアーキテクチャとは ～ 一本の登り道の、行き先 ～
Avatar for HideyukiKitao panda728
PRO
0
210
仕様駆動開発の消費期限
Avatar for watany watany
7
3.1k
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
Avatar for maroon1st maroon1st
0
310
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
9
4.9k

Featured

See All Featured
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.8k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
10k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
250
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
119
120k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1k
Design in an AI World
Avatar for tapps tapps
1
270
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
330
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
920
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
370

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