diff options
| author | Thomas Park <thomas@thomaspark.me> | 2014-03-02 01:53:43 -0500 |
|---|---|---|
| committer | Thomas Park <thomas@thomaspark.me> | 2014-03-02 01:53:43 -0500 |
| commit | 64b3ee70bdc6c7461aa93f978d52568f46b32c1a (patch) | |
| tree | e4b18c3c8e3991cf44374e369434417ce0615ceb | |
| parent | 3cd4879999505176aa45c2f9ea38c3bce851f489 (diff) | |
add code modals on previews
| -rw-r--r-- | amelia/index.html | 380 | ||||
| -rw-r--r-- | assets/css/bootswatch.min.css | 2 | ||||
| -rw-r--r-- | assets/js/bootswatch.js | 40 | ||||
| -rw-r--r-- | assets/less/bootswatch.less | 16 | ||||
| -rw-r--r-- | cerulean/index.html | 378 | ||||
| -rw-r--r-- | cosmo/index.html | 378 | ||||
| -rw-r--r-- | custom/index.html | 378 | ||||
| -rw-r--r-- | cyborg/index.html | 378 | ||||
| -rw-r--r-- | default/index.html | 378 | ||||
| -rw-r--r-- | flatly/index.html | 378 | ||||
| -rw-r--r-- | journal/index.html | 378 | ||||
| -rw-r--r-- | lumen/index.html | 378 | ||||
| -rw-r--r-- | readable/index.html | 378 | ||||
| -rw-r--r-- | shamrock/index.html | 378 | ||||
| -rw-r--r-- | simplex/index.html | 380 | ||||
| -rw-r--r-- | slate/index.html | 378 | ||||
| -rw-r--r-- | spacelab/index.html | 378 | ||||
| -rw-r--r-- | superhero/index.html | 378 | ||||
| -rw-r--r-- | united/index.html | 378 | ||||
| -rw-r--r-- | yeti/index.html | 378 |
20 files changed, 3708 insertions, 2780 deletions
diff --git a/amelia/index.html b/amelia/index.html index 5a1b68e1..78b3aa51 100644 --- a/amelia/index.html +++ b/amelia/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> @@ -535,7 +534,7 @@ <td>Column content</td> </tr> </tbody> - </table> + </table> </div><!-- /example --> </div> </div> @@ -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"> diff --git a/assets/css/bootswatch.min.css b/assets/css/bootswatch.min.css index 235adb79..ea487481 100644 --- a/assets/css/bootswatch.min.css +++ b/assets/css/bootswatch.min.css @@ -1 +1 @@ -body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 2em;background-color:#1c2533;background:-webkit-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-o-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-ms-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-moz-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:linear-gradient(20deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background-attachment:fixed;color:#fff;text-align:center}.splash .alert{margin:4em 0 2em}.splash h1{font-size:4em}.splash #social{margin:2em 0 4em}.splash .bsa{max-width:350px;margin:0 auto;background:none}.splash .bsa .one .bsa_it_ad{border:1px solid #3e4653 !important;border-color:rgba(255,255,255,0.2) !important}.splash .bsa a{color:#fff}.section-tout{padding:4em 0 3em;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(0,0,0,0.1);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1;border:1px solid rgba(0,0,0,0.1);border-radius:6px}.section-preview .preview .image{padding:5px}.section-preview .preview .image img{border:1px solid rgba(0,0,0,0.1)}.section-preview .preview .options{text-align:center;padding:0 2em 2em}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor img{border:1px solid rgba(0,0,0,0.1);border-radius:4px}.sponsor a:hover{text-decoration:none}.bsa{padding:0}.bsa .one .bsa_it_ad{border:none !important;background-color:transparent !important}.bsa .one .bsa_it_ad .bsa_it_t,.bsa .one .bsa_it_ad .bsa_it_d{color:inherit !important}.bsa .one .bsa_it_ad .bsa_it_i{margin-bottom:0 !important}.bsa .one .bsa_it_p{display:none}
\ No newline at end of file +body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 2em;background-color:#1c2533;background:-webkit-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-o-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-ms-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:-moz-linear-gradient(70deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background:linear-gradient(20deg, #080f1f 30%, #2b4b5a 87%, #435e67 100%);background-attachment:fixed;color:#fff;text-align:center}.splash .alert{margin:4em 0 2em}.splash h1{font-size:4em}.splash #social{margin:2em 0 4em}.splash .bsa{max-width:350px;margin:0 auto;background:none}.splash .bsa .one .bsa_it_ad{border:1px solid #3e4653 !important;border-color:rgba(255,255,255,0.2) !important}.splash .bsa a{color:#fff}.section-tout{padding:4em 0 3em;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(0,0,0,0.1);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1;border:1px solid rgba(0,0,0,0.1);border-radius:6px}.section-preview .preview .image{padding:5px}.section-preview .preview .image img{border:1px solid rgba(0,0,0,0.1)}.section-preview .preview .options{text-align:center;padding:0 2em 2em}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor img{border:1px solid rgba(0,0,0,0.1);border-radius:4px}.sponsor a:hover{text-decoration:none}.bsa{padding:0}.bsa .one .bsa_it_ad{border:none !important;background-color:transparent !important}.bsa .one .bsa_it_ad .bsa_it_t,.bsa .one .bsa_it_ad .bsa_it_d{color:inherit !important}.bsa .one .bsa_it_ad .bsa_it_i{margin-bottom:0 !important}.bsa .one .bsa_it_p{display:none}
\ No newline at end of file diff --git a/assets/js/bootswatch.js b/assets/js/bootswatch.js index 3785411c..2f80654b 100644 --- a/assets/js/bootswatch.js +++ b/assets/js/bootswatch.js @@ -1 +1,39 @@ -$('[data-toggle="tooltip"]').tooltip();
\ No newline at end of file +(function(){ + + var $button = $("<div id='source-button' class='btn btn-primary btn-xs'>< ></div>").click(function(){ + var html = $(this).parent().html(); + html = cleanSource(html); + $("#source-modal pre").text(html); + $("#source-modal").modal(); + }); + + $(".bs-component").hover(function(){ + $(this).append($button); + $button.show(); + }, function(){ + $button.hide(); + }); + + function cleanSource(html) { + var lines = html.split(/\n/); + + lines.shift(); + lines.splice(-1, 1); + + var indentSize = lines[0].length - lines[0].trim().length, + re = new RegExp(" {" + indentSize + "}"); + + lines = lines.map(function(line){ + if (line.match(re)) { + line = line.substring(indentSize); + } + + return line; + }); + + lines = lines.join("\n"); + + return lines; + } + +})(); diff --git a/assets/less/bootswatch.less b/assets/less/bootswatch.less index 802888eb..dee364c5 100644 --- a/assets/less/bootswatch.less +++ b/assets/less/bootswatch.less @@ -17,6 +17,22 @@ body { margin-top: 8em; } +.bs-component { + position: relative; +} + +#source-button { + position: absolute; + top: 0; + right: 0; + z-index: 100; + font-weight: bold; +} + +.progress { + margin-bottom: 10px; +} + footer { margin: 5em 0; diff --git a/cerulean/index.html b/cerulean/index.html index a57251dc..e2666e02 100644 --- a/cerulean/index.html +++ b/cerulean/index.html @@ -126,7 +126,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"> @@ -169,10 +169,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"> @@ -215,8 +216,8 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> - </div><!-- /.navbar --> + </div> + </div> </div><!-- /example --> </div> @@ -238,33 +239,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> @@ -275,7 +272,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> @@ -286,7 +284,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> @@ -297,7 +296,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> @@ -308,7 +308,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> @@ -319,30 +320,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> @@ -350,7 +347,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> @@ -358,14 +355,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 @@ -381,7 +379,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> @@ -409,20 +407,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> @@ -433,9 +429,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> @@ -456,16 +451,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> @@ -480,7 +479,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> @@ -553,8 +552,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"> @@ -630,39 +629,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"> @@ -694,7 +701,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> @@ -728,7 +735,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> @@ -748,7 +755,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> @@ -770,14 +777,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> @@ -792,7 +801,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> @@ -802,6 +811,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> @@ -809,6 +819,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> @@ -822,13 +833,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> @@ -853,11 +863,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> @@ -868,28 +877,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> @@ -900,7 +915,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> @@ -921,55 +936,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> @@ -989,7 +1009,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> @@ -1007,7 +1027,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> @@ -1025,7 +1045,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 @@ -1038,7 +1058,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> @@ -1061,65 +1081,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> @@ -1132,23 +1163,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"> diff --git a/cosmo/index.html b/cosmo/index.html index d1db48d3..c4521084 100644 --- a/cosmo/index.html +++ b/cosmo/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"> diff --git a/custom/index.html b/custom/index.html index a59a47ed..7ed39043 100644 --- a/custom/index.html +++ b/custom/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"> diff --git a/cyborg/index.html b/cyborg/index.html index add9150c..3f3a8d7f 100644 --- a/cyborg/index.html +++ b/cyborg/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"> diff --git a/default/index.html b/default/index.html index acf0de31..e0135b11 100644 --- a/default/index.html +++ b/default/index.html @@ -124,7 +124,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"> @@ -167,10 +167,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"> @@ -213,8 +214,8 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> - </div><!-- /.navbar --> + </div> + </div> </div><!-- /example --> </div> @@ -236,33 +237,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> @@ -273,7 +270,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> @@ -284,7 +282,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> @@ -295,7 +294,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> @@ -306,7 +306,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> @@ -317,30 +318,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> @@ -348,7 +345,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> @@ -356,14 +353,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 @@ -379,7 +377,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> @@ -407,20 +405,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> @@ -431,9 +427,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> @@ -454,16 +449,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> @@ -478,7 +477,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> @@ -551,8 +550,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"> @@ -628,39 +627,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"> @@ -692,7 +699,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> @@ -726,7 +733,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> @@ -746,7 +753,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> @@ -768,14 +775,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> @@ -790,7 +799,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> @@ -800,6 +809,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> @@ -807,6 +817,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> @@ -820,13 +831,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> @@ -851,11 +861,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> @@ -866,28 +875,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> @@ -898,7 +913,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> @@ -919,55 +934,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> @@ -987,7 +1007,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> @@ -1005,7 +1025,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> @@ -1023,7 +1043,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 @@ -1036,7 +1056,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> @@ -1059,65 +1079,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> @@ -1130,23 +1161,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"> diff --git a/flatly/index.html b/flatly/index.html index 4fb6de57..7074d735 100644 --- a/flatly/index.html +++ b/flatly/index.html @@ -126,7 +126,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"> @@ -169,10 +169,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"> @@ -215,8 +216,8 @@ </ul> </li> </ul> - </div><!-- /.nav-collapse --> - </div><!-- /.navbar --> + </div> + </div> </div><!-- /example --> </div> @@ -238,33 +239,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> @@ -275,7 +272,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> @@ -286,7 +284,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> @@ -297,7 +296,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> @@ -308,7 +308,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> @@ -319,30 +320,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> @@ -350,7 +347,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> @@ -358,14 +355,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 @@ -381,7 +379,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> @@ -409,20 +407,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> @@ -433,9 +429,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> @@ -456,16 +451,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> @@ -480,7 +479,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> @@ -553,8 +552,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"> @@ -630,39 +629,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"> @@ -694,7 +701,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> @@ -728,7 +735,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> @@ -748,7 +755,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> @@ -770,14 +777,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> @@ -792,7 +801,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> @@ -802,6 +811,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> @@ -809,6 +819,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> @@ -822,13 +833,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> @@ -853,11 +863,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> @@ -868,28 +877,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> @@ -900,7 +915,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> @@ -921,55 +936,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> @@ -989,7 +1009,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> @@ -1007,7 +1027,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> @@ -1025,7 +1045,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 @@ -1038,7 +1058,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> @@ -1061,65 +1081,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> @@ -1132,23 +1163,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"> diff --git a/journal/index.html b/journal/index.html index 5784fa5f..1002a5d0 100644 --- a/journal/index.html +++ b/journal/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"> diff --git a/lumen/index.html b/lumen/index.html index 2ed3e511..33299770 100644 --- a/lumen/index.html +++ b/lumen/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"> diff --git a/readable/index.html b/readable/index.html index ded97946..31f0207c 100644 --- a/readable/index.html +++ b/readable/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"> diff --git a/shamrock/index.html b/shamrock/index.html index 48cc1762..ff2fcaa4 100644 --- a/shamrock/index.html +++ b/shamrock/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"> diff --git a/simplex/index.html b/simplex/index.html index 0c4882a8..b61fcbde 100644 --- a/simplex/index.html +++ b/simplex/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,70 +1082,124 @@ </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 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-success"> - <div class="panel-heading"> - <h3 class="panel-title">Panel success</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 class="panel panel-warning"> - <div class="panel-heading"> - <h3 class="panel-title">Panel warning</h3> + </div> + <div class="col-lg-4"> + <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> + </div> + + <div class="row"> + <div class="col-lg-12"> + <h2>Wells</h2> + </div> + </div> + <div class="row"> <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 class="bs-component"> + <div class="well"> + Look, I'm in a well! </div> </div> - <div class="panel panel-info"> - <div class="panel-heading"> - <h3 class="panel-title">Panel info</h3> + </div> + <div class="col-lg-4"> + <div class="bs-component"> + <div class="well well-sm"> + Look, I'm in a small well! </div> - <div class="panel-body"> - Panel content + </div> + </div> + <div class="col-lg-4"> + <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"> diff --git a/slate/index.html b/slate/index.html index 376c52f7..d888e053 100644 --- a/slate/index.html +++ b/slate/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"> diff --git a/spacelab/index.html b/spacelab/index.html index 5d2c2618..4ce8ffa6 100644 --- a/spacelab/index.html +++ b/spacelab/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"> 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"> diff --git a/united/index.html b/united/index.html index 3e3dad69..538a4b1c 100644 --- a/united/index.html +++ b/united/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"> diff --git a/yeti/index.html b/yeti/index.html index 2a3b0f12..6ef77611 100644 --- a/yeti/index.html +++ b/yeti/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"> |