mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-22 05:03:16 +02:00
Merge branch 'v4-dev' of github.com:twbs/bootstrap into v4-dev
This commit is contained in:
@@ -41,10 +41,10 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
|
|||||||
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
|
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<span class="badge badge-pill tag-default">Default</span>
|
<span class="badge badge-pill badge-default">Default</span>
|
||||||
<span class="badge badge-pill tag-primary">Primary</span>
|
<span class="badge badge-pill badge-primary">Primary</span>
|
||||||
<span class="badge badge-pill tag-success">Success</span>
|
<span class="badge badge-pill badge-success">Success</span>
|
||||||
<span class="badge badge-pill tag-info">Info</span>
|
<span class="badge badge-pill badge-info">Info</span>
|
||||||
<span class="badge badge-pill tag-warning">Warning</span>
|
<span class="badge badge-pill badge-warning">Warning</span>
|
||||||
<span class="badge badge-pill tag-danger">Danger</span>
|
<span class="badge badge-pill badge-danger">Danger</span>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
@@ -25,22 +25,22 @@ The most basic list group is simply an unordered list with list items, and the p
|
|||||||
</ul>
|
</ul>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
## Tags
|
## Badge
|
||||||
|
|
||||||
Add tags to any list group item to show unread counts, activity, etc.
|
Add badges to any list group item to show unread counts, activity, etc.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<ul class="list-group">
|
<ul class="list-group">
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<span class="badge badge-default tag-pill float-xs-right">14</span>
|
<span class="badge badge-default badge-pill float-xs-right">14</span>
|
||||||
Cras justo odio
|
Cras justo odio
|
||||||
</li>
|
</li>
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<span class="badge badge-default tag-pill float-xs-right">2</span>
|
<span class="badge badge-default badge-pill float-xs-right">2</span>
|
||||||
Dapibus ac facilisis in
|
Dapibus ac facilisis in
|
||||||
</li>
|
</li>
|
||||||
<li class="list-group-item">
|
<li class="list-group-item">
|
||||||
<span class="badge badge-default tag-pill float-xs-right">1</span>
|
<span class="badge badge-default badge-pill float-xs-right">1</span>
|
||||||
Morbi leo risus
|
Morbi leo risus
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@@ -58,21 +58,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button-outline-variant($color) {
|
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||||
color: $color;
|
color: $color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
@include hover {
|
@include hover {
|
||||||
color: #fff;
|
color: $color-hover;
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
color: #fff;
|
color: $color-hover;
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
}
|
}
|
||||||
@@ -80,14 +80,14 @@
|
|||||||
&:active,
|
&:active,
|
||||||
&.active,
|
&.active,
|
||||||
.open > &.dropdown-toggle {
|
.open > &.dropdown-toggle {
|
||||||
color: #fff;
|
color: $color-hover;
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
border-color: $color;
|
border-color: $color;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&.focus {
|
&.focus {
|
||||||
color: #fff;
|
color: $color-hover;
|
||||||
background-color: darken($color, 17%);
|
background-color: darken($color, 17%);
|
||||||
border-color: darken($color, 25%);
|
border-color: darken($color, 25%);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user