2015年8月3日 星期一

Bootstrap ,以HTML與CSS基礎的設計模板 基本介紹

Bootstrap 是一套設計網頁的模板

特點是其為了RWD(Responsive Web Design)響應式網頁設計的實現帶來許多方便



 響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計,這是一項被公認在2014年網頁設計開發技術的趨勢,網站使 用CSS3,以百分比的方式以及彈性的畫面設計,在不同解析度下改變網頁頁面的佈局排版,讓不同的設備都可以正常瀏覽同一網站,提供最佳的視覺體驗,是個 因移動平台的用戶大量增加而想出的一個對應方法。

 以及內含許多是先定義好的原件樣式,
可以讓無任何美感細胞的工程師快速開發出還不錯的網頁畫面(跟html內件元件相比..)



為網頁套上Bootstrap :
 Bootstrap是由javascript、css、font檔所組成
到其官網可以載到相應的資料
只要把相應的檔案複製到你的網頁目錄資料夾中,在.html文件正確的連結到即可

範例:

網頁目錄/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff


ps:  xxxxx.min.js 跟 xxxxx.js 內容功能是一樣的,只是.min檔去除許多空白、跳行
檔案體積較小,方便用戶端使用者載入 


相關連結:


Bootstrap 官方網站
http://getbootstrap.com/

Bootstrap 官方網站 (中文)
https://kkbruce.tw/bs3

延伸: 
LayoutIt!  視覺化Bootstrap線上編輯器

沒有留言:

張貼留言