POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/getting-started/examples.html

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