rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

change all anchor alert closes to buttons

Browse Source
This commit is contained in:
Mark Otto 2012-03-25 20:41:59 -07:00
parent ea437351ed
commit 473e5714f7
5 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View File

Binary file not shown.

7
docs/assets/css/bootstrap.css vendored
View File

@ -1975,6 +1975,13 @@ table .span24 {
filter: alpha(opacity=40); filter: alpha(opacity=40);
cursor: pointer; cursor: pointer;
} }
button.close {
padding: 0;
cursor: pointer;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}
.btn { .btn {
display: inline-block; display: inline-block;
*display: inline; *display: inline;

12
docs/components.html
View File

@ -1684,19 +1684,19 @@
<h3>Example alerts</h3> <h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p> <p>Wrap your message and an optional close icon in a div with simple class.</p>
<div class="alert"> <div class="alert">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good. <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert"&gt; &lt;div class="alert"&gt;
&lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt; &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
&lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good. &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for fully responsive and dismissable alerts.</p> <p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for fully responsive and dismissable alerts.</p>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p> <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<div class="alert alert-block"> <div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<h4 class="alert-heading">Warning!</h4> <h4 class="alert-heading">Warning!</h4>
<p>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> <p>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> </div>
@ -1715,7 +1715,7 @@
<div class="span4"> <div class="span4">
<h3>Error or danger</h3> <h3>Error or danger</h3>
<div class="alert alert-error"> <div class="alert alert-error">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again. <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -1727,7 +1727,7 @@
<div class="span4"> <div class="span4">
<h3>Success</h3> <h3>Success</h3>
<div class="alert alert-success"> <div class="alert alert-success">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read this important alert message. <strong>Well done!</strong> You successfully read this important alert message.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -1739,7 +1739,7 @@
<div class="span4"> <div class="span4">
<h3>Information</h3> <h3>Information</h3>
<div class="alert alert-info"> <div class="alert alert-info">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">

12
docs/templates/pages/components.mustache vendored
View File

@ -1607,19 +1607,19 @@
<h3>{{_i}}Example alerts{{/i}}</h3> <h3>{{_i}}Example alerts{{/i}}</h3>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p> <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<div class="alert"> <div class="alert">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}} <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="alert"&gt; &lt;div class="alert"&gt;
&lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt; &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
&lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}} &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for fully responsive and dismissable alerts.{{/i}}</p> <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for fully responsive and dismissable alerts.{{/i}}</p>
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p> <p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
<div class="alert alert-block"> <div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4> <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div> </div>
@ -1638,7 +1638,7 @@
<div class="span4"> <div class="span4">
<h3>{{_i}}Error or danger{{/i}}</h3> <h3>{{_i}}Error or danger{{/i}}</h3>
<div class="alert alert-error"> <div class="alert alert-error">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}} <strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -1650,7 +1650,7 @@
<div class="span4"> <div class="span4">
<h3>{{_i}}Success{{/i}}</h3> <h3>{{_i}}Success{{/i}}</h3>
<div class="alert alert-success"> <div class="alert alert-success">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}} <strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -1662,7 +1662,7 @@
<div class="span4"> <div class="span4">
<h3>{{_i}}Information{{/i}}</h3> <h3>{{_i}}Information{{/i}}</h3>
<div class="alert alert-info"> <div class="alert alert-info">
<a class="close" data-dismiss="alert" href="#">&times;</a> <button class="close" data-dismiss="alert">&times;</button>
<strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}} <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">

11
less/close.less
View File

@ -16,3 +16,14 @@
cursor: pointer; cursor: pointer;
} }
} }
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
button.close {
padding: 0;
cursor: pointer;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}