examples.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <div class="bs-docs-section">
  2. <h1 id="examples" class="page-header">Examples</h1>
  3. <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
  4. <h2 id="examples-framework">Using the framework</h2>
  5. <div class="row bs-examples">
  6. <div class="col-xs-6 col-md-4">
  7. <a class="thumbnail" href="../examples/starter-template/">
  8. <img src="../examples/screenshots/starter-template.jpg" alt="Starter template example">
  9. </a>
  10. <h3>Starter template</h3>
  11. <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
  12. </div>
  13. <div class="col-xs-6 col-md-4">
  14. <a class="thumbnail" href="../examples/theme/">
  15. <img src="../examples/screenshots/theme.jpg" alt="Bootstrap theme example">
  16. </a>
  17. <h3>Bootstrap theme</h3>
  18. <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
  19. </div>
  20. <div class="clearfix visible-xs"></div>
  21. <div class="col-xs-6 col-md-4">
  22. <a class="thumbnail" href="../examples/grid/">
  23. <img src="../examples/screenshots/grid.jpg" alt="Multiple grids example">
  24. </a>
  25. <h3>Grids</h3>
  26. <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
  27. </div>
  28. <div class="col-xs-6 col-md-4">
  29. <a class="thumbnail" href="../examples/jumbotron/">
  30. <img src="../examples/screenshots/jumbotron.jpg" alt="Jumbotron example">
  31. </a>
  32. <h3>Jumbotron</h3>
  33. <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
  34. </div>
  35. <div class="clearfix visible-xs"></div>
  36. <div class="col-xs-6 col-md-4">
  37. <a class="thumbnail" href="../examples/jumbotron-narrow/">
  38. <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="Narrow jumbotron example">
  39. </a>
  40. <h3>Narrow jumbotron</h3>
  41. <p>Build a more custom page by narrowing the default container and jumbotron.</p>
  42. </div>
  43. </div>
  44. <h2 id="examples-navbars">Navbars in action</h2>
  45. <div class="row bs-examples">
  46. <div class="col-xs-6 col-md-4">
  47. <a class="thumbnail" href="../examples/navbar/">
  48. <img src="../examples/screenshots/navbar.jpg" alt="Navbar example">
  49. </a>
  50. <h3>Navbar</h3>
  51. <p>Super basic template that includes the navbar along with some additional content.</p>
  52. </div>
  53. <div class="col-xs-6 col-md-4">
  54. <a class="thumbnail" href="../examples/navbar-static-top/">
  55. <img src="../examples/screenshots/navbar-static.jpg" alt="Static top navbar example">
  56. </a>
  57. <h3>Static top navbar</h3>
  58. <p>Super basic template with a static top navbar along with some additional content.</p>
  59. </div>
  60. <div class="clearfix visible-xs"></div>
  61. <div class="col-xs-6 col-md-4">
  62. <a class="thumbnail" href="../examples/navbar-fixed-top/">
  63. <img src="../examples/screenshots/navbar-fixed.jpg" alt="Fixed navbar example">
  64. </a>
  65. <h3>Fixed navbar</h3>
  66. <p>Super basic template with a fixed top navbar along with some additional content.</p>
  67. </div>
  68. </div>
  69. <h2 id="examples-custom">Custom components</h2>
  70. <div class="row bs-examples">
  71. <div class="col-xs-6 col-md-4">
  72. <a class="thumbnail" href="../examples/cover/">
  73. <img src="../examples/screenshots/cover.jpg" alt="A one-page template example">
  74. </a>
  75. <h3>Cover</h3>
  76. <p>A one-page template for building simple and beautiful home pages.</p>
  77. </div>
  78. <div class="col-xs-6 col-md-4">
  79. <a class="thumbnail" href="../examples/carousel/">
  80. <img src="../examples/screenshots/carousel.jpg" alt="Carousel example">
  81. </a>
  82. <h3>Carousel</h3>
  83. <p>Customize the navbar and carousel, then add some new components.</p>
  84. </div>
  85. <div class="clearfix visible-xs"></div>
  86. <div class="col-xs-6 col-md-4">
  87. <a class="thumbnail" href="../examples/blog/">
  88. <img src="../examples/screenshots/blog.jpg" alt="Blog layout example">
  89. </a>
  90. <h3>Blog</h3>
  91. <p>Simple two-column blog layout with custom navigation, header, and type.</p>
  92. </div>
  93. <div class="col-xs-6 col-md-4">
  94. <a class="thumbnail" href="../examples/dashboard/">
  95. <img src="../examples/screenshots/dashboard.jpg" alt="Dashboard example">
  96. </a>
  97. <h3>Dashboard</h3>
  98. <p>Basic structure for an admin dashboard with fixed sidebar and navbar.</p>
  99. </div>
  100. <div class="clearfix visible-xs"></div>
  101. <div class="col-xs-6 col-md-4">
  102. <a class="thumbnail" href="../examples/signin/">
  103. <img src="../examples/screenshots/sign-in.jpg" alt="Sign-in page example">
  104. </a>
  105. <h3>Sign-in page</h3>
  106. <p>Custom form layout and design for a simple sign in form.</p>
  107. </div>
  108. <div class="col-xs-6 col-md-4">
  109. <a class="thumbnail" href="../examples/justified-nav/">
  110. <img src="../examples/screenshots/justified-nav.jpg" alt="Justified nav example">
  111. </a>
  112. <h3>Justified nav</h3>
  113. <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
  114. </div>
  115. <div class="clearfix visible-xs"></div>
  116. <div class="col-xs-6 col-md-4">
  117. <a class="thumbnail" href="../examples/sticky-footer/">
  118. <img src="../examples/screenshots/sticky-footer.jpg" alt="Sticky footer example">
  119. </a>
  120. <h3>Sticky footer</h3>
  121. <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
  122. </div>
  123. <div class="col-xs-6 col-md-4">
  124. <a class="thumbnail" href="../examples/sticky-footer-navbar/">
  125. <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="Sticky footer with navbar example">
  126. </a>
  127. <h3>Sticky footer with navbar</h3>
  128. <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
  129. </div>
  130. </div>
  131. <h2 id="examples-experiments">Experiments</h2>
  132. <div class="row bs-examples">
  133. <div class="col-xs-6 col-md-4">
  134. <a class="thumbnail" href="../examples/non-responsive/">
  135. <img src="../examples/screenshots/non-responsive.jpg" alt="Non-responsive example">
  136. </a>
  137. <h3>Non-responsive Bootstrap</h3>
  138. <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
  139. </div>
  140. <div class="col-xs-6 col-md-4">
  141. <a class="thumbnail" href="../examples/offcanvas/">
  142. <img src="../examples/screenshots/offcanvas.jpg" alt="Off-canvas navigation example">
  143. </a>
  144. <h3>Off-canvas</h3>
  145. <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
  146. </div>
  147. </div>
  148. </div>