[day6]-好人才，不用嗎？之個人網站建置begin～從bootstrap開始！
昨天看到有邦友留言說推bootstrap 4一把，推薦我用bootstrap 4做做看(wwww
但我今天看了一下bootstrap 4好像還是alpha版，官網現在也還是都英文文件較多，沒關係！也許還是可以試試看XD
在這邊可以和大家分享小妹我有時候遇到JS程式上的問題，遇到問題第一步當然是要先拜偉大的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裡他提供你一個快速入門的範本，並提到" 確保你的網頁設置了最新的設計及開發標準 " 意味著以下三個要點
- 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載入了：我們點選下面的our official examples來下載他官方的範本下去改，這樣我們在製作上也比較快速方便！
- Tether這個我還不知道是啥（sorry....）
- bootstrap
- jQuery
- 而Hello, world!是主標題，現在裡面空空如也～
因為這次要作個人網站，我想也不要有過多的文字來表達自己，坦白講我自己都沒有耐心看完一大篇文字了XD～ 因為離發文死線12點又快到了... 好吧～今天又痛心的斷尾在這了 明日我早點寫Orz.... 文後- 今天解了一個html標籤<select>下拉式選單，如何把的某些optiondisable掉之關卡～ 我想這就是寫程式的樂趣吧.... ---------------------------------------------------------------------------------------- 同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]
- 因此我選用簡單、現代化、視覺化的要素來表達自己～bs官方範本裡，我覺得就Cover這個範本最符合我的要點了～（就決定是你了～）
0 留言:
張貼留言