summaryrefslogtreecommitdiff
path: root/cyborg/index.html
diff options
context:
space:
mode:
authorThomas Park <thomas@thomaspark.me>2014-03-02 01:53:43 -0500
committerThomas Park <thomas@thomaspark.me>2014-03-02 01:53:43 -0500
commit64b3ee70bdc6c7461aa93f978d52568f46b32c1a (patch)
treee4b18c3c8e3991cf44374e369434417ce0615ceb /cyborg/index.html
parent3cd4879999505176aa45c2f9ea38c3bce851f489 (diff)
add code modals on previews
Diffstat (limited to 'cyborg/index.html')
-rw-r--r--cyborg/index.html378
1 files changed, 214 insertions, 164 deletions
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="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
@@ -803,6 +812,7 @@
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
+
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
@@ -810,6 +820,7 @@
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
+
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#">&laquo;</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="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</button>
+ <h4 class="modal-title">Source Code</h4>
+ </div>
+ <div class="modal-body">
+ <pre></pre>
+ </div>
+ </div>
+ </div>
+ </div>
<footer>
<div class="row">