初期使用bootstrap的人可能會很苦手不知要怎麼下手版型,Google關鍵字「Bootstrap Theme」其實可以找到許多資源網站,一般免費的Theme 網站大都也是提供基礎的配色跟樣式,但那對初學者來說已經很夠用。目前看過最喜歡也最實用的是 Start Bootstrap 這個網站,不但有基本分類而且也有提供Unstyle的版型,基本Layout都排好了,比如Single Page、Portfolios、Ecommerce….等,且沒有太多花俏的樣式增加修改的難度;另外此網站還蒐集並整理了其他網路上Bootstrap的資源,有官方資源、免費版型樣式、付費版型樣式、範例網站、jQuery外掛…等等,非常詳盡且方便。
主選單上有幾種分類可以選:
Admin and Dashboard – 適合管理介面 & 統計數據類型
Full Website – 適合全網站
Landing Page – 適合小型活動或額外的說明公告頁
One Page Websites – 一頁式類型
Portfolios – 適合展示作品集類型
Blogs – 部落格文章
Ecommerce – 小型電子商務、購物網站類型
Unstyled Templates – 各式Layout
Navigation & Navbars – 基本選單版型
![startBS_3](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u6Ludyv0GmMLGzU9Z5x6EPcn9ngL-F91QwJ4nL2vMWQ7s6q9dpaCaNf8agt2Z9v_tQeMfrCaHF9p7h78jOzmTcV_MH7XKJimpodinEB3zt1KixLVuCeiv3Tw=s0-d)
Admin and Dashboard – 適合管理介面 & 統計數據類型
Full Website – 適合全網站
Landing Page – 適合小型活動或額外的說明公告頁
One Page Websites – 一頁式類型
Portfolios – 適合展示作品集類型
Blogs – 部落格文章
Ecommerce – 小型電子商務、購物網站類型
Unstyled Templates – 各式Layout
Navigation & Navbars – 基本選單版型
Full Websites – 整個網站的雛形都有了
![startBS_4](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vLr4itcdGOnLk2a0SKl2w8p2WksBENuRBpwesdeb7NSKLaoCf0mclGiiTCdxrnoFPlI0jE79UfFqCxdgU9HYmHgAm-LMmdDvBGh3mL6kaMM9x5xL4jbAYNyg=s0-d)
Unstyled Templates – 有各式Layout可以選擇,都是基本沒有添加樣式的版型
![startBS_6](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uzWUe2bsATgJXjGmBgJSL6q24Om-IinU4LXxCoioqvs8-Js1C17GhzgaLKHcUH6bDwtxHvTlp6aBtPIZnMS8hbM7ki195V7rPtmBwh8sfxNUVkxUwv2Smjt_4=s0-d)
One Page Websites – 一頁式類型,除了有幾組有完整的theme以外,其他也有基本unstyle的版型
![startBS_7](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tgdeCv8-u1n96s2PgOSe7CBXTP717UipQSYxbq2A697c8pqTrlbxeVPgnlGFPs0IPsFx5za1PJZCCFs9HCbZgRgh5s8OIFWXHjWKFNg50R972XcOLb8FgkH5A=s0-d)
另外到 Buy Bootstrap Templates也可以看到各種付費版型的列表頁面,這些作品都會直接連結到幾個常見的付費版型網頁
![startBS_8](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sYpkW4LFDTYO_VKFzingOp_rdEqLx2J1njyPq6oZyyKF9-ps2lRyWAa4ha2stjn2qY7e1mSw3YAfevs9GUu25haprFwhu16-7F3ZgoT-lpt1Yo2OP1Jwvi5w=s0-d)
比如Wrap Bootstrap,但其實綜合看下來在這裡出現的付費版型也都幾塊~十幾塊美金而已,說真的不貴,換算台幣也不過兩百多到四百多塊左右,而且有些基本架構或動態都已經很完整,事實上買來使用在專案上也很划算。
![startBS_9](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v0CFMKQUtvQEyfB2fkEeMC_GBlRUbvRuP2ZkPeX8mJqccWaQBdm4GUr1rj7Q4qYWbuskM8IHqRw0Qz2F5fWgNxyZcaR-EneewgTbP_wGSxtHfYB1w7_28Abyg=s0-d)
另一個前面提過這個網站很棒的地方就是資源蒐集的部份,點選Bootstrap Resources List
![startBS_12](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vaAF_xZVMm4-BsBiyuWrUYPwWFu_d3fFPBLOKiCyjMkCaHjbVKNAKWoYLYUa-00tYavPmwEX8H0xpFvwT44_AuEdxpUVnQrBPDnlh_essrcbV4OHCQXgqrH3kL=s0-d)
左邊分類選單
Official Bootstrap Resources – 官方Bootstrap資源
Premium Bootstrap Themes – 付費Bootstrap版型
Free Bootstrap Themes – 免費Bootstrap版型
Bootstrap Showcases – Bootstrap作品網站
Bootstrap Development Tools – 專門為 Bootstrap 開發的各種輔助工具,比如 UI Bootstrap 中優化及改善基本功能;Bootdey、Bootsnipp 提供已經設計完成的片段樣式下載等
Bootstrap UI Extensions – 介面輔助工具,比如按鈕、社群分享按鈕、整體介面配色等
Bootstrap jQuery Plugins – 提供了表單、表格、選單、Lightbox、Notification…等等外掛
![startBS_10](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vwhUwfCByvpo2l6q-SnWX67Ww33IUoHPsS0zG2fhmLkKhaADNYQGY4BwWZy3HtpanmnWtvva_Vb_MdiGdi2LftapAx7QRDrGQgRaJLRD1FgJCiYujElbe7zzz_=s0-d)
Official Bootstrap Resources – 官方Bootstrap資源
Premium Bootstrap Themes – 付費Bootstrap版型
Free Bootstrap Themes – 免費Bootstrap版型
Bootstrap Showcases – Bootstrap作品網站
Bootstrap Development Tools – 專門為 Bootstrap 開發的各種輔助工具,比如 UI Bootstrap 中優化及改善基本功能;Bootdey、Bootsnipp 提供已經設計完成的片段樣式下載等
Bootstrap UI Extensions – 介面輔助工具,比如按鈕、社群分享按鈕、整體介面配色等
Bootstrap jQuery Plugins – 提供了表單、表格、選單、Lightbox、Notification…等等外掛
除了分享簡介功能以外,也直接提供了連結網址,非常實用,下次再來介紹其他免費資源~
![startBS_11](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_szRiVWlIrjyPrykSuyP6pD0kJ2T0l584rPR5bFgPTfx_1EfzcB8yMFlTruMSbBLEEljl4y9MnE8dCWoiEA-Qex04kHX_ixHQ2J6DYMEBSNY836-wGTcQO_r9C-=s0-d)
沒有留言:
張貼留言