diff options
| author | Mark Otto <markdotto@gmail.com> | 2018-07-16 09:46:36 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2018-07-16 09:46:36 +0300 |
| commit | 4f87141092732eea9a50aa68b0d668c7e8223ccc (patch) | |
| tree | cb5b7f90f4c4c40f22448f99f133ed735fb980b7 | |
| parent | 6e5a4209fc2e0628102a9af0a2c91c04d1da095e (diff) | |
stub out kitchen sink
| -rw-r--r-- | default/index.html | 196 |
1 files changed, 194 insertions, 2 deletions
diff --git a/default/index.html b/default/index.html index ba97848..406e0c6 100644 --- a/default/index.html +++ b/default/index.html @@ -2,7 +2,199 @@ <head> <link rel="stylesheet" href="default.css"> </head> - <body class="p-5"> - Hello, world + <body> + <div class="p-5 text-white bg-primary"> + <div class="py-md-5" style="max-width: 768px;"> + <h1>Bootstrap with npm</h1> + <p>Success, you've installed Bootstrap via npm! This demo page is the "kitchen sink" of Bootstrap, a place to see all our layout, styles, and components for you to quickly visualize any changes you wish to test.</p> + </div> + </div> + + <div class="p-5 border-bottom"> + <h2>Grid</h2> + <p>Nothing special here, just container, row, and columns.</p> + <div class="container-fluid"> + <div class="row"> + <div class="col-sm py-3 bg-light border"> + One of three columns + </div> + <div class="col-sm py-3 bg-light border"> + One of three columns + </div> + <div class="col-sm py-3 bg-light border"> + One of three columns + </div> + </div> + </div> + </div> + + <div class="p-5 border-bottom"> + <h2>Type</h2> + <div class="row"> + <div class="col-md"> + <h3>Unordered list</h3> + <ul> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit + <ul> + <li>Phasellus iaculis neque</li> + <li>Purus sodales ultricies</li> + <li>Vestibulum laoreet porttitor sem</li> + <li>Ac tristique libero volutpat at</li> + </ul> + </li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ul> + </div> + <div class="col-md"> + <h3>Ordered list</h3> + <ol> + <li>Lorem ipsum dolor sit amet</li> + <li>Consectetur adipiscing elit</li> + <li>Integer molestie lorem at massa</li> + <li>Facilisis in pretium nisl aliquet</li> + <li>Nulla volutpat aliquam velit</li> + <li>Faucibus porta lacus fringilla vel</li> + <li>Aenean sit amet erat nunc</li> + <li>Eget porttitor lorem</li> + </ol> + </div> + <div class="col-md"> + <h3>Description list</h3> + <dl> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + <dt>Euismod</dt> + <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd> + <dd>Donec id elit non mi porta gravida at eget metus.</dd> + <dt>Malesuada porta</dt> + <dd>Etiam porta sem malesuada magna mollis euismod.</dd> + </dl> + </div> + </div> + + <h3>Tables</h3> + <table> + <caption> + This is an example table, and this is its caption to describe the contents. + </caption> + <thead> + <tr> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> + </table> + + <h3>Code</h3> + </div> + + <div class="p-5 border-bottom"> + <h2>Media</h2> + + <h3>Images</h3> + + <h3>Figures</h3> + </div> + + <div class="p-5 border-bottom"> + <h2>Alert</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Badge</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Breadcrumb</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Buttons</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Card</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Carousel</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Collapse</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Dropdown</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Forms</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Input group</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Jumbotron</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>List group</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Modal</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Navs</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Navbar</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Pagination</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Popover & Tooltip</h2> + </div> + + <div class="p-5 border-bottom"> + <h2>Progress</h2> + </div> + </body> </html> |