mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-25 22:41:20 +02:00
remove static popovers, modals, and twipsies from components in favor of full javascript page
This commit is contained in:
Mark Otto
@@ -1010,26 +1010,26 @@
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="alert-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
</div>
|
||||
<div class="alert-message error">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
|
||||
</div>
|
||||
<div class="alert-message success">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Well done!</strong> You successfully read this alert message.</p>
|
||||
</div>
|
||||
<div class="alert-message info">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
</div>
|
||||
|
||||
<h4>Example code</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
|
||||
</div>
|
||||
</pre>
|
||||
@@ -1048,14 +1048,14 @@
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="alert-message block-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
<div class="alert-actions">
|
||||
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-message block-message error">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again.</p>
|
||||
<ul>
|
||||
<li>Duis mollis est non commodo luctus</li>
|
||||
@@ -1067,14 +1067,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-message block-message success">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Well done!</strong> You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.</p>
|
||||
<div class="alert-actions">
|
||||
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-message block-message info">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
|
||||
<div class="alert-actions">
|
||||
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
@@ -1084,7 +1084,7 @@
|
||||
<h4>Example code</h4>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="alert-message block-message warning">
|
||||
<a class="close" href="#">×</a>
|
||||
<a class="close">×</a>
|
||||
<p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
|
||||
<div class="alert-actions">
|
||||
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
@@ -1096,101 +1096,6 @@
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Modals
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Modals <small></small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Modals</h2>
|
||||
<p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="well" style="background-color: #888; border: none; ">
|
||||
<!-- Modal -->
|
||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
|
||||
<div class="modal-header">
|
||||
<a href="#" class="close js-dismiss">×</a>
|
||||
<h3>Modal Heading</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>One fine body…</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn primary">Primary</a>
|
||||
<a href="#" class="btn">Secondary</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Twipsies
|
||||
================================================== -->
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Twipsy tooltips <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Tooltips</h2>
|
||||
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="twipsies well">
|
||||
<div style="position: relative">
|
||||
<p class="muted" style="margin-bottom: 0">
|
||||
Lorem ipsum dolar sit amet illo error <a href="#" title="bottom">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="top">rem</a> quae aut veritatis quasi quae.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Popovers
|
||||
================================================== -->
|
||||
<section id="popovers">
|
||||
<div class="page-header">
|
||||
<h1>Popovers <small></small></h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
<h2>Popovers</h2>
|
||||
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
|
||||
<p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="well popover-well">
|
||||
<div class="popover-wrapper">
|
||||
<div class="popover left">
|
||||
<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>
|
||||
<img class="large-bird" src="assets/img/bird.png" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
</section>
|
||||
|
||||
<!-- Progress bars
|
||||
================================================== -->
|
||||
|
||||
Reference in New Issue
Block a user