mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 05:00:15 +01:00
Code Issues Releases Wiki Activity

fixes #4640: pagination span issues resolved by scoping selectors to appropriate children, not all children; clarify docs on use of spans for disabled and active links

Browse Source
This commit is contained in:
Mark Otto 2012-08-27 10:56:46 -07:00
parent a2b9a5e1fe
commit 1c9d5c43b0
4 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4693,12 +4693,12 @@ input[type="submit"].btn.btn-mini {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
.pagination li { .pagination ul > li {
display: inline; display: inline;
} }
.pagination a, .pagination ul > li > a,
.pagination span { .pagination ul > li > span {
float: left; float: left;
padding: 0 14px; padding: 0 14px;
line-height: 38px; line-height: 38px;
@ -4708,36 +4708,36 @@ input[type="submit"].btn.btn-mini {
border-left-width: 0; border-left-width: 0;
} }
.pagination a:hover, .pagination ul > li > a:hover,
.pagination .active a, .pagination ul > .active > a,
.pagination .active span { .pagination ul > .active > span {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.pagination .active a, .pagination ul > .active > a,
.pagination .active span { .pagination ul > .active > span {
color: #999999; color: #999999;
cursor: default; cursor: default;
} }
.pagination .disabled span, .pagination ul > .disabled > span,
.pagination .disabled a, .pagination ul > .disabled > a,
.pagination .disabled a:hover { .pagination ul > .disabled > a:hover {
color: #999999; color: #999999;
cursor: default; cursor: default;
background-color: transparent; background-color: transparent;
} }
.pagination li:first-child a, .pagination ul > li:first-child > a,
.pagination li:first-child span { .pagination ul > li:first-child > span {
border-left-width: 1px; border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
.pagination li:last-child a, .pagination ul > li:last-child > a,
.pagination li:last-child span { .pagination ul > li:last-child > span {
-webkit-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;

12
docs/components.html
View File

@ -1473,13 +1473,23 @@
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="pagination "&gt; &lt;div class="pagination"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt; &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre>
<p>You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.</p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre> </pre>
<h3>Alignment</h3> <h3>Alignment</h3>

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

@ -1402,13 +1402,23 @@
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="pagination "&gt; &lt;div class="pagination"&gt;
&lt;ul&gt; &lt;ul&gt;
&lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt; &lt;li class="disabled"&gt;&lt;a href="#"&gt;Prev&lt;/a&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
&lt;/div&gt; &lt;/div&gt;
</pre>
<p>{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}</p>
<pre class="prettyprint linenums">
&lt;div class="pagination"&gt;
&lt;ul&gt;
&lt;li class="disabled"&gt;&lt;span&gt;Prev&lt;/span&gt;&lt;/li&gt;
&lt;li class="active"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
...
&lt;/ul&gt;
&lt;/div&gt;
</pre> </pre>
<h3>{{_i}}Alignment{{/i}}</h3> <h3>{{_i}}Alignment{{/i}}</h3>

34
less/pagination.less
View File

@ -15,11 +15,11 @@
.border-radius(3px); .border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.05)); .box-shadow(0 1px 2px rgba(0,0,0,.05));
} }
.pagination li { .pagination ul > li {
display: inline; display: inline;
} }
.pagination a, .pagination ul > li > a,
.pagination span { .pagination ul > li > span {
float: left; float: left;
padding: 0 14px; padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2; line-height: (@baseLineHeight * 2) - 2;
@ -28,30 +28,30 @@
border: 1px solid @paginationBorder; border: 1px solid @paginationBorder;
border-left-width: 0; border-left-width: 0;
} }
.pagination a:hover, .pagination ul > li > a:hover,
.pagination .active a, .pagination ul > .active > a,
.pagination .active span { .pagination ul > .active > span {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.pagination .active a, .pagination ul > .active > a,
.pagination .active span { .pagination ul > .active > span {
color: @grayLight; color: @grayLight;
cursor: default; cursor: default;
} }
.pagination .disabled span, .pagination ul > .disabled > span,
.pagination .disabled a, .pagination ul > .disabled > a,
.pagination .disabled a:hover { .pagination ul > .disabled > a:hover {
color: @grayLight; color: @grayLight;
background-color: transparent; background-color: transparent;
cursor: default; cursor: default;
} }
.pagination li:first-child a, .pagination ul > li:first-child > a,
.pagination li:first-child span { .pagination ul > li:first-child > span {
border-left-width: 1px; border-left-width: 1px;
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
} }
.pagination li:last-child a, .pagination ul > li:last-child > a,
.pagination li:last-child span { .pagination ul > li:last-child > span {
.border-radius(0 3px 3px 0); .border-radius(0 3px 3px 0);
} }