Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webフレームワークを使う - Twitter Boostrap

Webフレームワークを使う - Twitter Boostrap

Atsushi Tadokoro

May 28, 2014
Tweet

More Decks by Atsushi Tadokoro

Other Decks in Technology

Transcript

  1. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ;JQϑΝΠϧΛղౚ͢ΔͱɺҎԼͷΑ͏ͳ಺༰ʹͳ͍ͬͯΔ ‣ ͜ͷʮCPPUTUSBQʯϑΥϧμʹϖʔδΛ࡞੒͍ͯ͘͠ bootstrap/ ├── css/ │ ├──

    bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
  2. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ Ͱ͸ૣ଎ɺ#PPUTUSBQΛೖΕͨ)5.-ͷϕʔεΛ࡞੒ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> ! </body> </html>
  3. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ࣍ʹɺ#PPUTUSBQͷίϯςϯτશମΛɺDMBTTDPOUBJOFSͷEJWཁૉͰғΉ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> </div> </body> </html>
  4. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ )Ͱݟग़͠Λͭͬͯ͘ΈΔ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> </div> </body> </html>
  5. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͨͱ͑͹ɺ  ͷίϥϜΛ૊ΜͰΈΔ ‣ ·ͣίϥϜͷઌ಄ΛEJWDMBTTSPXͰғΉ <!DOCTYPE html> <html>

    <head> <meta charset="utf-8"> <title>Bootstrap Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrapͷςετ</h1> <div class="row"> </div> </div> </body> </html>
  6. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ EJWDMBTTSPXͷதʹ ‣ ͭͷEJWDMBTTTQBOΛೖΕΔ ... ! <div class="row"> <div

    class="span4"> </div> <div class="span4"> </div> <div class="span4"> </div> </div> ! ...
  7. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ͦΕͧΕͷEJWDMBTTTQBOͷதʹɺ಺༰Λهड़ ... ! <div class="row"> <div class="span4"> <h2>Span

    4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> <div class="span4"> <h2>Span 4</h2> <p> ͜ͷίϥϜ͸ɺ4ͭͷεύϯ... </p> </div> </div> ! ...
  8. 5XJUUFS#PPUTUSBQΛ࢖ͬͯΈΔ ‣ ๯಄ͷ)ΛΑΓϔομʔΒ͘͠ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap

    Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="hero-unit"> <h1>Hello Twitter Bootstrap!!</h1> <p>͜ͷϖʔδ͸ɺTwitter BootstrapΛར༻ͯ͠࡞੒ͨ͠ϖʔδͷαϯϓϧͰ͢ɻ</p> <p><a class="btn btn-primary btn-large">΋ͬͱৄ͘͠</a></p> </div> ...