Twitter bootstrap

435 views

Published on

簡單介紹 twitter bootstrap 3.0.0
A simple introduction to twitter bootstrap 3.0.0.

Published in: Technology
  • Be the first to like this

Twitter bootstrap

  1. 1. { Twitter Bootstrap http://getbootstrap.com/
  2. 2.  由 twitter 開發的 UI Framework  簡單說來就是網頁前端設計的樣板庫  讓你可以輕鬆套用,快速輕鬆製作有質感的網頁 What’s
  3. 3. Get from http://getbootstrap.com
  4. 4.  bootstrap.css  bootstrap.js ( 另外的 bootstrap.min.* 只是壓縮板的檔案) Main files
  5. 5. Grid System (<div>)
  6. 6. <h1>Heading</h1>
  7. 7. <code>inline</code>、<p>block</p>
  8. 8. <table> Tables </table>
  9. 9. <button> Buttons </buttons>
  10. 10. <form> Forms </form>
  11. 11.  Look up on official website: https://getbootstrap.com/css More templates …
  12. 12. How to use?
  13. 13.  From download package  From CDN 1. Load source
  14. 14.  <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"> </script> Load from CDN
  15. 15. 2. Check for template code Bootstrap 專屬的 class 屬性
  16. 16. Demo 3. Insert in your code
  17. 17.  Bootstrap: http://getbootstrap.com  Built With Bootstrap: http://builtwithbootstrap.com  Bootswatch: http://bootswatch.com Reference

×