不小心就進入了 bootstrap 的世界,使用起來滿方便的。中文版bootstrap的網站寫的人不喜歡被copy/paste ,所以要複製範例很麻煩,最後是可以複製的到,但很花時間,反正看英文跟看中文差不多,只好改連去英文版,英文版的方便很多:
http://getbootstrap.com/
目前bootstrap 用 v4.0 beta 的人似乎不多,還是不要當白老鼠,在網頁上面我切換到bootstrap v3.3.7 版來下載和觀看範例。
日期和時間,我使用了 Bootstrap 3 Datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/
git:
https://github.com/Eonasdan/bootstrap-datetimepicker
Example 下載:
https://github.com/twbs/bootstrap/archive/v3.3.7.zip
Examples can be found in the docs/examples/
directory.
心得是,先在自己的本機的硬碟裡放一個bootstrap 的環境,直接修改html , 測試效果OK, 再套用到server side 版型裡。
Using the framework
Starter template
Nothing but the basics: compiled CSS and JavaScript along with a container.
Bootstrap theme
Load the optional Bootstrap theme for a visually enhanced experience.
Grids
Multiple examples of grid layouts with all four tiers, nesting, and more.
Jumbotron
Build around the jumbotron with a navbar and some basic grid columns.
Narrow jumbotron
Build a more custom page by narrowing the default container and jumbotron.
Navbars in action
Navbar
Super basic template that includes the navbar along with some additional content.
Static top navbar
Super basic template with a static top navbar along with some additional content.
Fixed navbar
Super basic template with a fixed top navbar along with some additional content.
Custom components
Cover
A one-page template for building simple and beautiful home pages.
Carousel
Customize the navbar and carousel, then add some new components.
Blog
Simple two-column blog layout with custom navigation, header, and type.
Dashboard
Basic structure for an admin dashboard with fixed sidebar and navbar.
Sign-in page
Custom form layout and design for a simple sign in form.
Sticky footer
Attach a footer to the bottom of the viewport when the content is shorter than it.
Sticky footer with navbar
Attach a footer to the bottom of the viewport with a fixed navbar at the top.
Experiments
Non-responsive Bootstrap
Easily disable the responsiveness of Bootstrap per our docs.
Off-canvas
Build a toggleable off-canvas navigation menu for use with Bootstrap.