diff options
Diffstat (limited to 'tests/components.html')
| -rw-r--r-- | tests/components.html | 82 |
1 files changed, 73 insertions, 9 deletions
diff --git a/tests/components.html b/tests/components.html index 836260f0..5663c45a 100644 --- a/tests/components.html +++ b/tests/components.html @@ -12,7 +12,7 @@ <div class="navbar navbar-fixed-top"> <div class="container"> - <div class="nav-header"> + <div class="navbar-header"> <a href="../" class="navbar-brand">Bootswatch</a> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="icon-bar"></span> @@ -1589,7 +1589,9 @@ <p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p> <div class="bs-example"> <div class="navbar"> - <a class="navbar-brand" href="#">Title</a> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Title</a> + </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1604,7 +1606,9 @@ <p>A simple link to show your brand or project name only requires an anchor tag.</p> <div class="bs-example"> <div class="navbar"> - <a class="navbar-brand" href="#">Title</a> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Title</a> + </div> </div> </div><!-- /example --> @@ -1667,7 +1671,9 @@ <p>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p> <div class="bs-example"> <div class="navbar"> - <a href="#" class="navbar-brand">Brand</a> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Brand</a> + </div> <button type="button" class="btn btn-default navbar-btn">Sign in</button> </div> </div> @@ -1676,7 +1682,9 @@ <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p> <div class="bs-example"> <div class="navbar"> - <a href="#" class="navbar-brand">Brand</a> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Brand</a> + </div> <p class="navbar-text">Signed in as Mark Otto</p> </div> </div> @@ -1685,7 +1693,9 @@ <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> <div class="bs-example"> <div class="navbar"> - <a href="#" class="navbar-brand">Brand</a> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Brand</a> + </div> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> </div> </div> @@ -1698,7 +1708,9 @@ <div class="bs-example bs-navbar-top-example"> <div class="navbar navbar-static-top" style="margin: -1px -1px 0;"> <div class="container" style="width: auto;"> - <a class="navbar-brand" href="#">Title</a> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Title</a> + </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1714,7 +1726,7 @@ <div class="bs-example"> <div class="navbar"> <div class="container"> - <div class="nav-header"> + <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -1772,7 +1784,7 @@ <div class="bs-example"> <div class="navbar navbar-inverse"> <div class="container"> - <div class="nav-header"> + <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -2620,6 +2632,58 @@ </div> </div> + + + <!-- Modal + ================================================== --> + <div class="bs-docs-section"> + <div class="page-header"> + <h1 id="modals">Modals</h1> + </div> + + <h3>Live demo</h3> + <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> + <!-- sample modal content --> + <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> + </div> + <div class="modal-body"> + <h4>Text in a modal</h4> + <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> + + <h4>Popover in a modal</h4> + <p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p> + + <h4>Tooltips in a modal</h4> + <p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p> + + <hr> + + <h4>Overflowing text to show scroll behavior</h4> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + + </div><!-- /.modal-content --> + </div><!-- /.modal-dialog --> + </div><!-- /.modal --> + + <div class="bs-example" style="padding-bottom: 24px;"> + <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> + </div><!-- /example --> + + </div> <footer> |