1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00

getting popovers in

This commit is contained in:
Mark Otto
2011-07-01 23:10:39 -07:00
parent 5992b4e0af
commit 3117fc979d
5 changed files with 411 additions and 52 deletions

View File

@@ -224,4 +224,21 @@ div.topbar-wrapper div.topbar {
padding-right: 20px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Popover docs
-------------------------------------------------- */
div.popover-well {
min-height: 160px;
}
div.popover-well div.popover {
display: block;
}
div.popover-well div.popover-wrapper {
width: 50%;
height: 160px;
float: left;
}
div.popover-well div.popover-menu-wrapper {
height: 80px;
}

View File

@@ -1062,7 +1062,7 @@
</div>
<div class="row">
<div class="span4 columns">
<h2>Example modal</h2>
<h2>Modals</h2>
<p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it's important that the background context be maintained.</p>
</div>
<div class="span12 columns">
@@ -1081,7 +1081,7 @@
</div>
</div>
</div>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span4 columns">
<h2>Tool Tips</h2>
@@ -1113,7 +1113,57 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div>
</div>
</div>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span4 columns">
<h2>Popovers</h2>
</div>
<div class="span12 columns">
<div class="well popover-well">
<div class="popover-wrapper">
<div class="popover above">
<div class="popover-border">
<h3 class="popover-title">Popover title</h3>
<div class="popover-inner">
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
</div>
<div class="popover-wrapper">
<div class="popover bottom popover2">
<div class="arrow"></div>
<div class="inner">
<h3 class="title">Popover title</h3>
<div class="content">
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
</div>
</div>
<div class="well popover-well popover-menu-well">
<div class="popover-wrapper">
<div class="popover popover-menu">
<div class="popover-border">
<div class="popover-inner">
<a href="">View</a>
<a href="">Edit</a>
<a href="">Delete</a>
</div>
</div>
<div class="popover-arrow"></div>
</div>
</div>
</div>
</div>
</div> <!-- /row -->
</section>