diff options
Diffstat (limited to 'flatly/index.html')
| -rw-r--r-- | flatly/index.html | 442 |
1 files changed, 276 insertions, 166 deletions
diff --git a/flatly/index.html b/flatly/index.html index 11a88422..3fa94a29 100644 --- a/flatly/index.html +++ b/flatly/index.html @@ -99,10 +99,10 @@ <p class="lead">Flat and modern</p> </div> <div class="col-lg-6" style="padding: 15px 15px 0 15px;"> - <div class="well"> + <div class="well sponsor"> <a href="http://srv.buysellads.com/direct/click/track/yes/x/G6NDC27ICWAI627UCWALYK7UCKBILKJMCT7I5" rel="nofollow" target="_blank"> <span style="float: left; margin-right: 15px;"> - <img src="http://srv.buysellads.com/direct/image/track/yes/x/G6NDC27ICWAI627UCWALYK7UCKBILKJMCT7I5" width="175" height="135" style="border: 1px solid #ccc; border-radius: 4px;"> + <img src="http://srv.buysellads.com/direct/image/track/yes/x/G6NDC27ICWAI627UCWALYK7UCKBILKJMCT7I5" width="175" height="135"> </span> </a> <a href="http://srv.buysellads.com/direct/click/track/yes/x/G6NDC27ICWAI627UCWALYK7UCKBILKJMCT7I5" rel="nofollow" target="_blank"> @@ -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,102 @@ </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> + + <!-- Dialogs + ================================================== --> + <div class="bs-docs-section"> + + <div class="row"> + <div class="col-lg-12"> + <div class="page-header"> + <h1 id="tables">Dialogs</h1> + </div> + </div> + </div> + <div class="row"> + <div class="col-lg-6"> + <h2>Modals</h2> + <div class="bs-component"> + <div class="modal"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Modal title</h4> + </div> + <div class="modal-body"> + <p>One fine body…</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Save changes</button> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-lg-6"> + <h2>Popovers</h2> + <div class="bs-component"> + <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button> + + <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button> + + <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus + sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button> + + <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button> + </div> + <h2>Tooltips</h2> + <div class="bs-component"> + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Left</button> + + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Top</button> + + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Bottom</button> + + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Right</button> </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"> |