2013/07/30

HTML5 Bootstrap.js 初體驗

最近接了個案子，必須要用網頁開發
那不擅長網頁開發的我當然得開始積極的練功備戰了
不然到時候賠了時間，說不定又得賠錢Orz

話說HTML已經是我國小時有稍微摸過，小一剛拿到電腦開心的模樣XD
電腦公司蔡先生當初幫我們灌的是Office 97，裡面有FrontPage 97
那時後有幫我幼稚園最愛的鋼彈W建立了一個網站，那網站當然只是運行在自己電腦上用XD
當初電腦有IIS，只是我那時候不懂的東西太多了XD

尤其那個人氣計數器搞了很久…最後才發覺我沒有去用個變數去紀錄他XD

到了高中，為了班級網頁比賽，還把整台電腦搬去學校的蠢樣子XDDDDDDD
我都還記得，那時候我跟朋友找到了一款韓國出的編輯器？M開頭的(年代久遠，不可考究XD)
反正加入了一堆JS的語法…，到最後也沒拿出去比賽，畢竟版面太醜了XDDD

從此之後，就步入了VB和C++與Java的開發之路上了，再也沒有摸過HTML以及Javascript
雖然用的都是IDE輔助，不過我還是有自己去學一下啦XDDD
不過還是得持續學新技術，才能茁壯

不過我這次選用Bootstrap.js，其實也是我的好同學Kennedy當初說很好用，我就用下去啦XDDD
對了對了，Kennedy說他缺女友喔喔喔喔喔！他是高富帥，歡迎搭訕

廢話不多說了，剛開始進入正題了

Bootstrap.js是Twitter所開發的，有興趣就去朗讀一下Twitter Bootstrap吧！

對了，在此建議啊可以考慮去下載Microsoft WebMatrix或是Sublime Text 3
不過Microsoft WebMatrix有提供完善的智能標籤，那也可以搭配Visual Studio 2013 for Web
那我自己是只有下載Visual Studio 2013 Preview，也是可以用啦！

首先，建立一個HTML檔案



接著將以下程式碼貼入

<!DOCTYPE html>

<html lang="zh-tw">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link  href="http://twitter.github.io/bootstrap/2.3.2/assets/css/bootstrap.css" rel="stylesheet" media="screen">
        <title>C.Y. Fang Bootstrap demo</title>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap.min.js"></script>
    </body>
</html>

接著我將加入標籤和輸入方塊以及按鈕，並且包在一個Form裡面
請在body內加入該程式碼

<form>
              <fieldset>
                <legend>Form Title</legend>
                <label>Label</label>
                <input type="text" placeholder="輸入方塊">
                <button class="btn btn-large btn-primary" type="button">按鈕</button>
              </fieldset>
            </form>

然後點選Run/Google Chrome or IE and FireFox






Bootstrap.js對IE7和IE8支援度似乎不是很夠，建議安裝IE8以上在用IE去瀏覽


就可以看到今天的成品了XD


完整程式碼：
<!DOCTYPE html>

<html lang="zh-tw">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link  href="http://twitter.github.io/bootstrap/2.3.2/assets/css/bootstrap.css" rel="stylesheet" media="screen">
        <title>C.Y. Fang Bootstrap demo</title>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://twitter.github.io/bootstrap/2.3.2/assets/js/bootstrap.min.js"></script>
             <form>
              <fieldset>
                <legend>Form Title</legend>
                <label>Label</label>
                <input type="text" placeholder="輸入方塊">
                <button class="btn btn-large btn-primary" type="button">按鈕</button>
              </fieldset>
            </form>
    </body>
</html>



其實啊，寫網頁是一件很有趣的事情。
雖然很久沒有去摸HTML，不過未來網頁的前後端工程師可能都會很吃香，所以我還是學一下好了XD

對了，如果想要看中文教材的可以參考這邊Bootstrap.js中文教學網。是由熱心網友所翻譯的，也算速成教材XD




參考資料：
http://twitter.github.io/bootstrap/2.3.2/getting-started.html
By at
標籤: , ,