Submit Search
Upload
網頁設計 - Bootstrap前端框架
•
13 likes
•
1,755 views
Vincent Chi
Follow
大同大學資研社網頁設計初級班第二周投影片 前端框架Bootstrap
Read less
Read more
Education
Report
Share
Report
Share
1 of 21
Download now
Download to read offline
Recommended
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
shiang huang
網頁設計 - 概述
網頁設計 - 概述
Vincent Chi
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Recommended
Bootstrap 4 超詳盡解析
Bootstrap 4 超詳盡解析
Chih-cheng Wang
如何運用Bootstrap 切版?
如何運用Bootstrap 切版?
shiang huang
網頁設計 - 概述
網頁設計 - 概述
Vincent Chi
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
Bootstrap4 與他的好搭檔
Bootstrap4 與他的好搭檔
Chih-cheng Wang
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Vertical rhythm
Vertical rhythm
洧杰 廖
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
網頁設計 - PHP技巧與應用
網頁設計 - PHP技巧與應用
Vincent Chi
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
编辑器设计2
编辑器设计2
yiming he
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Koubei banquet 34
Koubei banquet 34
Koubei UED
KISSY Mechanism
KISSY Mechanism
lifesinger
支付宝CSS构架
支付宝CSS构架
Sofish Lin
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
Intro-to-SeaJS
Intro-to-SeaJS
lifesinger
Banquet 39
Banquet 39
Koubei UED
[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇
[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇
Drupal Taiwan
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
Alice库构建
Alice库构建
Sofish Lin
2015年4月TDOH幹部訓
2015年4月TDOH幹部訓
Vincent Chi
網路攻防:第一堂法律課
網路攻防:第一堂法律課
Vincent Chi
More Related Content
What's hot
Vertical rhythm
Vertical rhythm
洧杰 廖
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
網頁設計 - PHP技巧與應用
網頁設計 - PHP技巧與應用
Vincent Chi
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
编辑器设计2
编辑器设计2
yiming he
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
洧杰 廖
Koubei banquet 34
Koubei banquet 34
Koubei UED
KISSY Mechanism
KISSY Mechanism
lifesinger
支付宝CSS构架
支付宝CSS构架
Sofish Lin
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
Intro-to-SeaJS
Intro-to-SeaJS
lifesinger
Banquet 39
Banquet 39
Koubei UED
[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇
[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇
Drupal Taiwan
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
Alice库构建
Alice库构建
Sofish Lin
What's hot
(20)
Vertical rhythm
Vertical rhythm
現代化網頁基礎排版技術
現代化網頁基礎排版技術
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
網頁設計 - PHP技巧與應用
網頁設計 - PHP技巧與應用
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
網頁開發工具 20140630
網頁開發工具 20140630
编辑器设计2
编辑器设计2
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
Koubei banquet 34
Koubei banquet 34
KISSY Mechanism
KISSY Mechanism
支付宝CSS构架
支付宝CSS构架
SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Intro-to-SeaJS
Intro-to-SeaJS
Banquet 39
Banquet 39
[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇
[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇
Style基础优化之独角兽篇
Style基础优化之独角兽篇
Alice库构建
Alice库构建
Viewers also liked
2015年4月TDOH幹部訓
2015年4月TDOH幹部訓
Vincent Chi
網路攻防:第一堂法律課
網路攻防:第一堂法律課
Vincent Chi
網頁設計 - 資料庫存取
網頁設計 - 資料庫存取
Vincent Chi
SQL Injection
SQL Injection
Vincent Chi
網頁設計 - 基礎PHP
網頁設計 - 基礎PHP
Vincent Chi
Laravel - 簡介與環境設定
Laravel - 簡介與環境設定
Vincent Chi
Laravel - 系統全攻略(續)
Laravel - 系統全攻略(續)
Vincent Chi
xss實戰
xss實戰
Vincent Chi
Laravel - 系統全攻略
Laravel - 系統全攻略
Vincent Chi
資安入門
資安入門
Jyny Chen
台科逆向簡報
台科逆向簡報
耀德 蔡
智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技
Amos Lee
Sublime text 極速應用教學
Sublime text 極速應用教學
Amos Lee
Viewers also liked
(13)
2015年4月TDOH幹部訓
2015年4月TDOH幹部訓
網路攻防:第一堂法律課
網路攻防:第一堂法律課
網頁設計 - 資料庫存取
網頁設計 - 資料庫存取
SQL Injection
SQL Injection
網頁設計 - 基礎PHP
網頁設計 - 基礎PHP
Laravel - 簡介與環境設定
Laravel - 簡介與環境設定
Laravel - 系統全攻略(續)
Laravel - 系統全攻略(續)
xss實戰
xss實戰
Laravel - 系統全攻略
Laravel - 系統全攻略
資安入門
資安入門
台科逆向簡報
台科逆向簡報
智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技
Sublime text 極速應用教學
Sublime text 極速應用教學
Recently uploaded
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
mekosin001123
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
jakepaige317
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
jakepaige317
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
mekosin001123
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
mekosin001123
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
黑客 接单【TG/微信qoqoqdqd】
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
Xin Yun Teo
Recently uploaded
(7)
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
網頁設計 - Bootstrap前端框架
1.
⼤大同⼤大學資研社 半學期學會PHP
2.
第⼆二周 前端框架 -
Bootstrap的魅⼒力
3.
Bootstrap組成 • CSS
• Javascript • Icons
4.
Bootstrap 使⽤用⽅方法
5.
其實,可以更簡單
6.
Bootstrap CDN ⾃自動從網路下載Bootstrap
7.
在開始Bootstrap之前…
8.
先來點傳統 傳統網⾴頁前端設計
9.
三欄式設計 header body
footer
10.
Header LOGO Menu
11.
Body 頂欄 左側欄
中 右側欄
12.
⺫⽬目前以三欄式排版為⼤大宗 不過也有例外
13.
接著,讓我們進⼊入正題
14.
Grid System 網格排版系統
Grid System:Bootstrap的排版依據 ⼀一⾏行(1 row)有12個位置 可設定四種不同的解析度 .xs、sm、md、lg
15.
Grid System 網格排版系統
16.
Grid System 網格排版系統
程式碼:http://goo.gl/tdir0w
17.
Grid System 網格排版系統
.混⽤用型 .offset .程式碼:http://goo.gl/eZ7Cdl
18.
歡樂的看⽂文件時間(?)
19.
增加Bootstrap效率的⽅方式
20.
增加Bootstrap效率的⽅方式
21.
增加Bootstrap相容性的⽅方式
Download now