|
VS 2013採用了 Bootstrap，就跟當年內建 jQuery一樣令人驚喜
使用 Bootstrap來呈現網頁，不管是大螢幕 或是 小螢幕（手機、平板） 都能展現出最佳畫面（如下圖所示，我用各種不同的瀏覽器大小來觀賞）
網頁程式設計師，可以透過一個網頁，對應各種平台（不同解析度畫面）的使用者 也就是 響應式網頁（Responsive Web / 自適應網頁）的設計
我覺得這篇文章解釋的最清楚： http://lms./epaper/artical/index.php?id=file/34/digiinfo_0 響應式網頁設計(Responsive Web Design)概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出的概念。
簡單的來說讓網站可以針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時，整個網頁頁面會對應不同的解析度，而有不同的呈現方式，也是是說可以讓最重要的訊息在有限的版面中清楚的呈現給用戶。.... 詳見全文
這位前輩（Ethan Marcotte）也出了一本同名書，名為 Responsive Web Design 您可以從這本書的電子版（電子書）介紹網頁，看到他想表達的意境。 請看這裡：http://www./products/responsive-web-design （建議您連過去，看一下圖片）
下圖表示：依照不同解析度的螢幕，圖片與排版會自動縮小（如下圖左側）
下圖表示：兩種不同大小的畫面，用來呈現同一個網頁 （中央、右側代表細長型的觀賞畫面）
==== 入門簡介與概論 ==== 建議您先看過這幾篇（中文）文章後，再來進行下去： http://blog./post-2013-06-12-bootsrap-and-kendo-ui.aspx 這個作者有一個 Demo 網頁給您測試
==== Bootstrap網站與文件（中文版） ==== Bootstrap的網頁，已經被微軟MVP-- 陳傳興老師（KingKong Bruce）翻譯成正體中文了 提醒您，本文後續內容是採用 2.3.2版來進行。
正體中文版網站 -- Bootstrap (http:///)
點選上下兩張圖片，可以連結到正體中文版網站 -- Bootstrap (http:///)
我們先從網站上，「下載」必要的檔案（例如：CSS or jQuery等等） 放在自己的網站內備用。
上面的範例很詳細，照著看一遍或是Copy下來使用，就能作出一樣的效果。 網站上有很多說明文件，就算基礎是零，在家自修也可以跟得上。
==== 小試身手（先看再做） ====
如同一開始提到的入門簡介（與推薦文章），我們先用一個簡單的範例來試試看 這個範例是 黑暗執行緒前輩的範例（點下圖可以看見他的原文）
包含了：網站標題、導覽列、搜尋（文字方塊 / TextBox） 下方還有表格（GridView）與按鈕（Button）...........我們會把這些效果與外觀，搭配 ASP.NET的 Web控制項
=================================================================================================== 提醒您，本文後續內容是採用 2.3.2版來進行。 1. 從 Bootstrap下載的檔案，解開後請放在您的網站內 網頁需要在 <head>裡面增添下列的CSS與 .js檔。
2. 導覽列的內容如下。 我們可以看見許多 <li>標籤，代表每一個連結點。
3. 下拉式選單，跟我們ASP.NET的 DropDonwList（或是 清單控制項）有比較大的差異。 我們可以看見他大量使用 <li>標籤搭配 <a>超連結標籤，做出類似「下拉式選單」的外觀， 但骨子裡面其實都是超連結URL
4. 表格的外觀，可以改成圓角。 或是大家熟悉的「光棒」效果，滑鼠經過（MouseOver / Hover）就改變底色.... 點選下圖，可以連結到 http:///Bootstrap/BaseCSS#tables 觀看更多說明
加到 ASP.NET GridView裡面也不難吧？
4. 按 鈕 有多種配色，我覺得很實用。 點選下圖可以連結到 http:///Bootstrap/BaseCSS#buttons 觀看更多說明
改用 ASP.NET Button控制項也沒什麼變化............... 親手作作看都不難， 只靠眼睛看（不動手）...永遠都很難！
Sorry....上圖的class="...
5. 圖片與排版...... 點選下圖會連結到 http:///Bootstrap/BaseCSS#images 觀看更多說明
提醒您，本文內容是採用 2.3.2版來進行。
我是一個沒有學過 CSS與 jQuery的人 只接觸過簡單的 HTML標籤與網頁、有寫過簡單的 JavaScript （基礎接近於零）
但我把文章看過一次，把範例放到 ASP.NET裡面看看成果，就知道該怎麼下手了 （不要在「看」了！要動手做~）
本文範例下載：Book_Samples_BootStrap.rar
2013/9/27補充： VS 2013將搭配 Bootstrap 3.0.0 上面的範例需要部分修正，請到此下載 http://www./mis2000lab/archive/2013/09/27/bootstrap_300_20130927.aspx
我之前參閱了這本書，吸收得比較順暢 -- [好書推薦]簡體中文 -- Implementing Responsive Design（響應式Web設計實踐）
知識，因為 分享 而偉大
|
|
|
来自： Alkaid2015 > 《7m.Bootstrap》
