Soumettre la recherche
Mettre en ligne
網頁設計 - Bootstrap前端框架
•
13 j'aime
•
1,755 vues
Vincent Chi
Suivre
大同大學資研社網頁設計初級班第二周投影片 前端框架Bootstrap
Lire moins
Lire la suite
Formation
Signaler
Partager
Signaler
Partager
1 sur 21
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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的可利用性、模組化
洧杰 廖
Recommandé
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
Contenu connexe
Tendances
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
Tendances
(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库构建
En vedette
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
En vedette
(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 極速應用教學
Dernier
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
gravestomas0
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
ggbob1
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
bairnshajjes
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
testhelper Sobrenome
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
黑客 接单【TG/微信qoqoqdqd】
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
ggbob1
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
黑客 接单【TG/微信qoqoqdqd】
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
CHANSUITNEEMoe
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
sardinesaying
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
黑客 接单【TG/微信qoqoqdqd】
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
PriscilleXu
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
shanshanhui1
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
黑客 接单【TG/微信qoqoqdqd】
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
黑客 接单【TG/微信qoqoqdqd】
Dernier
(14)
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
JAWAPAN BUKU AKTIVITI BAHASA CINA TAHUN 3.pptx
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
GPA低怎么办? | 身份黑后回复方案 | 出入境激活 身份恢复美本GPA太低了怎么办黑客服务,黑客修改大学成绩,黑客改成绩单,黑客入侵教务系统,找黑客修...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
網頁設計 - 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相容性的⽅方式
Télécharger maintenant