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
조합이폭발하는디자인시스템이걸눈으로도테스트하라고요
Avatar for giljongyu giljongyu
0
650
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
1
270
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
340
Inertia Rails: The One-Person Framework with React & Friends
Avatar for Svyatoslav Kryukov skryukov
0
190
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
170
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～
Avatar for tosite tosite
0
120
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
1.1k
AI時代のFlutter品質設計 — アプリ品質を守るQuality Layers
Avatar for omatty198 omatty198
0
320
Vapor Mode でアクセシビリティは 壊れないか検証した話
Avatar for fuqda fuqda
1
280
Web Framework Benchmark Battle 2026, Any%
Avatar for Akira Matsuda a_matsuda
3
3.1k
Lambda durable functionsでHuman in the Loopを楽に…楽に……
Avatar for Har1101 har1101
2
230
GraphQL の onError と Nullability のこれから
Avatar for Yosuke Kurami quramy
0
200

Featured

See All Featured
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
6.2k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
940
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
530
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
960
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
430
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k

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