jQuery 日期時間範圍選擇器 Date Range Picker (Bootstrap 外掛)
![jQuery 日期時間範圍選擇器 Date Range Picker (Bootstrap 外掛)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT4hVFD0ZrtTQZBGCGBdGZAoH5BubV4QQH309DRA52rS-ge5T6xFBlcPMc1ie5pqKWgZaySuzGva8_UijzSi7FTPBE8B4dUcNRFuT3GDFEvX60cPQ87ubb-iNSwB7DCKJ1dBZWIsY0mSBT/s780/date-range-picker.jpg)
過去網頁表單要輸入日期不容易,往往得另外裝個外掛,例如基於 jQuery 的套件 datepicker。 而現在的瀏覽器使用 HTML5 已成為標準,Input 標籤內建就有簡易的選擇日期功能,只要加入屬性 type="date" 就可使用,不必另裝外掛...
繼續閱讀全文Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕
![Bootstrap 簡易版面實作範例﹍網格+面板+表單輸入+按鈕](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyrFsGdynii3vy86BdozWSToi2twyTUvzGRxD2okMnTG_1S9Vfq-Bxw6VIeCu9XYizvZL4bwn7DoO-iVyQJw-6ZGWGNcWnjLRqy3fjSQWNu6HG3DNl_A8oP9vAL2ort2whn6q7-HFr3lBs/s780/bootstrap-webpage-layout-practice.jpg)
Bootstrap 的使用說明內容不少,份量足以出一本書,不過工具書用從頭看到尾的方式來學習,效果不見得比較好。 如同「一圖勝過千言萬語」,從範例中來學習、吸收 Bootstrap,效率會來得更快,印象也比較深刻。 本篇提供一個簡單的小範例,可以熟悉以下這些功能的用法: ...
繼續閱讀全文製作網頁表單時,如何讓複雜的配置也能完美對齊﹍Grid 網格系統
![製作網頁表單時,如何讓複雜的配置也能完美對齊﹍Grid 網格系統](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtH15_89eYWH9UkoEzYAcD0RYcWDBDRtoC0iV8pMjEwa3ZBUnJ64Bycrz_ICgdXINYamC9bD3o8PzWaJv2XE6kmFaDFGL2Zt2zcwMi4Wp3qLKa62Jnj6latl0WK4Hk2rKJ73PSDO_mvuq8/s640/complex-form-custom-grid-system.jpg)
如果熟悉「 Bootstrap 」這套 CSS 框架,那麼製作網頁表單不是什麼難事,查閱一下適合表單使用的 class 名稱,就能快速做出美觀、有一定水準的表單。 最近處理一個大型專案,需要製作許多複雜的表單,結果碰上了難題。什麼程度稱為 "複雜" 呢?可...
繼續閱讀全文Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理
![Bootstrap 3 & 4 速查表(cheat sheet)﹍中英文版整理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7SuwraGa_1uS7_Q5CT84emYgwRmMwCHncpjnOfoPNvRL9-pKQZP_SD_llLZCX7P2VIKic1H3TEQw3g4yAlmF-tsJfRd1HlrcZu69TtSBAmJACl5qFtV7HwMiAVjUPact3I2FeSVPkY2Df/s780/bootstrap-cheat-sheet.jpg)
jQuery 這套框架(framework)的誕生,是為了讓工程師寫更少的 Javascript、做更多事。同樣的,Bootstrap 的誕生,可以讓前端工程師處理版面 CSS 時節省許多時間,能專注在更重要的主題上。 Bootstrap 把網頁設計常用的元件,例如按鈕、表單...
繼續閱讀全文Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用
![Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaadu6mDuk_HhY3SN-MNpSkalT06Em6dD1eVpVJaV8l_vFfAwl3FSyM9pg3A9b-h_TDvQfBaZJl7tu3IeYiAlU0HqyGZiGl6x8xh8YyrqfZ-fMan66tTkU_VLK1KdGxz_934a7dAKalOqh/s1600/blogger-sidebar-tab-widget-bootstrap.jpg)
多年前曾寫過「 Blogger 側邊欄簡易分頁功能 」系列文章,當時做的 Tab 分頁樣式比較簡單,沒有使用任何外掛,效果算是堪用。 從當年的版面樣式也可看到歲月的痕跡,頁簽形狀用 CSS 刻得很辛苦,還有瀏覽器相容度問題。現在網頁技術太進步,有各種處理 CSS 版面的框架(...
繼續閱讀全文