pCloud Partner Program

bootstrap的datetime picker

程式技術 2015/07/14 12:21
views: 47710 times
在 bootstrap 下使用的 datetime picker 有不少, 不過簡單一點的可以參考這個:

http://www.malot.fr/bootstrap-datetimepicker/

主要是代碼短小, 使用起來也十分容易, 操作也很順手, 是個方便好用的 datetime picker.

若有在查找 bootstrap 的 datetime picker 這個會是一個不錯的選擇. (同時支援 bootstrap 2 與 bootstrap 3)

github: https://github.com/smalot/bootstrap-datetimepicker
top

可愛的ClockPicker-用時鐘方式來選取時間

程式技術/Javascript 2015/07/07 11:56
views: 85500 times
這個專案組件很可愛, 是一個時間選取器, 呈現的介面就是一個時鐘, 操作起來還蠻方便的, 另外也在手機上測試操作看看, 也是一樣方便順手, 蠻有意思的.

用戶插入圖片


有需要使用到 timepicker 的場合, 可以試看看這組 clockpicker , 很不錯.

有 bootstrap版本: http://weareoutman.github.io/clockpicker/
還有 jQuery 版本: http://weareoutman.github.io/clockpicker/jquery.html



top

在bootstrap下的影片responsive設定

程式技術 2015/06/12 23:34
views: 53024 times
在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:


在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/
top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...