Enviar búsqueda
Cargar
Bootstrap個人網站 20141027
•
4 recomendaciones
•
1,626 vistas
均民 戴
Seguir
Create A Personal Website with Bootstrap Class 2
Leer menos
Leer más
Educación
Denunciar
Compartir
Denunciar
Compartir
1 de 44
Descargar ahora
Descargar para leer sin conexión
Recomendados
Php study.20130110
Php study.20130110
bngoogle
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Banquet 39
Banquet 39
Koubei UED
Data Breach and Hacking
Data Breach and Hacking
Advent IM Ltd
HTML5概览
HTML5概览
Adam Lu
如何使用 Xhprof 分析網站效能 (真實案例2)
如何使用 Xhprof 分析網站效能 (真實案例2)
Cyril Wang
Responsive Web UI Design
Responsive Web UI Design
jay li
應用Ceph技術打造軟體定義儲存新局
應用Ceph技術打造軟體定義儲存新局
Alex Lau
Recomendados
Php study.20130110
Php study.20130110
bngoogle
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Banquet 39
Banquet 39
Koubei UED
Data Breach and Hacking
Data Breach and Hacking
Advent IM Ltd
HTML5概览
HTML5概览
Adam Lu
如何使用 Xhprof 分析網站效能 (真實案例2)
如何使用 Xhprof 分析網站效能 (真實案例2)
Cyril Wang
Responsive Web UI Design
Responsive Web UI Design
jay li
應用Ceph技術打造軟體定義儲存新局
應用Ceph技術打造軟體定義儲存新局
Alex Lau
高性能网站最佳实践
高性能网站最佳实践
longhao
Using google appengine_1027
Using google appengine_1027
Wei Sun
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
大型互联网应用架构设计
大型互联网应用架构设计
thinkinlamp
Hadoop 介紹 20141024
Hadoop 介紹 20141024
Jay Chu, PMP/OCM
Java@taobao
Java@taobao
vanadies10
Using google appengine (2)
Using google appengine (2)
Wei Sun
Html5和css3入门
Html5和css3入门
Xiujun Ma
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Wap2.0
Wap2.0
style80
Wap2.0
Wap2.0
guest902b532
Using google appengine_final
Using google appengine_final
Wei Sun
輕鬆學會網頁前端
輕鬆學會網頁前端
Xi-Zhe Lin
重构之道 触屏篇
重构之道 触屏篇
麦哥UE
重构之道 触屏篇
重构之道 触屏篇
麦哥UE
Big Data Projet Management the Body of Knowledge (BDPMBOK)
Big Data Projet Management the Body of Knowledge (BDPMBOK)
Jazz Yao-Tsung Wang
如何使用 Xhprof 分析網站效能 (真實案例)
如何使用 Xhprof 分析網站效能 (真實案例)
Cyril Wang
Class 20170126
Class 20170126
Ivan Wei
Html5
Html5
cazhfe
CKmates - AWS 三大 AI 解決方案:應用影像辨識、聊天機器人與語音轉換以及 Serverless 應用
CKmates - AWS 三大 AI 解決方案:應用影像辨識、聊天機器人與語音轉換以及 Serverless 應用
均民 戴
CKmates - AWS 雲端運算 基礎服務介紹
CKmates - AWS 雲端運算 基礎服務介紹
均民 戴
Más contenido relacionado
Similar a Bootstrap個人網站 20141027
高性能网站最佳实践
高性能网站最佳实践
longhao
Using google appengine_1027
Using google appengine_1027
Wei Sun
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
大型互联网应用架构设计
大型互联网应用架构设计
thinkinlamp
Hadoop 介紹 20141024
Hadoop 介紹 20141024
Jay Chu, PMP/OCM
Java@taobao
Java@taobao
vanadies10
Using google appengine (2)
Using google appengine (2)
Wei Sun
Html5和css3入门
Html5和css3入门
Xiujun Ma
非常靠谱 Html 5
非常靠谱 Html 5
Tony Deng
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Wap2.0
Wap2.0
style80
Wap2.0
Wap2.0
guest902b532
Using google appengine_final
Using google appengine_final
Wei Sun
輕鬆學會網頁前端
輕鬆學會網頁前端
Xi-Zhe Lin
重构之道 触屏篇
重构之道 触屏篇
麦哥UE
重构之道 触屏篇
重构之道 触屏篇
麦哥UE
Big Data Projet Management the Body of Knowledge (BDPMBOK)
Big Data Projet Management the Body of Knowledge (BDPMBOK)
Jazz Yao-Tsung Wang
如何使用 Xhprof 分析網站效能 (真實案例)
如何使用 Xhprof 分析網站效能 (真實案例)
Cyril Wang
Class 20170126
Class 20170126
Ivan Wei
Html5
Html5
cazhfe
Similar a Bootstrap個人網站 20141027
(20)
高性能网站最佳实践
高性能网站最佳实践
Using google appengine_1027
Using google appengine_1027
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
大型互联网应用架构设计
大型互联网应用架构设计
Hadoop 介紹 20141024
Hadoop 介紹 20141024
Java@taobao
Java@taobao
Using google appengine (2)
Using google appengine (2)
Html5和css3入门
Html5和css3入门
非常靠谱 Html 5
非常靠谱 Html 5
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
Wap2.0
Wap2.0
Wap2.0
Wap2.0
Using google appengine_final
Using google appengine_final
輕鬆學會網頁前端
輕鬆學會網頁前端
重构之道 触屏篇
重构之道 触屏篇
重构之道 触屏篇
重构之道 触屏篇
Big Data Projet Management the Body of Knowledge (BDPMBOK)
Big Data Projet Management the Body of Knowledge (BDPMBOK)
如何使用 Xhprof 分析網站效能 (真實案例)
如何使用 Xhprof 分析網站效能 (真實案例)
Class 20170126
Class 20170126
Html5
Html5
Más de 均民 戴
CKmates - AWS 三大 AI 解決方案:應用影像辨識、聊天機器人與語音轉換以及 Serverless 應用
CKmates - AWS 三大 AI 解決方案:應用影像辨識、聊天機器人與語音轉換以及 Serverless 應用
均民 戴
CKmates - AWS 雲端運算 基礎服務介紹
CKmates - AWS 雲端運算 基礎服務介紹
均民 戴
COSCUP 2016 Workshop: 用 Docker 架設班級 git-it 練習環境
COSCUP 2016 Workshop: 用 Docker 架設班級 git-it 練習環境
均民 戴
寫程式?那些老師沒教的事 (Git 部分節錄)
寫程式?那些老師沒教的事 (Git 部分節錄)
均民 戴
在 DigitalOcean 架設 Gitlab
在 DigitalOcean 架設 Gitlab
均民 戴
Bootstrap個人網站 20141117
Bootstrap個人網站 20141117
均民 戴
資訊創意課程 - Create A Personal Website 1
資訊創意課程 - Create A Personal Website 1
均民 戴
MIS MySQL 入門
MIS MySQL 入門
均民 戴
SITCON 2014 - Regular Expression Introduce
SITCON 2014 - Regular Expression Introduce
均民 戴
興大資訊社 CPE 訓練宣傳
興大資訊社 CPE 訓練宣傳
均民 戴
20130706閃電秀
20130706閃電秀
均民 戴
Drupalize your data use entities
Drupalize your data use entities
均民 戴
Drupal 7 Entity & Entity API
Drupal 7 Entity & Entity API
均民 戴
植基於個人本體論的新聞推薦系統
植基於個人本體論的新聞推薦系統
均民 戴
JSON 和 Android 的火花
JSON 和 Android 的火花
均民 戴
寫程式?那些老師沒教的事
寫程式?那些老師沒教的事
均民 戴
Más de 均民 戴
(16)
CKmates - AWS 三大 AI 解決方案:應用影像辨識、聊天機器人與語音轉換以及 Serverless 應用
CKmates - AWS 三大 AI 解決方案:應用影像辨識、聊天機器人與語音轉換以及 Serverless 應用
CKmates - AWS 雲端運算 基礎服務介紹
CKmates - AWS 雲端運算 基礎服務介紹
COSCUP 2016 Workshop: 用 Docker 架設班級 git-it 練習環境
COSCUP 2016 Workshop: 用 Docker 架設班級 git-it 練習環境
寫程式?那些老師沒教的事 (Git 部分節錄)
寫程式?那些老師沒教的事 (Git 部分節錄)
在 DigitalOcean 架設 Gitlab
在 DigitalOcean 架設 Gitlab
Bootstrap個人網站 20141117
Bootstrap個人網站 20141117
資訊創意課程 - Create A Personal Website 1
資訊創意課程 - Create A Personal Website 1
MIS MySQL 入門
MIS MySQL 入門
SITCON 2014 - Regular Expression Introduce
SITCON 2014 - Regular Expression Introduce
興大資訊社 CPE 訓練宣傳
興大資訊社 CPE 訓練宣傳
20130706閃電秀
20130706閃電秀
Drupalize your data use entities
Drupalize your data use entities
Drupal 7 Entity & Entity API
Drupal 7 Entity & Entity API
植基於個人本體論的新聞推薦系統
植基於個人本體論的新聞推薦系統
JSON 和 Android 的火花
JSON 和 Android 的火花
寫程式?那些老師沒教的事
寫程式?那些老師沒教的事
Último
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
shanshanhui1
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
ggbob1
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
testhelper Sobrenome
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
黑客 接单【TG/微信qoqoqdqd】
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
黑客 接单【TG/微信qoqoqdqd】
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
gravestomas0
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
黑客 接单【TG/微信qoqoqdqd】
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
ggbob1
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
黑客 接单【TG/微信qoqoqdqd】
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
黑客 接单【TG/微信qoqoqdqd】
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
PriscilleXu
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
sardinesaying
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
黑客 接单【TG/微信qoqoqdqd】
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
bairnshajjes
Último
(14)
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
我了解到黑客在某些领域拥有卓越的技术能力,特别是在处理系统漏洞方面。在当前的情境下,如果我想要改变我的毕业成绩,他们的帮助或许是我唯一可行的选择。【微 t...
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
🎉一键更改成绩单,轻松点亮你的未来! 💡[书]想知道自己成绩怎么样?别担心!我们来帮您解答疑惑。 在这里,只需轻轻一点按钮,就能立即查看到分数、排名和其他...
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
Bootstrap個人網站 20141027
1.
BOOTSTRAP X GITHUB
PAGE CREATE A PERSONAL WEBSITE http://goo.gl/W1NfUW
2.
HTML5 已正式發布 2014/10/28
http://www.w3.org/TR/html5/
3.
安裝 XAMPP 官方網站
安裝後,以系統管理員開啟 Xampp Control Panel 將 Apache 和 MySQL 設定為開機自動開啟 連線到 http://127.0.0.1/ 驗證安裝成功 或是 http://localhost/
4.
只安裝這些東西就行了
5.
用 XAMPP CONTROL
PANEL 開啟 APACHE 和 MYSQL
6.
LOCALHOST 或是 127.0.0.1
7.
直接從 GITHUB 新增檔案到
REPO
8.
新增檔案
9.
修改檔案
10.
Personal Website Viewer
11.
HTML + BOOTSTRAP
基礎 http://getbootstrap.com/
12.
HTML 初始程式碼 L1:HTML5的宣告
L2:<html>標籤,萬物起源 L3:<head>標籤,HTML的描述 L4:<meta charset="…"> HTML文件的編碼方式 L5:文件的標題 L7:<body>標籤,文件的內容
13.
HTML標籤 標籤名稱 標籤屬性
標籤內容 標籤名稱:div 標籤內容:hello world 標籤屬性: id="news-1" class="article"
14.
HTML ENTITIES
15.
超連結 <a>…</a> 連結到絕對網址
<a href="http://www.google.com.tw/">Google</a> 連線到相對網址 <a href="test/index.html">index</a> 書籤 <a href="#content">content</a>
16.
套用 BOOTSTRAP Line
06:在head標籤最底下套用Bootstrap的CSS Line 09:在body標籤最底下先套用jQuery Line 10:然後再套用bootstrap的javascript Bootstrap CDN jQuery on Google CDN
17.
為了瀏覽器及手機的相容性 加上額外的HEAD資訊 參考網址
18.
手機瀏覽兩三事 為了讓手機瀏覽器知道網頁有為手機設計,可加上 viewport
如果希望在手機上面禁止縮放,可限制縮放倍率 詳細說明
19.
BOOTSTRAP 樣式 http://getbootstrap.com/css/
20.
BOOTSTRAP的網頁容器 使用 Bootstrap
時需要將內容放進容器 才有辦法使用 Grid system 和把網頁內容置中 注意:不要巢狀套用,不然排版會怪怪的 使用 .container 來作為自適應容器 使用 .container-fluid 來作為 100% 寬度的容器 詳細資料
21.
GRID SYSTEM 網格系統
在 Bootstrap 內有一個簡單、自適應 (responsive)、行動優先 (mobile first) 的 Grid 系統,頁面會被 Grid 系統分成 12 行,當螢幕大小改變時,可以跟著改變資料所佔的行數。 Grid System 分成四種寬度 Extra small 手機 ( < 768px ) Small 直向平板 ( >= 768px ) Medium 橫向平板 ( >= 992px ) Large 桌上型螢幕 ( >= 1200px ) 詳細資料
22.
GRID SYSTEM 查看範例
23.
頁面布局 1-1 欄寬
1-1-1 欄寬 2-1 欄寬 多種欄寬方式、巢狀 Grid 系統
24.
HTML HEADING 詳細資料
25.
文字段落 <p>…</p>
26.
行內裝飾 標記 <mark>…</mark>
刪除線 <del>…</del>、<s>…</s> 底線 <ins>…</ins>、<u>…</u> 縮小字體 <small>…</small> 粗體 <strong>…</strong> 斜體 <em>…</em>
27.
文字排列
28.
TRY IT YOURSELF
請用愛用 亂數假文產生器
29.
無序清單
30.
有序清單
31.
無樣式的清單
32.
表格
33.
BOOTSTRAP表格 詳細資料 在一般的
html 表格加上 .table 就可套用 Bootstrap 的樣式
34.
自適應表格 (RESPONSIVE) 詳細資料
35.
表單 (跳過) 因為個人網站用不到表單
(form),歡迎私下詢問。(文件在此)
36.
按鈕 <a> <button>
<input> 詳細資料
37.
圖片 為了讓圖片也可以自適應螢幕大小,故須加上 .img-responsive
<img src="…" class="img-responsive"> 圖片裝飾 詳細資料
38.
TRY IT YOURSELF
請用愛用 亂數假文產生器
39.
記得看過被我略過的東西 因為時間不夠,所以就自己看囉~ http://getbootstrap.com/css/
40.
BOOTSTRAP組件 http://getbootstrap.com/components/
41.
GLYPHICONS 圖案 詳細資料
42.
NAVBAR 詳細資料
43.
PANEL 詳細資料
44.
TRY IT YOURSELF
請用愛用 亂數假文產生器
Descargar ahora