Your SlideShare is downloading. ×
Twitter Bootstrap 2.3.2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Twitter Bootstrap 2.3.2

971
views

Published on

Mark Gu from SunGard is going to provide a quick introduction on Twitter Bootstrap (v2.3.2) and how it can be used to simplify web UI design, especially at the project startup time and during …

Mark Gu from SunGard is going to provide a quick introduction on Twitter Bootstrap (v2.3.2) and how it can be used to simplify web UI design, especially at the project startup time and during prototyping. He is also going to share his experience on using Twitter Bootstrap in conjunction with ASP.NET MVC components in real-world web applications.

Published in: Technology, Art & Photos

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
971
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
62
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Twitter Bootstrap SIMPLIFYING WEB UI DESIGN M A R K G U
  • 2. What is Bootstrap? Sleek, intuitive, and powerful front-end framework for faster and easier web development
  • 3. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 4. Basic CSS Typography Code Tables Forms Buttons Images Icons <h1> <h2> <h3> <h4> <h5> <h6>
  • 5. Basic CSS Typography Code Tables Forms Buttons Images Icons <p>..</p> font-size: 14px line-height: 20px Global Defaults
  • 6. Basic CSS Typography Code Tables Forms Buttons Images Icons <p class=“lead”>..</p>
  • 7. Basic CSS Typography Code Tables Forms Buttons Images Icons <small>..</small>
  • 8. Basic CSS Typography Code Tables Forms Buttons Images Icons <strong>..</strong>
  • 9. Basic CSS Typography Code Tables Forms Buttons Images Icons <em>..</em>
  • 10. Basic CSS Typography Code Tables Forms Buttons Images Icons <p class=“text-left”>..</p>
  • 11. Basic CSS Typography Code Tables Forms Buttons Images Icons <p class=“text-center”>..</p>
  • 12. Basic CSS Typography Code Tables Forms Buttons Images Icons <p class=“text-right”>..</p>
  • 13. Basic CSS Typography Code Tables Forms Buttons Images Icons <abbr>..</abbr>
  • 14. Basic CSS Typography Code Tables Forms Buttons Images Icons <abbr class=“initialism”>..</abbr>
  • 15. Basic CSS Typography Code Tables Forms Buttons Images Icons <address>..</address>
  • 16. Basic CSS Typography Code Tables Forms Buttons Images Icons <blockquote>..</blockquote>
  • 17. Basic CSS Typography Code Tables Forms Buttons Images Icons <ul> <li>..</li> </ul>
  • 18. Basic CSS Typography Code Tables Forms Buttons Images Icons <ol> <li>..</li> </ol>
  • 19. Basic CSS Typography Code Tables Forms Buttons Images Icons <ul class=“unstyled”> <li>..</li> </ul>
  • 20. Basic CSS Typography Code Tables Forms Buttons Images Icons <dl> <dt>..</dt> <dd>..</dd> </dl>
  • 21. Basic CSS Typography Code Tables Forms Buttons Images Icons <dl class=“dl-horizontal”> <dt>..</dt> <dd>..</dd> </dl>
  • 22. Basic CSS Typography Code Tables Forms Buttons Images Icons <code>..</code>
  • 23. Basic CSS Typography Code Tables Forms Buttons Images Icons <pre>..</pre>
  • 24. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“table”>..</table>
  • 25. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“table table-striped”>..</table>
  • 26. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“table table-condensed”>..</table>
  • 27. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“table table-bordered”>..</table>
  • 28. Basic CSS Typography Code Tables Forms Buttons Images Icons <input type=“text” placeholder=“Type something...”>
  • 29. Basic CSS Typography Code Tables Forms Buttons Images Icons <select><option>...</option></select>
  • 30. Basic CSS Typography Code Tables Forms Buttons Images Icons <textarea rows=“3”></textarea>
  • 31. Basic CSS Typography Code Tables Forms Buttons Images Icons <label class=“checkbox”><input type=“checkbox” value=“”>...</label>
  • 32. Basic CSS Typography Code Tables Forms Buttons Images Icons <label class=“radio”><input type=“radio” ...>...</label>
  • 33. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 34. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 35. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 36. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 37. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 38. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 39. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 40. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 41. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 42. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 43. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 44. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 45. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 46. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 47. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 48. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn”>..</button>
  • 49. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-primary”>..</button>
  • 50. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-info”>..</button>
  • 51. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-success”>..</button>
  • 52. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-warning”>..</button>
  • 53. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-danger”>..</button>
  • 54. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-inverse”>..</button>
  • 55. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-link”>..</button>
  • 56. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn disabled”>..</button>
  • 57. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-large”>..</button>
  • 58. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-small”>..</button>
  • 59. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btn btn-mini”>..</button>
  • 60. Basic CSS Typography Code Tables Forms Buttons Images Icons <a class=“btn”>..</a>
  • 61. Basic CSS Typography Code Tables Forms Buttons Images Icons <input class=“btn” type=“button”>..</input>
  • 62. Basic CSS Typography Code Tables Forms Buttons Images Icons <img class=“img-rounded”>
  • 63. Basic CSS Typography Code Tables Forms Buttons Images Icons <img class=“img-circle”>
  • 64. Basic CSS Typography Code Tables Forms Buttons Images Icons <img class=“img-polaroid”>
  • 65. Basic CSS Typography Code Tables Forms Buttons Images Icons <i class=“icon-search”></i>
  • 66. Basic CSS Typography Code Tables Forms Buttons Images Icons <i class=“icon-user”></i>
  • 67. Basic CSS Typography Code Tables Forms Buttons Images Icons <i class=“icon-star”></i>
  • 68. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 69. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 70. Basic CSS Typography Code Tables Forms Buttons Images Icons 140 icons in sprite form, in dark gray and white
  • 71. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 72. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 73. Basic CSS Typography Code Tables Forms Buttons Images Icons
  • 74. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 75. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 76. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 77. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 78. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 79. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 80. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 81. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 82. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 83. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 84. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 85. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 86. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 87. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 88. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 89. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 90. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 91. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 92. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 93. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 94. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 95. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 96. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc <span class="label"> <span class="label label-success"> <span class="label label-warning"> <span class="label label-important"> <span class="label label-info"> <span class="label label-inverse">
  • 97. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc <span class=“badge"> <span class="badge badge-success"> <span class="badge badge-warning"> <span class="badge badge-important"> <span class="badge badge-info"> <span class="badge badge-inverse">
  • 98. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 99. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 100. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 101. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 102. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 103. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 104. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 105. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc
  • 106. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc <div class=“well">..</div>
  • 107. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc <button class=“close">&times;</button>
  • 108. Components Button Groups Dropdowns Navs Navbar & Breadcrumbs Pagination Labels & Badges Thumbnails Alerts Progress Bars Media Object Misc class=“pull-left" class=“pull-right" class=“clear-fix"
  • 109. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 110. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 111. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 112. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 113. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 114. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 115. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 116. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 117. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 118. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 119. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 120. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 121. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 122. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 123. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 124. JavaScript Transitions Modal Scrollspy Tooltip Popover Button Collapse Carousel Typeahead Affix
  • 125. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 126. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 127. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 128. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 129. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 130. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 131. Scaffolding Grid System Fluid Grid System Layout Responsive Design Fluid Grid System uses % instead of px Difference?
  • 132. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 133. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 134. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 135. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 136. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 137. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 138. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 139. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 140. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 141. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 142. Scaffolding Grid System Fluid Grid System Layout Responsive Design
  • 143. Customization Bootstrap website allows you to choose or customize: ◦ components ◦ jQuery plugins ◦ accent colors ◦ column widths for grid system ◦ base font size, font family, and line height ◦ basic control paddings, margins, backgrounds ◦ etc. You may also try various 3rd party theme rollers for Bootstrap
  • 144. Bootstrap with ASP.NET MVC Bootstrap offers a large number of CSS classes Developers may abuse some Bootstrap classes to solve style issues It’s difficult to ensure style consistency in a large project Use Display and Editor templates to wrap form controls and labels Use HtmlHelper to create additional helpers for buttons, tables, alerts, etc. Use Knockout.JS to create custom bindings that wrap jQuery plugins, e.g. modals, typeahead
  • 145. http://getbootstrap.com/2.3.2
  • 146. Questions?