[day6]-好人才，不用嗎？之個人網站建置begin～從bootstrap開始！

2017 iT 邦幫忙鐵人賽

DAY 6

Modern Web

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

2017鐵人賽

King Tzeng

2016-12-07 23:12:46

2642 瀏覽

分享至

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

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

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

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

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

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

好～來到了Bootstrap 4的官方網站（https://v4-alpha.getbootstrap.com/）

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版的時候，應該不會與現在差太多......吧....（賭了！

接下來進入documentation，你會看到大大的Getting started(入門)，下面有一些教學的文件可以看，這邊我就不多闡述了～直接進入Contents→Starter 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>

那我在這邊給大家看看以上的範例網頁會長這個樣子

他提供的快速範本裡已經使用CDN載入了：