diff options
Diffstat (limited to 'superhero/index.html')
| -rw-r--r-- | superhero/index.html | 378 |
1 files changed, 214 insertions, 164 deletions
diff --git a/superhero/index.html b/superhero/index.html index d8a600d5..1008426e 100644 --- a/superhero/index.html +++ b/superhero/index.html @@ -127,7 +127,7 @@ <h1 id="navbar">Navbar</h1> </div> - <div class="bs-example"> + <div class="bs-component"> <div class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> @@ -170,10 +170,11 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> - </div><!-- /.navbar --> - + </div> + </div> + </div> + <div class="bs-component"> <div class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> @@ -216,8 +217,8 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> - </div><!-- /.navbar --> + </div> + </div> </div><!-- /example --> </div> @@ -239,33 +240,29 @@ <div class="row"> <div class="col-lg-6"> - <div class="bs-example"> - <p> - <button type="button" class="btn btn-default">Default</button> - <button type="button" class="btn btn-primary">Primary</button> - <button type="button" class="btn btn-success">Success</button> - <button type="button" class="btn btn-info">Info</button> - <button type="button" class="btn btn-warning">Warning</button> - <button type="button" class="btn btn-danger">Danger</button> - <button type="button" class="btn btn-link">Link</button> - </p> - </div> - - <div class="bs-example"> - <p> - <button type="button" class="btn btn-default disabled">Default</button> - <button type="button" class="btn btn-primary disabled">Primary</button> - <button type="button" class="btn btn-success disabled">Success</button> - <button type="button" class="btn btn-info disabled">Info</button> - <button type="button" class="btn btn-warning disabled">Warning</button> - <button type="button" class="btn btn-danger disabled">Danger</button> - <button type="button" class="btn btn-link disabled">Link</button> - </p> - </div> - - - <div class="bs-example" style="margin-bottom: 15px;"> - <div class="btn-toolbar" style="margin: 0;"> + <p class="bs-component"> + <button type="button" class="btn btn-default">Default</button> + <button type="button" class="btn btn-primary">Primary</button> + <button type="button" class="btn btn-success">Success</button> + <button type="button" class="btn btn-info">Info</button> + <button type="button" class="btn btn-warning">Warning</button> + <button type="button" class="btn btn-danger">Danger</button> + <button type="button" class="btn btn-link">Link</button> + </p> + + <p class="bs-component"> + <button type="button" class="btn btn-default disabled">Default</button> + <button type="button" class="btn btn-primary disabled">Primary</button> + <button type="button" class="btn btn-success disabled">Success</button> + <button type="button" class="btn btn-info disabled">Info</button> + <button type="button" class="btn btn-warning disabled">Warning</button> + <button type="button" class="btn btn-danger disabled">Danger</button> + <button type="button" class="btn btn-link disabled">Link</button> + </p> + + + <div style="margin-bottom: 15px;"> + <div class="btn-toolbar bs-component" style="margin: 0;"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> @@ -276,7 +273,8 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div> + <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> @@ -287,7 +285,8 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div> + <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> @@ -298,7 +297,8 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div> + <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> @@ -309,7 +309,8 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div> + <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> @@ -320,30 +321,26 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> - </div><!-- /btn-toolbar --> + </div> + </div> </div> - <div class="bs-example"> - <p> - <button type="button" class="btn btn-primary btn-lg">Large button</button> - <button type="button" class="btn btn-primary">Default button</button> - <button type="button" class="btn btn-primary btn-sm">Small button</button> - <button type="button" class="btn btn-primary btn-xs">Mini button</button> - </p> - </div> + <p class="bs-component"> + <button type="button" class="btn btn-primary btn-lg">Large button</button> + <button type="button" class="btn btn-primary">Default button</button> + <button type="button" class="btn btn-primary btn-sm">Small button</button> + <button type="button" class="btn btn-primary btn-xs">Mini button</button> + </p> </div> <div class="col-lg-6"> - <div class="bs-example"> - <p> - <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> - </p> - </div> + <p class="bs-component"> + <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> + </p> - <div class="bs-example" style="margin-bottom: 15px;"> + <div class="bs-component" style="margin-bottom: 15px;"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> @@ -351,7 +348,7 @@ </div> </div> - <div class="bs-example" style="margin-bottom: 15px;"> + <div class="bs-component" style="margin-bottom: 15px;"> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> @@ -359,14 +356,15 @@ <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> </div> + <div class="btn-group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> + <div class="btn-group"> <button type="button" class="btn btn-default">8</button> - <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown @@ -382,7 +380,7 @@ </div> </div> - <div class="bs-example"> + <div class="bs-component"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> @@ -410,20 +408,18 @@ <div class="row"> <div class="col-lg-4"> - <div class="bs-example bs-example-type"> + <div class="bs-component"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> - </div> - <div class="bs-example"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> </div> <div class="col-lg-4"> - <div class="bs-example"> + <div class="bs-component"> <h2>Example body text</h2> <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> @@ -434,9 +430,8 @@ </div> <div class="col-lg-4"> - - <h2>Emphasis classes</h2> - <div class="bs-example"> + <div class="bs-component"> + <h2>Emphasis classes</h2> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> @@ -457,16 +452,20 @@ </div> <div class="row"> <div class="col-lg-6"> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <small>Someone famous in <cite title="Source Title">Source Title</cite></small> - </blockquote> + <div class="bs-component"> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <small>Someone famous in <cite title="Source Title">Source Title</cite></small> + </blockquote> + </div> </div> <div class="col-lg-6"> - <blockquote class="pull-right"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <small>Someone famous in <cite title="Source Title">Source Title</cite></small> - </blockquote> + <div class="bs-component"> + <blockquote class="pull-right"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <small>Someone famous in <cite title="Source Title">Source Title</cite></small> + </blockquote> + </div> </div> </div> </div> @@ -481,7 +480,7 @@ <h1 id="tables">Tables</h1> </div> - <div class="bs-example table-responsive"> + <div class="bs-component"> <table class="table table-striped table-hover "> <thead> <tr> @@ -554,8 +553,8 @@ <div class="row"> <div class="col-lg-6"> - <div class="well"> - <form class="bs-example form-horizontal"> + <div class="well bs-component"> + <form class="form-horizontal"> <fieldset> <legend>Legend</legend> <div class="form-group"> @@ -631,39 +630,47 @@ </div> <div class="col-lg-4 col-lg-offset-1"> - <form class="bs-example"> + <form class="bs-component"> <div class="form-group"> <label class="control-label" for="focusedInput">Focused input</label> <input class="form-control" id="focusedInput" type="text" value="This is focused..."> </div> + <div class="form-group"> <label class="control-label" for="disabledInput">Disabled input</label> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled=""> </div> + <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input warning</label> <input type="text" class="form-control" id="inputWarning"> </div> + <div class="form-group has-error"> <label class="control-label" for="inputError">Input error</label> <input type="text" class="form-control" id="inputError"> </div> + <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input success</label> <input type="text" class="form-control" id="inputSuccess"> </div> + <div class="form-group"> <label class="control-label" for="inputLarge">Large input</label> <input class="form-control input-lg" type="text" id="inputLarge"> </div> + <div class="form-group"> <label class="control-label" for="inputDefault">Default input</label> <input type="text" class="form-control" id="inputDefault"> </div> + <div class="form-group"> <label class="control-label" for="inputSmall">Small input</label> <input class="form-control input-sm" type="text" id="inputSmall"> </div> + <div class="form-group"> <label class="control-label">Input addons</label> <div class="input-group"> @@ -695,7 +702,7 @@ <div class="row"> <div class="col-lg-4"> <h2 id="nav-tabs">Tabs</h2> - <div class="bs-example"> + <div class="bs-component"> <ul class="nav nav-tabs" style="margin-bottom: 15px;"> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> @@ -729,7 +736,7 @@ </div> <div class="col-lg-4"> <h2 id="nav-pills">Pills</h2> - <div class="bs-example"> + <div class="bs-component"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> @@ -749,7 +756,7 @@ </ul> </div> <br> - <div class="bs-example"> + <div class="bs-component"> <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> @@ -771,14 +778,16 @@ </div> <div class="col-lg-4"> <h2 id="nav-breadcrumbs">Breadcrumbs</h2> - <div class="bs-example"> + <div class="bs-component"> <ul class="breadcrumb"> <li class="active">Home</li> </ul> + <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li class="active">Library</li> </ul> + <ul class="breadcrumb" style="margin-bottom: 5px;"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> @@ -793,7 +802,7 @@ <div class="row"> <div class="col-lg-4"> <h2 id="pagination">Pagination</h2> - <div class="bs-example"> + <div class="bs-component"> <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> @@ -803,6 +812,7 @@ <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> + <ul class="pagination pagination-lg"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> @@ -810,6 +820,7 @@ <li><a href="#">3</a></li> <li><a href="#">»</a></li> </ul> + <ul class="pagination pagination-sm"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> @@ -823,13 +834,12 @@ </div> <div class="col-lg-4"> <h2 id="pager">Pager</h2> - <div class="bs-example"> + <div class="bs-component"> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> - </div> - <div class="bs-example"> + <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> @@ -854,11 +864,10 @@ </div> </div> - <div class="row"> <div class="col-lg-12"> <h2>Alerts</h2> - <div class="bs-example"> + <div class="bs-component"> <div class="alert alert-dismissable alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Warning!</h4> @@ -869,28 +878,34 @@ </div> <div class="row"> <div class="col-lg-4"> - <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 class="bs-component"> + <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> </div> <div class="col-lg-4"> - <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 class="bs-component"> + <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> </div> <div class="col-lg-4"> - <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 class="bs-component"> + <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> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <h2>Labels</h2> - <div class="bs-example" style="margin-bottom: 40px;"> + <div class="bs-component" style="margin-bottom: 40px;"> <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> @@ -901,7 +916,7 @@ </div> <div class="col-lg-4"> <h2>Badges</h2> - <div class="bs-example"> + <div class="bs-component"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home <span class="badge">42</span></a></li> <li><a href="#">Profile <span class="badge"></span></a></li> @@ -922,55 +937,60 @@ <h1 id="progress">Progress bars</h1> </div> - <h3 id="progress-basic">Basic</h3> - <div class="bs-example"> + <div class="bs-component"> <div class="progress"> <div class="progress-bar" style="width: 60%;"></div> </div> </div> <h3 id="progress-alternatives">Contextual alternatives</h3> - <div class="bs-example"> - <div class="progress" style="margin-bottom: 9px;"> + <div class="bs-component"> + <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> - <div class="progress" style="margin-bottom: 9px;"> + + <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> - <div class="progress" style="margin-bottom: 9px;"> + + <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 60%"></div> </div> + <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> <h3 id="progress-striped">Striped</h3> - <div class="bs-example"> - <div class="progress progress-striped" style="margin-bottom: 9px;"> + <div class="bs-component"> + <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> - <div class="progress progress-striped" style="margin-bottom: 9px;"> + + <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> - <div class="progress progress-striped" style="margin-bottom: 9px;"> + + <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width: 60%"></div> </div> + <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> <h3 id="progress-animated">Animated</h3> - <div class="bs-example"> + <div class="bs-component"> <div class="progress progress-striped active"> <div class="progress-bar" style="width: 45%"></div> </div> </div> <h3 id="progress-stacked">Stacked</h3> - <div class="bs-example"> + <div class="bs-component"> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"></div> <div class="progress-bar progress-bar-warning" style="width: 20%"></div> @@ -990,7 +1010,7 @@ <div class="page-header"> <h1 id="container">Containers</h1> </div> - <div class="bs-example"> + <div class="bs-component"> <div class="jumbotron"> <h1>Jumbotron</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> @@ -1008,7 +1028,7 @@ </div> <div class="row"> <div class="col-lg-4"> - <div class="bs-example"> + <div class="bs-component"> <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> @@ -1026,7 +1046,7 @@ </div> </div> <div class="col-lg-4"> - <div class="bs-example"> + <div class="bs-component"> <div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio @@ -1039,7 +1059,7 @@ </div> </div> <div class="col-lg-4"> - <div class="bs-example"> + <div class="bs-component"> <div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> @@ -1062,65 +1082,76 @@ </div> <div class="row"> <div class="col-lg-4"> - <div class="panel panel-default"> - <div class="panel-body"> - Basic panel + <div class="bs-component"> + <div class="panel panel-default"> + <div class="panel-body"> + Basic panel + </div> </div> - </div> - <div class="panel panel-default"> - <div class="panel-heading">Panel heading</div> - <div class="panel-body"> - Panel content + + <div class="panel panel-default"> + <div class="panel-heading">Panel heading</div> + <div class="panel-body"> + Panel content + </div> </div> - </div> - <div class="panel panel-default"> - <div class="panel-body"> - Panel content + + <div class="panel panel-default"> + <div class="panel-body"> + Panel content + </div> + <div class="panel-footer">Panel footer</div> </div> - <div class="panel-footer">Panel footer</div> </div> </div> <div class="col-lg-4"> - <div class="panel panel-primary"> - <div class="panel-heading"> - <h3 class="panel-title">Panel primary</h3> - </div> - <div class="panel-body"> - Panel content - </div> - </div> - <div class="panel panel-success"> - <div class="panel-heading"> - <h3 class="panel-title">Panel success</h3> - </div> - <div class="panel-body"> - Panel content + <div class="bs-component"> + <div class="panel panel-primary"> + <div class="panel-heading"> + <h3 class="panel-title">Panel primary</h3> + </div> + <div class="panel-body"> + Panel content + </div> </div> - </div> - <div class="panel panel-warning"> - <div class="panel-heading"> - <h3 class="panel-title">Panel warning</h3> + + <div class="panel panel-success"> + <div class="panel-heading"> + <h3 class="panel-title">Panel success</h3> + </div> + <div class="panel-body"> + Panel content + </div> </div> - <div class="panel-body"> - Panel content + + <div class="panel panel-warning"> + <div class="panel-heading"> + <h3 class="panel-title">Panel warning</h3> + </div> + <div class="panel-body"> + Panel content + </div> </div> </div> </div> <div class="col-lg-4"> - <div class="panel panel-danger"> - <div class="panel-heading"> - <h3 class="panel-title">Panel danger</h3> - </div> - <div class="panel-body"> - Panel content - </div> - </div> - <div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Panel info</h3> + <div class="bs-component"> + <div class="panel panel-danger"> + <div class="panel-heading"> + <h3 class="panel-title">Panel danger</h3> + </div> + <div class="panel-body"> + Panel content + </div> </div> - <div class="panel-body"> - Panel content + + <div class="panel panel-info"> + <div class="panel-heading"> + <h3 class="panel-title">Panel info</h3> + </div> + <div class="panel-body"> + Panel content + </div> </div> </div> </div> @@ -1133,23 +1164,42 @@ </div> <div class="row"> <div class="col-lg-4"> - <div class="well"> - Look, I'm in a well! + <div class="bs-component"> + <div class="well"> + Look, I'm in a well! + </div> </div> </div> <div class="col-lg-4"> - <div class="well well-sm"> - Look, I'm in a small well! + <div class="bs-component"> + <div class="well well-sm"> + Look, I'm in a small well! + </div> </div> </div> <div class="col-lg-4"> - <div class="well well-lg"> - Look, I'm in a large well! + <div class="bs-component"> + <div class="well well-lg"> + Look, I'm in a large well! + </div> </div> </div> </div> </div> + <div id="source-modal" class="modal fade"> + <div class="modal-dialog modal-lg"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Source Code</h4> + </div> + <div class="modal-body"> + <pre></pre> + </div> + </div> + </div> + </div> <footer> <div class="row"> |