kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Rename pull-*-{left|right} classes to .float-*-left and .float-*-right

This commit is contained in:
Mark Otto 2016-09-26 00:54:10 -07:00
parent 6181cf9d5d
commit 3dc4b3647c
20 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/nav-home.html
View File

@ -1,7 +1,7 @@
<header class="navbar navbar-light navbar-static-top bd-navbar">
<div class="container">
{% comment %}
<nav class="nav navbar-nav pull-xs-right">
<nav class="nav navbar-nav float-xs-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
@ -27,7 +27,7 @@
<nav>
<div class="clearfix">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">

4
docs/components/card.md
View File

@ -230,7 +230,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs pull-xs-left">
<ul class="nav nav-tabs card-header-tabs float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
@ -253,7 +253,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% example html %}
<div class="card text-xs-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills pull-xs-left">
<ul class="nav nav-pills card-header-pills float-xs-left">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>

6
docs/components/list-group.md
View File

@ -31,15 +31,15 @@ Add tags to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">14</span>
<span class="tag tag-default tag-pill float-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">2</span>
<span class="tag tag-default tag-pill float-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill pull-xs-right">1</span>
<span class="tag tag-default tag-pill float-xs-right">1</span>
Morbi leo risus
</li>
</ul>

8
docs/components/navbar.md
View File

@ -47,7 +47,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
@ -129,7 +129,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-info" type="submit">Search</button>
</form>
@ -150,7 +150,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-secondary" type="submit">Search</button>
</form>
@ -171,7 +171,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>

8
docs/content/images.md
View File

@ -46,13 +46,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="rounded pull-xs-left" alt="...">
<img src="..." class="rounded pull-xs-right" alt="...">
<img src="..." class="rounded float-xs-left" alt="...">
<img src="..." class="rounded float-xs-right" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">

2
docs/examples/album/index.html
View File

@ -104,7 +104,7 @@
<footer class="text-muted">
<div class="container">
<p class="pull-xs-right">
<p class="float-xs-right">
<a href="#">Back to top</a>
</p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>

2
docs/examples/carousel/index.html
View File

@ -164,7 +164,7 @@
<!-- FOOTER -->
<footer>
<p class="pull-xs-right"><a href="#">Back to top</a></p>
<p class="float-xs-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>

4
docs/examples/dashboard/index.html
View File

@ -29,13 +29,13 @@
</button>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar">
<nav class="nav navbar-nav pull-xs-left">
<nav class="nav navbar-nav float-xs-left">
<a class="nav-item nav-link" href="#">Dashboard</a>
<a class="nav-item nav-link" href="#">Settings</a>
<a class="nav-item nav-link" href="#">Profile</a>
<a class="nav-item nav-link" href="#">Help</a>
</nav>
<form class="pull-xs-right">
<form class="float-xs-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>

2
docs/examples/narrow-jumbotron/index.html
View File

@ -23,7 +23,7 @@
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-xs-right">
<ul class="nav nav-pills float-xs-right">
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>

2
docs/examples/navbar/index.html
View File

@ -41,7 +41,7 @@
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<form class="form-inline float-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>

2
docs/examples/offcanvas/index.html
View File

@ -35,7 +35,7 @@
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-xs-right hidden-sm-up">
<p class="float-xs-right hidden-sm-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">

4
docs/examples/tooltip-viewport/index.html
View File

@ -20,7 +20,7 @@
<body>
<button class="btn btn-secondary pull-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
@ -30,7 +30,7 @@
<button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
<button class="btn btn-secondary pull-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>

2
docs/migration.md
View File

@ -180,7 +180,7 @@ Dropped entirely for the new card component.
### Utilities
- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
- Added `.float-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-xs-left` and `.float-xs-right`.
- Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
- Dropped `.center-block` for the new `.mx-auto` class.

4
docs/utilities/clearfix.md
View File

@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t
{% example html %}
<div class="bg-info clearfix">
<button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
<button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
<button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
<button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
</div>
{% endexample %}

20
docs/utilities/responsive-helpers.md
View File

@ -46,25 +46,25 @@ Aspect ratios can be customized with modifier classes.
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available.
Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.
{% example html %}
<div class="pull-xs-left">Float left on all viewport sizes</div><br>
<div class="pull-xs-right">Float right on all viewport sizes</div><br>
<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
<div class="float-xs-left">Float left on all viewport sizes</div><br>
<div class="float-xs-right">Float right on all viewport sizes</div><br>
<div class="float-xs-none">Don't float on all viewport sizes</div><br>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
{% endexample %}
{% highlight scss %}
// Related simple non-responsive mixins
.element {
@include pull-left;
@include float-left;
}
.another-element {
@include pull-right;
@include float-right;
}
{% endhighlight %}

2
scss/_mixins.scss
View File

@ -51,4 +51,4 @@
// @import "mixins/navbar-align";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "mixins/pulls";
@import "mixins/float";

2
scss/_utilities.scss
View File

@ -3,7 +3,7 @@
@import "utilities/clearfix";
@import "utilities/display";
@import "utilities/flex";
@import "utilities/pulls";
@import "utilities/float";
@import "utilities/screenreaders";
@import "utilities/spacing";
@import "utilities/text";

4
scss/mixins/_pulls.scss → scss/mixins/_float.scss
View File

@ -1,6 +1,6 @@
@mixin pull-left {
@mixin float-left {
float: left !important;
}
@mixin pull-right {
@mixin float-right {
float: right !important;
}

13
scss/utilities/_float.scss Normal file
View File

@ -0,0 +1,13 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.float-#{$breakpoint}-left {
@include float-left();
}
.float-#{$breakpoint}-right {
@include float-right();
}
.float-#{$breakpoint}-none {
float: none !important;
}
}
}

13
scss/utilities/_pulls.scss
View File

@ -1,13 +0,0 @@
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
.pull-#{$breakpoint}-left {
@include pull-left();
}
.pull-#{$breakpoint}-right {
@include pull-right();
}
.pull-#{$breakpoint}-none {
float: none !important;
}
}
}