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
94
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
76
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
78
Javasrcipt_基礎一.pdf
Avatar for darrenyaoyaoyao darrenyaoyaoyao
0
100
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
54

Other Decks in Programming

See All in Programming
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
350
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
940
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
130
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
390
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
2
640
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
240
Embedded Swiftで作る自作USBデバイス によるiOSデバイスの自動テスト / iOSDC Japan 2026 glassfiber
Avatar for glassfiber glassfiber
0
310
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
260
カツオ、ご期待ください
Avatar for saku_totomi suneo3476
0
160
ジョジョの世界をXRで再現する
Avatar for mofurune mofurune
0
140
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
1.2k

Featured

See All Featured
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
570
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
529
40k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
440
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
740
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
520
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k

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