Downloaded 80 times
Uploaded byMark Gu
Twitter Bootstrap 2.3.2
Bootstrap is a powerful front-end framework designed for faster and easier web development, featuring basic CSS components like typography, tables, forms, and buttons. It provides customizable options for a wide range of UI elements, allowing developers to create responsive layouts and interface components. The framework also supports JavaScript transitions and grid systems for responsive design.
Twitter Bootstrap 2.3.2
- 1. Twitter Bootstrap SIMPLIFYING WEBUI 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.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“tabletable-striped”>..</table>
- 26. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“tabletable-condensed”>..</table>
- 27. Basic CSS Typography Code Tables Forms Buttons Images Icons <table class=“tabletable-bordered”>..</table>
- 28. Basic CSS Typography Code Tables Forms Buttons Images Icons <input type=“text”placeholder=“Type something...”>
- 29.
- 30.
- 31. Basic CSS Typography Code Tables Forms Buttons Images Icons <label class=“checkbox”><inputtype=“checkbox” value=“”>...</label>
- 32. Basic CSS Typography Code Tables Forms Buttons Images Icons <label class=“radio”><inputtype=“radio” ...>...</label>
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-primary”>..</button>
- 50. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-info”>..</button>
- 51. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-success”>..</button>
- 52. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-warning”>..</button>
- 53. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-danger”>..</button>
- 54. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-inverse”>..</button>
- 55. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-link”>..</button>
- 56. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btndisabled”>..</button>
- 57. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-large”>..</button>
- 58. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-small”>..</button>
- 59. Basic CSS Typography Code Tables Forms Buttons Images Icons <button class=“btnbtn-mini”>..</button>
- 60.
- 61. Basic CSS Typography Code Tables Forms Buttons Images Icons <input class=“btn”type=“button”>..</input>
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. Basic CSS Typography Code Tables Forms Buttons Images Icons 140 iconsin sprite form, in dark gray and white
- 71.
- 72.
- 73.
- 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.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 126. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 127. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 128. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 129. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 130. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 131. Scaffolding Grid System Fluid GridSystem Layout Responsive Design Fluid Grid System uses % instead of px Difference?
- 132. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 133. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 134. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 135. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 136. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 137. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 138. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 139. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 140. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 141. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 142. Scaffolding Grid System Fluid GridSystem Layout Responsive Design
- 143. Customization Bootstrap website allowsyou 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.NETMVC 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.
- 146.