Twitter bootstrap
Upcoming SlideShare
Loading in...5
×
 

Twitter bootstrap

on

  • 393 views

簡單介紹 twitter bootstrap 3.0.0

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

Statistics

Views

Total Views
393
Views on SlideShare
393
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Twitter bootstrap Twitter bootstrap Presentation Transcript

  • { Twitter Bootstrap http://getbootstrap.com/
  •  由 twitter 開發的 UI Framework  簡單說來就是網頁前端設計的樣板庫  讓你可以輕鬆套用,快速輕鬆製作有質感的網頁 What’s
  • Get from http://getbootstrap.com
  •  bootstrap.css  bootstrap.js ( 另外的 bootstrap.min.* 只是壓縮板的檔案) Main files
  • Grid System (<div>)
  • <h1>Heading</h1>
  • <code>inline</code>、<p>block</p>
  • <table> Tables </table>
  • <button> Buttons </buttons>
  • <form> Forms </form>
  •  Look up on official website: https://getbootstrap.com/css More templates …
  • How to use?
  •  From download package  From CDN 1. Load source
  •  <!-- 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
  • 2. Check for template code Bootstrap 專屬的 class 屬性
  • Demo 3. Insert in your code
  •  Bootstrap: http://getbootstrap.com  Built With Bootstrap: http://builtwithbootstrap.com  Bootswatch: http://bootswatch.com Reference