[網路資源]《Bootstrap》簡潔，直覺，強大的前端框架模組

/ 分類: , / 0 則回應

標籤:

網頁的開發設計從框架的設定,版型的確定開始
通常一個好的網站有幾個重要的要點
好的UI 介面,方便使用者可以很快速簡單的找到自己想要的資訊或資源

《Bootstrap》這個網站可以方便網頁設計者很快速的建立前端框架.並且採用最新的HTML 5架構支援 適應性網頁設計(Responsive Web Design) 簡稱RWD

原文網頁《Bootstrap》

中文翻譯網頁《Bootstrap》-感謝由 翻譯

大家其實不難發現以前的網頁設計師只要懂簡單的Table基本的html語法，頂多應用Javascript等特效吸引流覽者就夠了~

但是現在如果有在找工作的朋友不難發現到，出現很多名叫”視覺設計師、”前端設計師”等職業

因為以前接案當SOHO的關係…基本上一個網站通常由一個人包辦。從版面設計規畫，美工設計，網頁程式設計，等於是前後端全包了~
但是現在分工的情形在一般公司非常明顯，前端設計….一直到後端網頁程式設計….視覺藝術等都是由不同的人負責。
也相對的比較有效率，但是也多了溝通上的困難……唉…..不多說了..先介紹今天的Bootstrap吧!

1.首先我們先點選網站Download Bootstrap

bootstrap_img02
2.下載原始檔Bootstrap
bootstrap_img03

3因為有部分效果需要用到jQuery ,建議您先到jQuery官網下載_jQuery元件 將下載的檔案jquery-1.11.1.min.js放入JS資料夾

4. 開啟網頁在<head>~</head>之間，將css與js載入。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  6. <!– Bootstrap –>
  7. <link href=“css/bootstrap.min.css” rel=“stylesheet”  type = “text/css”>
  8. <script src=“js/jquery-1.11.1.min.js” type = “text/javascript”></script>
  9. <script src=“js/bootstrap.min.js” type = “text/javascript”></script>
  10. </head>
  11. <body>
  12. <h1>Hello, world!</h1>
  13. </body>
  14. </html>

5.接下來就是到bootstrap網站取得妳要的效果原始碼插入<body></body>之間即可

例如我如果插入按鈕

  1. <p>
  2. <button class=“btn btn-primary” type=“button”>預設的按鈕</button>
  3. <button class=“btn” type=“button”>預設的按鈕</button>
  4. </p>

 

則會顯現出底下樣式

bootstrap_img05

 

另外還有很多框架的範例在這邊
http://getbootstrap.com/2.3.2/getting-started.html#examples
以前我們開發網頁總是自己設計按鈕、表格等等，但是現在Bootstrap都幫我們做好了，我們只要在適當的地方加入該樣式，就能夠呈現不錯的效果。

 

作者：awei
一個從純樸鄉下 輾轉搬到現在繁華的都市 住在四周都是百貨公司與商店林立的便利世界裡 我只是想拍拍照 記錄一下這個我居住的星球 力量雖然渺小 但是我有我想做的一些事 貓咪慵懶的動作 花草的靜態之美 建築的偉大背景 等等.... If I like a moment, for me, personally, I don't like to have the distraction of the camera. I just want to stay in it.
個人網站 | 更多文章 »

發表留言