分享六個基於Bootstrap的實用開發教程和模板示範

來源:互聯網
上載者:User


關於Bootstrap,相信大家一定不陌生,它已經成為現在主流產業的一個重要工具,Bootstrap提供了優雅的HTML和CSS規範,它基於jQuery架構開發的,它在jQuery架構的基礎上進行了更為個人化和人性化的完善,形成一套自己專屬的網站風格,併兼容大部分jQuery外掛程式。今天,我們帶來6款Bootstrap實現的幾款小應用,希望可以對你們有所協助!

移動為先的Bootstrap3


線上示範

Bootstrap3已經發布好幾周了, 現在該是我們看看Bootstrap有什麼新鮮內容的時候了。首先,最重要的一個改變就是支援響應式網站設計,原來的響應式模組已經去掉了。 現在從核心,Bootstrap3就支援響應式設計,不僅僅如此,更深入的在於,整合了Mobile First的設計思想,即移動為先,這個概念最初由Luke wrobleski在他的部落格提出。在這篇文章中,我們將分享一些BT3的新內容,希望大家喜歡!

使用Bootstrap3和Ladda UI實現的多種按鈕“載入中”效果體驗


線上示範1    線上示範2     線上示範3

大家在開發基於web的網站或者web應用中,常常在AJAX調用的過程中需要提示使用者並且展示相關的“載入中”效果,類似的UI設計也非常多,比如,當點擊一個按鈕後,在它的旁邊顯示一個 “載入中” 文字,或者是添加一個“旋轉GIF”動畫。

基於bootstrap的純CSS多級菜單 - BootM


線上示範

BootM是基於bootstrap開發的一款多級菜單實現。其主要特性包括:無JS,基於bootstrap,響應式設計,無層次限制,基於文本的表徵圖。

Bootstrap3和jQuery實現響應式iOS/Android風格滾動到頁頂(底)彈跳效果


線上示範

如果大家使用iOS或者android相關移動平台的話,對於頁面滑動到最底端後的彈跳效果肯定不會陌生,在這篇教程中,我們將使用最新版的Bootstrap3和jQuery來產生一個類似行動裝置app的web頁面效果,支援各種裝置的響應式展示。

Bootstrap富文字編輯器bootstrap-wysiwyg的使用


線上示範

使用其實很簡單的,倒入bootstrap相關CSS,JS,jQuery,還有bootstrap-wysiwyg的JS。

Bootstrap3的一個landing page(著落頁模板)


線上示範

非常適合你做產品推廣或者app推廣,支援響應式,並且可以自行擴充開發!

如果大家喜歡,請留言,我們將每周定期給大家推薦一些不錯的Bootstrap3模板!

原文來自:分享六個基於Bootstrap的實用開發教程和模板示範

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.