iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)系列 第 6

[day6]-好人才,不用嗎?之個人網站建置begin~從bootstrap開始!

今天要開始打造我們的個人網站了!

昨天看到有邦友留言說推bootstrap 4一把,推薦我用bootstrap 4做做看(wwww

但我今天看了一下bootstrap 4好像還是alpha版,官網現在也還是都英文文件較多,沒關係!也許還是可以試試看XD


在這邊和大家分享小妹我有時候遇到程式上有問題的解決辦法!遇到問題第一步當然是要先拜偉大的google大神囉~

那當找問題時可以使用英文去做搜尋,不用用很艱深的英文單字去搜
小妹我的英文也是很爛的....所以我就使用土法煉鋼的方式去作搜尋,那當搜到相關詞後,可以用相關詞再去作搜尋,很多問題都是這樣解決找出來的喔~同時也可以自我訓練一下英文!跟大家作一個小分享!/images/emoticon/emoticon25.gif

那話不多說,今天要來把首頁的架構大致的撰寫好,所以我們最快的方法就是找bootstrap 的範本去改~(欸?)
對!沒錯~用範本好有好有壞啦XD
但是因為我白天還有別的專案在run,所以只好採取這個辦法了(土下座....Orz.../images/emoticon/emoticon20.gif

好~來到了Bootstrap 4的官方網站(https://v4-alpha.getbootstrap.com/)

http://ithelp.ithome.com.tw/upload/images/20161207/20103130LZ7JUlBjJv.png

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.
(Bootstrap是在這世上最受歡迎的前端框架,可以輕鬆打造RWD與行動裝置優先的網站)

可以看到進到官網首頁Bootstrap(以下簡稱bs)主打的slogan!對於不熟悉前端者或是初學網頁設計者,的確是很好用的一個工具!
目前我截圖的版本是v4.0.0-alpha.5,還沒正式上線的感覺~但我想等到beta版的時候,應該不會與現在差太多......吧....(賭了!/images/emoticon/emoticon16.gif

接下來進入documentation,你會看到大大的Getting started(入門),下面有一些教學的文件可以看,這邊我就不多闡述了~直接進入ContentsStarter template裡他提供你一個快速入門的範本,並提到

Be sure to have your pages set up with the latest design and development standards.
"確保你的網頁設置了最新的設計及開發標準"
意味著以下包含三個要點

  • Using an HTML5 doctype
    使用HTML5 doctype
  • Forcing Internet Explorer to use its latest rendering mode (read more)
    強制Internet Explorer使用其最新的渲染模式
  • And, utilizing the viewport meta tag.
    並且使用viewport的mata標籤
以上三個要點都包含的話,程式碼範例如下
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  </body>
</html>

那我在這邊給大家看看以上的範例網頁會長這個樣子
http://ithelp.ithome.com.tw/upload/images/20161207/20103130ZtwREiXwyW.png
他提供的快速範本裡已經使用CDN載入了:

  • bootstrap
  • jQuery
  • Tether這個我還不知道是啥(sorry....)

Hello, world!是主標題,現在裡面空空如也~
我們點選下面的our official examples來下載他官方的範本下去改,這樣我們在製作上也比較快速方便!

因為這次要作個人網站,我想也不要有過多的文字來表達自己,坦白講我自己都沒有耐心看完一大篇文字了XD~
因此我選用簡單現代化視覺化的要素來表達自己~bs官方範本裡,我覺得就Cover這個範本最符合我的要點了~ /images/emoticon/emoticon42.gif(就決定是你了~)
http://ithelp.ithome.com.tw/upload/images/20161207/20103130lpkqPnrUQs.png

因為離發文死線12點又快到了...
好吧~今天又痛心的斷尾在這了/images/emoticon/emoticon02.gif
明日我早點寫Orz..../images/emoticon/emoticon46.gif


文後-

今天解了一個html標籤<select>下拉式選單,如何把的某些optiondisable掉之關卡~

我想這就是寫程式的樂趣吧..../images/emoticon/emoticon07.gif


同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有,轉載請告知~]


上一篇
[day5]-好人才,不用嗎?數位履歷的規劃與建置—個人網站、WebAPP
下一篇
[day7]-計畫乾坤大挪移,先來申請免費的虛擬主機好了~(但世事變化無常啊Orz
系列文
無所不能的前+後端技術應用,一個小菜鳥的經驗談( ・`ω・´)30

1 則留言

1
King Tzeng
iT邦新手 4 級 ‧ 2016-12-07 23:29:33

http://tether.io/
恩~看了一下好像是頁面效果的JS library~
(看起來好像可以作視差捲動耶/images/emoticon/emoticon31.gif)

Ivan Wei iT邦新手 5 級 ‧ 2016-12-08 01:13:25 檢舉

推 Bootstrap 4 的兇手報到,而且是不負責推坑 (根本不知道還沒進 Beta ) XD

Tether 看 Github 確實若妳說的,因為 v4 的 Tooltip 目前是透過這實現。呃,竟然不是用 CSS 來實現 >__<

哈哈XD
可以挑戰新東西也是很熱血的壓!!/images/emoticon/emoticon07.gif
只是會做比較慢就是了(被毆....XD

我要留言

立即登入留言