Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducing Twitter Bootstrap                           Hiroaki Sano             Mail: hiroaki.sano.9stories@gmail.com    ...
$ whoami• Hiroaki Sano• Engineer at CyberAgent, Inc.      – Ameba services(http://www.ameba.jp/)      – H/W provisioning, ...
I cant make a cool web pages...2012/05/10
Thats horrible...                            But Im not a designer2012/05/10
Twitter Bootstrap2012/05/10
CSS Framework from Twitter                http://twitter.github.com/bootstrap/index.html• Apache License v2.0.• Latest ver...
Other CSS Frameworks• 99lime      – http://www.99lime.com/• BlueTrip      – http://bluetrip.org/• YAML 4      – http://www...
Components of Twitter Bootstrap2012/05/10
Buttons2012/05/10
Navigation2012/05/10
Labels
Pagination
Progress bars
And more UI components                  http://twitter.github.com/bootstrap/components.html2012/05/10
Try !2012/05/10
<html><head> <title>sample</title></head><body> <h2>table and form</h2> <form method="post" action="/do">  <table border=1...
<html><head> <title>sample</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css"></head><body>...
Before / After2012/05/10
Thank you !• Easily improve the appearance of your  webpages• Prototype, your own tools, your websites, etc               ...
Upcoming SlideShare
Loading in …5
×

Introducing twitter bootstrap

1,823 views

Published on

2011/5/10に開催されたEnglish Casual#1の発表資料。英語はいろいろアレです。

Published in: Technology
  • Be the first to comment

Introducing twitter bootstrap

  1. 1. Introducing Twitter Bootstrap Hiroaki Sano Mail: hiroaki.sano.9stories@gmail.com Website: http://hiroakis.com/ Twitter: @la_luna_azul2012/05/10
  2. 2. $ whoami• Hiroaki Sano• Engineer at CyberAgent, Inc. – Ameba services(http://www.ameba.jp/) – H/W provisioning, server administration, web opts.• I love traveling abroad by solo ! – Germany, Turkey, Vietnam, Mexico, Ecuador and more – But my foreign language skill is :-(2012/05/10
  3. 3. I cant make a cool web pages...2012/05/10
  4. 4. Thats horrible... But Im not a designer2012/05/10
  5. 5. Twitter Bootstrap2012/05/10
  6. 6. CSS Framework from Twitter http://twitter.github.com/bootstrap/index.html• Apache License v2.0.• Latest version: 2.0.3.2012/05/10
  7. 7. Other CSS Frameworks• 99lime – http://www.99lime.com/• BlueTrip – http://bluetrip.org/• YAML 4 – http://www.yaml.de/2012/05/10
  8. 8. Components of Twitter Bootstrap2012/05/10
  9. 9. Buttons2012/05/10
  10. 10. Navigation2012/05/10
  11. 11. Labels
  12. 12. Pagination
  13. 13. Progress bars
  14. 14. And more UI components http://twitter.github.com/bootstrap/components.html2012/05/10
  15. 15. Try !2012/05/10
  16. 16. <html><head> <title>sample</title></head><body> <h2>table and form</h2> <form method="post" action="/do"> <table border=1> <tr><th>id</th><th>name</th><th>select</th></tr> <tr><td>1</td><td>ore</td><td><input type="checkbox" name="check1"></td></tr> <tr><td>2</td><td>omae</td><td><input type="checkbox" name="check2"></td></tr> <tr><td>3</td><td>watashi</td><td><input type="checkbox" name="check3"></td></tr> <tr><td>4</td><td>anata</td><td><input type="checkbox" name="check4"></td></tr> </table> <input type="submit" value="submit"> <input type="reset" value="reset"> </form></body></html> 2012/05/10
  17. 17. <html><head> <title>sample</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css"></head><body> <h2>table and form</h2> <div class="span4"> <form method="post" action="/do"> <table class="table table-striped table-bordered table-condensed"> <tr><th>id</th><th>name</th><th>select</th></tr> <tr><td>1</td><td>ore</td><td><input type="checkbox" name="check1"></td></tr> <tr><td>2</td><td>omae</td><td><input type="checkbox" name="check2"></td></tr> <tr><td>3</td><td>watashi</td><td><input type="checkbox" name="check3"></td></tr> <tr><td>4</td><td>anata</td><td><input type="checkbox" name="check4"></td></tr> </table> <input class="btn" type="submit" value="submit"> <input class="btn" type="reset" value="reset"> </form> </div></body></html> 2012/05/10
  18. 18. Before / After2012/05/10
  19. 19. Thank you !• Easily improve the appearance of your webpages• Prototype, your own tools, your websites, etc My vocabulary is limited…2012/05/10

×