Twitter Bootstrap 2.3.2
•Download as PPTX, PDF•
4 likes•1,501 views
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.
Recommended
More Related Content
Similar to Twitter Bootstrap 2.3.2
Similar to Twitter Bootstrap 2.3.2 (20)
Recently uploaded
Recently uploaded (20)
Twitter Bootstrap 2.3.2
- 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
- 5. Basic CSS Typography Code Tables Forms Buttons Images Icons <p>..</p> font-size: 14px line-height: 20px Global Defaults
- 19. Basic CSS Typography Code Tables Forms Buttons Images Icons <ul class=“unstyled”> <li>..</li> </ul>
- 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>
- 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>
- 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>
- 61. Basic CSS Typography Code Tables Forms Buttons Images Icons <input class=“btn” type=“button”>..</input>
- 70. Basic CSS Typography Code Tables Forms Buttons Images Icons 140 icons in sprite form, in dark gray and white
- 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">×</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
- 146. Questions?