diff options
Diffstat (limited to 'tests/components.html')
| -rw-r--r-- | tests/components.html | 166 |
1 files changed, 91 insertions, 75 deletions
diff --git a/tests/components.html b/tests/components.html index b4234e94..836260f0 100644 --- a/tests/components.html +++ b/tests/components.html @@ -12,13 +12,15 @@ <div class="navbar navbar-fixed-top"> <div class="container"> - <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> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <div class="nav-collapse collapse" id="navbar-main"> + <div class="nav-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> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <div class="navbar-collapse collapse" id="navbar-main"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a> @@ -57,7 +59,7 @@ </li> </ul> - <ul class="nav navbar-nav pull-right"> + <ul class="nav navbar-nav navbar-right"> <li><a href="http://builtwithbootstrap.com/" target="_blank">Built With Bootstrap</a></li> <li><a href="https://wrapbootstrap.com/?ref=bsw" target="_blank">WrapBootstrap</a></li> </ul> @@ -862,31 +864,31 @@ </div> <h2 id="buttons-sizes">Button sizes</h2> - <p>Fancy larger or smaller buttons? Add <code>.btn-large</code> or <code>.btn-small</code> for additional sizes.</p> + <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p> <div class="bs-example"> <p> - <button type="button" class="btn btn-primary btn-large">Large button</button> - <button type="button" class="btn btn-default btn-large">Large button</button> + <button type="button" class="btn btn-primary btn-lg">Large button</button> + <button type="button" class="btn btn-default btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> <button type="button" class="btn btn-default">Default button</button> </p> <p> - <button type="button" class="btn btn-primary btn-small">Small button</button> - <button type="button" class="btn btn-default btn-small">Small button</button> + <button type="button" class="btn btn-primary btn-sm">Small button</button> + <button type="button" class="btn btn-default btn-sm">Small button</button> </p> <p> - <button type="button" class="btn btn-primary btn-mini">Mini button</button> - <button type="button" class="btn btn-default btn-mini">Mini button</button> + <button type="button" class="btn btn-primary btn-xs">Mini button</button> + <button type="button" class="btn btn-default btn-xs">Mini button</button> </p> </div> <p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p> <div class="bs-example"> <div class="well" style="max-width: 400px; margin: 0 auto 10px;"> - <button type="button" class="btn btn-primary btn-large btn-block">Block level button</button> - <button type="button" class="btn btn-default btn-large btn-block">Block level button</button> + <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button> + <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> </div> </div> @@ -897,15 +899,15 @@ <h3>Button element</h3> <p>Add the <code>disabled</code> attribute to <code><button></code> buttons.</p> <p class="bs-example"> - <button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button> - <button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button> + <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary button</button> + <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button> </p> <h3>Anchor element</h3> <p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p> <p class="bs-example"> - <a href="http://getbootstrap.com/css/#" class="btn btn-primary btn-large disabled">Primary link</a> - <a href="http://getbootstrap.com/css/#" class="btn btn-default btn-large disabled">Link</a> + <a href="http://getbootstrap.com/css/#" class="btn btn-primary btn-lg disabled">Primary link</a> + <a href="http://getbootstrap.com/css/#" class="btn btn-default btn-lg disabled">Link</a> </p> @@ -1228,7 +1230,7 @@ </ul> </div><!-- /btn-group --> <div class="btn-group"> - <button class="btn btn-default btn-small dropdown-toggle" type="button" data-toggle="dropdown"> + <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu"> @@ -1623,14 +1625,14 @@ <div class="bs-example"> <div class="navbar"> - <form class="navbar-form pull-left"> + <form class="navbar-form navbar-left"> <input type="text" class="form-control" style="width: 200px;"> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <div class="navbar"> - <form class="navbar-form pull-left"> + <form class="navbar-form navbar-left"> <select name="" class="form-control" style="width: 200px;"> <option value="1">1</option> <option value="2">2</option> @@ -1642,7 +1644,7 @@ </div> <div class="navbar"> - <form class="navbar-form pull-left"> + <form class="navbar-form navbar-left"> <input type="text" class="form-control" style="width: 200px;"> <input type="checkbox"> <button type="submit" class="btn btn-default">Submit</button> @@ -1650,7 +1652,7 @@ </div> <div class="navbar"> - <form class="navbar-form pull-left"> + <form class="navbar-form navbar-left"> <input type="text" class="form-control" style="width: 200px;"> <label class="checkbox-inline"> <input type="checkbox"> Remember me @@ -1708,17 +1710,19 @@ <h2 id="navbar-responsive">Responsive navbar</h2> - <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p> + <p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.navbar-collapse.collapse</code>, and add the navbar toggle button, <code>.navbar-toggle</code>.</p> <div class="bs-example"> <div class="navbar"> <div class="container"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Title</a> - <div class="nav-collapse collapse navbar-responsive-collapse"> + <div class="nav-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> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Title</a> + </div> + <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1736,10 +1740,10 @@ </ul> </li> </ul> - <form class="navbar-form pull-left"> + <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> - <ul class="nav navbar-nav pull-right"> + <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> @@ -1752,7 +1756,7 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> + </div><!-- /.navbar-collapse --> </div><!-- /.container --> </div><!-- /.navbar --> </div><!-- /example --> @@ -1768,13 +1772,15 @@ <div class="bs-example"> <div class="navbar navbar-inverse"> <div class="container"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Title</a> - <div class="nav-collapse collapse navbar-inverse-collapse"> + <div class="nav-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> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Title</a> + </div> + <div class="navbar-collapse collapse navbar-inverse-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> @@ -1792,10 +1798,10 @@ </ul> </li> </ul> - <form class="navbar-form pull-left"> + <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> - <ul class="nav navbar-nav pull-right"> + <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> @@ -1808,7 +1814,7 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> + </div><!-- /.navbar-collapse --> </div><!-- /.container --> </div><!-- /.navbar --> </div><!-- /example --> @@ -1976,7 +1982,7 @@ <h3>Available variations</h3> <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p> <div class="bs-example"> - <span class="label">Default</span> + <span class="label label-default">Default</span> <span class="label label-success">Success</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> @@ -2050,7 +2056,7 @@ <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> - <p><a class="btn btn-primary btn-large">Learn more</a></p> + <p><a class="btn btn-primary btn-lg">Learn more</a></p> </div> </div> @@ -2166,28 +2172,18 @@ </div> </div> - <h3 id="alerts-block">Block alerts</h3> - <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> - <div class="bs-example"> - <div class="alert alert-block"> - <button type="button" class="close" data-dismiss="alert">×</button> - <h4>Warning!</h4> - <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> - </div> - </div> - <h3 id="alerts-alternatives">Contextual alternatives</h3> <p>Add optional classes to change an alert's connotation.</p> <div class="bs-example"> - <div class="alert alert-danger"> + <div class="alert alert-dismissable alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div> - <div class="alert alert-success"> + <div class="alert alert-dismissable alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Well done!</strong> You successfully read this important alert message. </div> - <div class="alert alert-info"> + <div class="alert alert-dismissable alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div> @@ -2196,15 +2192,15 @@ <h3 id="alerts-links">Links in alerts</h3> <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p> <div class="bs-example"> - <div class="alert alert-danger"> + <div class="alert alert-dismissable alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. </div> - <div class="alert alert-success"> + <div class="alert alert-dismissable alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. </div> - <div class="alert alert-info"> + <div class="alert alert-dismissable alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. </div> @@ -2487,7 +2483,9 @@ <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p> <div class="bs-example"> <div class="panel"> - Basic panel example + <div class="panel-body"> + Basic panel example + </div> </div> </div> @@ -2496,13 +2494,17 @@ <div class="bs-example"> <div class="panel"> <div class="panel-heading">Panel heading</div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> </div> @@ -2510,7 +2512,9 @@ <p>Wrap buttons or secondary text in <code>.panel-footer</code>.</p> <div class="bs-example"> <div class="panel"> - Panel content + <div class="panel-body"> + Panel content + </div> <div class="panel-footer">Panel footer</div> </div> </div> @@ -2522,31 +2526,41 @@ <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> - Panel content + <div class="panel-body"> + Panel content + </div> </div> </div> @@ -2556,7 +2570,9 @@ <div class="panel"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> - <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <div class="panel-body"> + <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> <!-- List group --> <ul class="list-group list-group-flush"> |