Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[數位教學] 用Bootstrap製作網頁
Search
HeChien Hsu
December 30, 2012
Education
0
1.3k
[數位教學] 用Bootstrap製作網頁
這是學校作業,用Bootstrap製作一個網頁。
可搭配影片服用,但影片尚未處理 ....
HeChien Hsu
December 30, 2012
Tweet
Share
More Decks by HeChien Hsu
See All by HeChien Hsu
Using Git hosting
hechien
0
44
[Kaohsiung Rails meetup] 國際化影片分享網站
hechien
0
160
[Wheel Lab #2] Apple Service with Rails.
hechien
0
74
[Sokoos][教育訓練] Git - 1
hechien
0
150
DesignYou - 專題報告投影片
hechien
0
110
[作業] 創意美學
hechien
0
55
[教育訓練] Rails Form Basic
hechien
1
70
[教育訓練] Rails Validation Basic
hechien
1
79
Rails Layout Basic
hechien
2
120
Other Decks in Education
See All in Education
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2k
ARアプリを活用した防災まち歩きデータ作成ハンズオン
nro2daisuke
0
130
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
600
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
20
17k
2025年度春学期 統計学 第6回 データの関係を知る(1)ー相関関係 (2025. 5. 15)
akiraasano
PRO
0
160
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
600
GitHubとAzureを使って開発者になろう
ymd65536
1
140
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
190
社外コミュニティと「学び」を考える
alchemy1115
2
170
ThingLink
matleenalaakso
28
4.1k
2025年度春学期 統計学 第9回 確からしさを記述する ー 確率 (2025. 6. 5)
akiraasano
PRO
0
130
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
Speed Design
sergeychernyshev
32
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Thoughts on Productivity
jonyablonski
69
4.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to train your dragon (web standard)
notwaldorf
96
6.1k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
用Bootstrap製作網頁 徐赫謙
目錄 單元大綱 引起動機 學習目標 課程主題 測驗一下 重點回顧 課外補充 講義下載
單元大綱 適用對象:大學部四年級生 基本技能:電腦基礎操作 先備知識:網頁設計基礎、HTML基礎
引起動機 透過bootstrap降低製作網頁的難度
學習目標 複習基礎的HTML 認識基礎的CSS 認識Sublime Text 2純文字編輯器 製作一個範例網頁
課程主題教材 HTML複習 CSS基礎認識 軟體下載與安裝 檔案下載與套用 網頁製作
課程主題教材 HTML 複習
課程主題教材 HTML 複習 HTML 基本架構 HTML 常用標籤 HTML 學習資源
課程主題教材 HTML 學習資源 https:/ /gist.github.com/3469449 Google: HTML Tutorial
課程主題教材 CSS基礎認識
課程主題教材 CSS基礎認識 CSS 使用方法 CSS 基礎格式 CSS 學習資源
課程主題教材 CSS 學習資源 Google: CSS tutorial
課程主題教材 軟體下載與安裝
課程主題教材 檔案下載與套用
課程主題教材 製作網頁
容器 <div class=”container”></div> 在這個容器中央塞入網頁內容
列 <div class=”row”></div> 在這個列中可以塞入很多元素,但是這只是一 列。
欄 <div class=”span*”></div> 星號代表數字,例如 span1, span2 數字最小為1最大為12,因為Bootstrap是12欄格 線系統 欄裡面放置的就是顯示的內容
位移 (offset) <div class=”offset*”></div> 星號代表數字,例如 offset1, offset2 數字最小為1最大為12,因為Bootstrap是12欄格 線系統 位移用來留白,可以讓span左邊出現空白
可用於置中,只要算對元素寬度即可
Container row row span span span offset
標籤介紹 ul (unordered list) - 無序清單,用於不必排序 的內容。 ol (ordered list)
- 有序清單,用於需要排序的 內容,會有數字 li (list item) - 清單的物件
測驗一下 想要設計左寬4單位,右寬6單位,中間空2單位 的二欄式網頁的話,該怎樣寫? 一欄4單位,但想要置中的話可以怎樣寫? (不要用margin: auto auto,想想要用offset多 少) bootstrap一列中最多幾欄呢?
重點回顧 html structure container class row class span* class offset*
class
課外補充 http:/ /twitter.github.com/bootstrap http:/ /www.webconf.tw http:/ /www.htmldog.com http:/ /www.codecademy.com/zh/tracks/ htmlcss
https:/ /www.facebook.com/groups/ web.design.tw/
資源下載 範例網頁:http:/ /tinyurl.com/bxmnpms 範例原始碼:https:/ /gist.github.com/4411771