rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto 2016-11-27 22:29:33 -08:00
commit 5db88075c1
34 changed files with 280 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<header class="navbar navbar-light navbar-static-top bd-navbar"> <header class="navbar navbar-light navbar-static-top bd-navbar">
<div class="container"> <div class="container">
{% comment %} {% comment %}
<nav class="nav navbar-nav float-xs-right"> <nav class="nav navbar-nav float-right">
<div class="nav-item dropdown"> <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"> <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 }} v{{ site.current_version }}
@ -27,12 +27,12 @@
<nav> <nav>
<div class="clearfix"> <div class="clearfix">
<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"></button> <button class="navbar-toggler float-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>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/"> <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
Bootstrap Bootstrap
</a> </a>
</div> </div>
<div class="collapse navbar-toggleable-xs" id="bd-main-nav"> <div class="collapse navbar-toggleable" id="bd-main-nav">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a> <a class="nav-item nav-link {% if page.layout == "home" %}active{% endif %}" href="{{ site.baseurl }}/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Bootstrap</a>

2
docs/_layouts/simple.html
View File

@ -2,7 +2,7 @@
layout: default layout: default
--- ---
<div class="bd-pageheader text-xs-center text-sm-left"> <div class="bd-pageheader text-center text-sm-left">
<div class="container"> <div class="container">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
<p class="lead"> <p class="lead">

6
docs/assets/scss/_component-examples.scss
View File

@ -19,9 +19,9 @@
} }
} }
.flex-items-xs-top, .flex-items-top,
.flex-items-xs-middle, .flex-items-middle,
.flex-items-xs-bottom { .flex-items-bottom {
min-height: 6rem; min-height: 6rem;
background-color: rgba(255,0,0,.1); background-color: rgba(255,0,0,.1);
} }

38
docs/components/card.md
View File

@ -151,13 +151,13 @@ You can quickly change the text alignment of any card—in its entirety or speci
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card card-block text-xs-center"> <div class="card card-block text-center">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card card-block text-xs-right"> <div class="card card-block text-right">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="card text-xs-center"> <div class="card text-center">
<div class="card-header"> <div class="card-header">
Featured Featured
</div> </div>
@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment. Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment.
{% example html %} {% example html %}
<div class="card text-xs-center"> <div class="card text-center">
<div class="card-header"> <div class="card-header">
<ul class="nav nav-tabs card-header-tabs float-left"> <ul class="nav nav-tabs card-header-tabs float-left">
<li class="nav-item"> <li class="nav-item">
@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="card text-xs-center"> <div class="card text-center">
<div class="card-header"> <div class="card-header">
<ul class="nav nav-pills card-header-pills float-left"> <ul class="nav nav-pills card-header-pills float-left">
<li class="nav-item"> <li class="nav-item">
@ -333,7 +333,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.**
{% example html %} {% example html %}
<div class="card card-inverse card-primary text-xs-center"> <div class="card card-inverse card-primary text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -341,7 +341,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-success text-xs-center"> <div class="card card-inverse card-success text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -349,7 +349,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-info text-xs-center"> <div class="card card-inverse card-info text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -357,7 +357,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-warning text-xs-center"> <div class="card card-inverse card-warning text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -365,7 +365,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-danger text-xs-center"> <div class="card card-inverse card-danger text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -383,7 +383,7 @@ Cards include their own variant classes for quickly changing the `background-col
In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card. In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card.
{% example html %} {% example html %}
<div class="card card-outline-primary text-xs-center"> <div class="card card-outline-primary text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -391,7 +391,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-outline-secondary text-xs-center"> <div class="card card-outline-secondary text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -399,7 +399,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-outline-success text-xs-center"> <div class="card card-outline-success text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -407,7 +407,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-outline-info text-xs-center"> <div class="card card-outline-info text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -415,7 +415,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-outline-warning text-xs-center"> <div class="card card-outline-warning text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -423,7 +423,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-outline-danger text-xs-center"> <div class="card card-outline-danger text-center">
<div class="card-block"> <div class="card-block">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -542,7 +542,7 @@ Only applies to small devices and above.
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card card-block card-inverse card-primary text-xs-center"> <div class="card card-block card-inverse card-primary text-center">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <footer>
@ -552,7 +552,7 @@ Only applies to small devices and above.
</footer> </footer>
</blockquote> </blockquote>
</div> </div>
<div class="card card-block text-xs-center"> <div class="card card-block text-center">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
@ -560,7 +560,7 @@ Only applies to small devices and above.
<div class="card"> <div class="card">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image"> <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div> </div>
<div class="card card-block text-xs-right"> <div class="card card-block text-right">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer> <footer>

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

@ -46,19 +46,19 @@ Add badges to any list group item to show unread counts, activity, etc.
</ul> </ul>
{% endexample %} {% endexample %}
When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges.
{% highlight html %} {% highlight html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item flex-items-xs-between"> <li class="list-group-item flex-items-between">
Cras justo odio Cras justo odio
<span class="badge badge-default badge-pill">14</span> <span class="badge badge-default badge-pill">14</span>
</li> </li>
<li class="list-group-item flex-items-xs-between"> <li class="list-group-item flex-items-between">
Dapibus ac facilisis in Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span> <span class="badge badge-default badge-pill">2</span>
</li> </li>
<li class="list-group-item flex-items-xs-between"> <li class="list-group-item flex-items-between">
Morbi leo risus Morbi leo risus
<span class="badge badge-default badge-pill">1</span> <span class="badge badge-default badge-pill">1</span>
</li> </li>

2
docs/components/navs.md
View File

@ -282,7 +282,7 @@ And pills, too:
Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component. Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
{% example html %} {% example html %}
<ul class="nav nav-inline d-flex flex-items-xs-center"> <ul class="nav nav-inline d-flex flex-items-center">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>

12
docs/components/progress.md
View File

@ -18,19 +18,19 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
{% example html %} {% example html %}
<div class="text-xs-center" id="example-caption-1">Reticulating splines&hellip; 0%</div> <div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress> <progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>
<div class="text-xs-center" id="example-caption-2">Reticulating splines&hellip; 25%</div> <div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress> <progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>
<div class="text-xs-center" id="example-caption-3">Reticulating splines&hellip; 50%</div> <div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress> <progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>
<div class="text-xs-center" id="example-caption-4">Reticulating splines&hellip; 75%</div> <div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress> <progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>
<div class="text-xs-center" id="example-caption-5">Reticulating splines&hellip; 100%</div> <div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress> <progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>
{% endexample %} {% endexample %}
@ -39,7 +39,7 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t
Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that. Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that.
{% example html %} {% example html %}
<div class="text-xs-center" id="example-caption-6">Reticulating splines&hellip; 25%</div> <div class="text-center" id="example-caption-6">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-6"> <progress class="progress" value="25" max="100" aria-describedby="example-caption-6">
<div class="progress"> <div class="progress">
<span class="progress-bar" style="width: 25%;"></span> <span class="progress-bar" style="width: 25%;"></span>

2
docs/content/figures.md
View File

@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
{% example html %} {% example html %}
<figure class="figure"> <figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure."> <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption> <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure> </figure>
{% endexample %} {% endexample %}

4
docs/content/images.md
View File

@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon
{% endhighlight %} {% endhighlight %}
<div class="bd-example bd-example-images"> <div class="bd-example bd-example-images">
<div class="text-xs-center"> <div class="text-center">
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners"> <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="text-xs-center"> <div class="text-center">
<img src="..." class="rounded" alt="..."> <img src="..." class="rounded" alt="...">
</div> </div>
{% endhighlight %} {% endhighlight %}

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

@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<section class="jumbotron text-xs-center"> <section class="jumbotron text-center">
<div class="container"> <div class="container">
<h1 class="jumbotron-heading">Album example</h1> <h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p> <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
@ -103,7 +103,7 @@
<footer class="text-muted"> <footer class="text-muted">
<div class="container"> <div class="container">
<p class="float-xs-right"> <p class="float-right">
<a href="#">Back to top</a> <a href="#">Back to top</a>
</p> </p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p> <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>

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

@ -51,7 +51,7 @@
<div class="carousel-item active"> <div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide"> <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-xs-left"> <div class="carousel-caption text-left">
<h1>Example headline.</h1> <h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@ -71,7 +71,7 @@
<div class="carousel-item"> <div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide"> <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container"> <div class="container">
<div class="carousel-caption text-xs-right"> <div class="carousel-caption text-right">
<h1>One more for good measure.</h1> <h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
@ -164,7 +164,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p class="float-xs-right"><a href="#">Back to top</a></p> <p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer> </footer>

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

@ -92,7 +92,7 @@
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3"> <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">
<h1>Dashboard</h1> <h1>Dashboard</h1>
<section class="row text-xs-center placeholders"> <section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder"> <div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail"> <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4> <h4>Label</h4>

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

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

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

@ -23,7 +23,7 @@
<div class="container"> <div class="container">
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="navbar-header"> <div class="collapse navbar-toggleable" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
@ -39,7 +39,7 @@
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
<form class="form-inline float-xs-right"> <form class="form-inline float-right">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-outline-success" type="submit">Search</button> <button class="btn btn-outline-success" type="submit">Search</button>
</form> </form>

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

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

2
docs/examples/sticky-footer-navbar/index.html
View File

@ -31,7 +31,7 @@
<nav class="navbar navbar-light navbar-static-top bg-faded"> <nav class="navbar navbar-light navbar-static-top bg-faded">
<div class="container"> <div class="container">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button> <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-expanded="false" aria-controls="exCollapsingNavbar2" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <div class="collapse navbar-toggleable" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Sticky footer</a> <a class="navbar-brand" href="#">Sticky footer</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"> <li class="nav-item active">

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

@ -20,7 +20,7 @@
<body> <body>
<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 float-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-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> <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-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 tooltip-viewport-right" title="This should be shifted down">Shift Down</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 float-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> <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div> </div>

28
docs/layout/flexbox-grid.md
View File

@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
<div class="bd-example-row"> <div class="bd-example-row">
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row flex-items-xs-top"> <div class="row flex-items-top">
<div class="col-xs"> <div class="col-xs">
One of three columns One of three columns
</div> </div>
@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns One of three columns
</div> </div>
</div> </div>
<div class="row flex-items-xs-middle"> <div class="row flex-items-middle">
<div class="col-xs"> <div class="col-xs">
One of three columns One of three columns
</div> </div>
@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns One of three columns
</div> </div>
</div> </div>
<div class="row flex-items-xs-bottom"> <div class="row flex-items-bottom">
<div class="col-xs"> <div class="col-xs">
One of three columns One of three columns
</div> </div>
@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs flex-xs-top"> <div class="col-xs flex-top">
One of three columns One of three columns
</div> </div>
<div class="col-xs flex-xs-middle"> <div class="col-xs flex-middle">
One of three columns One of three columns
</div> </div>
<div class="col-xs flex-xs-bottom"> <div class="col-xs flex-bottom">
One of three columns One of three columns
</div> </div>
</div> </div>
@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
<div class="bd-example-row"> <div class="bd-example-row">
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row flex-items-xs-left"> <div class="row flex-items-left">
<div class="col-4"> <div class="col-4">
One of two columns One of two columns
</div> </div>
@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns One of two columns
</div> </div>
</div> </div>
<div class="row flex-items-xs-center"> <div class="row flex-items-center">
<div class="col-4"> <div class="col-4">
One of two columns One of two columns
</div> </div>
@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns One of two columns
</div> </div>
</div> </div>
<div class="row flex-items-xs-right"> <div class="row flex-items-right">
<div class="col-4"> <div class="col-4">
One of two columns One of two columns
</div> </div>
@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns One of two columns
</div> </div>
</div> </div>
<div class="row flex-items-xs-around"> <div class="row flex-items-around">
<div class="col-4"> <div class="col-4">
One of two columns One of two columns
</div> </div>
@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns One of two columns
</div> </div>
</div> </div>
<div class="row flex-items-xs-between"> <div class="row flex-items-between">
<div class="col-4"> <div class="col-4">
One of two columns One of two columns
</div> </div>
@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs flex-xs-unordered"> <div class="col-xs flex-unordered">
First, but unordered First, but unordered
</div> </div>
<div class="col-xs flex-xs-last"> <div class="col-xs flex-last">
Second, but last Second, but last
</div> </div>
<div class="col-xs flex-xs-first"> <div class="col-xs flex-first">
Third, but first Third, but first
</div> </div>
</div> </div>

10
docs/layout/grid.md
View File

@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th class="text-xs-center"> <th class="text-center">
Extra small<br> Extra small<br>
<small>&lt;576px</small> <small>&lt;576px</small>
</th> </th>
<th class="text-xs-center"> <th class="text-center">
Small<br> Small<br>
<small>&ge;576px</small> <small>&ge;576px</small>
</th> </th>
<th class="text-xs-center"> <th class="text-center">
Medium<br> Medium<br>
<small>&ge;768px</small> <small>&ge;768px</small>
</th> </th>
<th class="text-xs-center"> <th class="text-center">
Large<br> Large<br>
<small>&ge;992px</small> <small>&ge;992px</small>
</th> </th>
<th class="text-xs-center"> <th class="text-center">
Extra large<br> Extra large<br>
<small>&ge;1200px</small> <small>&ge;1200px</small>
</th> </th>

11
docs/utilities/clearfix.md
View File

@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
{% highlight scss %} {% highlight scss %}
// Mixin itself // Mixin itself
.clearfix() { @mixin clearfix() {
&:before, &::after {
&:after { display: block;
content: " "; content: "";
display: table;
}
&:after {
clear: both; clear: both;
} }
} }

14
docs/utilities/sizing-and-positioning.md
View File

@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v
Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes.
{% example html %} {% example html %}
<img class="w-100" data-src="holder.js/200px100?outline=yes&text=Width%20%3D%20100%25" alt="Width = 100%"> <img class="w-100" data-src="holder.js/200px100?text=Width%20%3D%20100%25" alt="Width 100%">
{% endexample %} {% endexample %}
{% example html %} {% example html %}
@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
<div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div> <div class="h-100" style="width: 100px; background-color: rgba(0,0,255,0.1);">Full height</div>
</div> </div>
{% endexample %} {% endexample %}
You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
{% example html %}
<img class="mw-100" data-src="holder.js/1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
{% endexample %}
{% example html %}
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
{% endexample %}

6
docs/utilities/typography.md
View File

@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes.
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
{% example html %} {% example html %}
<p class="text-xs-left">Left aligned text on all viewport sizes.</p> <p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> <p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> <p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>

2
js/src/scrollspy.js
View File

@ -221,7 +221,7 @@ const ScrollSpy = (($) => {
return return
} }
if (this._activeTarget && scrollTop < this._offsets[0]) { if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
this._activeTarget = null this._activeTarget = null
this._clear() this._clear()
return return

44
js/tests/unit/scrollspy.js
View File

@ -287,6 +287,50 @@ $(function () {
.scrollTop(201) .scrollTop(201)
}) })
QUnit.test('should NOT clear selection if above the first section and first section is at the top', function (assert) {
assert.expect(4)
var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="nav navbar-nav">'
+ '<li><a id="one-link" class="nav-link active" href="#one">One</a></li>'
+ '<li><a id="two-link" class="nav-link" href="#two">Two</a></li>'
+ '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
$(sectionHTML).appendTo('#qunit-fixture')
var negativeHeight = -10
var startOfSectionTwo = 101
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
+ '<div id="one" style="height: 100px;"/>'
+ '<div id="two" style="height: 100px;"/>'
+ '<div id="three" style="height: 100px;"/>'
+ '<div id="spacer" style="height: 100px;"/>'
+ '</div>'
var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
$scrollspy
.bootstrapScrollspy({
target: '#navigation',
offset: $scrollspy.position().top
})
.one('scroll', function () {
assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
assert.strictEqual($('.active').is('#two-link'), true, '"active" class on second section')
$scrollspy
.one('scroll', function () {
assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
assert.strictEqual($('.active').is('#one-link'), true, '"active" class on first section')
done()
})
.scrollTop(negativeHeight)
})
.scrollTop(startOfSectionTwo)
})
QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) { QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) {
assert.expect(5) assert.expect(5)
var navbarHtml = var navbarHtml =

2
scss/.scss-lint.yml
View File

@ -492,7 +492,7 @@ linters:
SpaceBeforeBrace: SpaceBeforeBrace:
enabled: true enabled: true
style: space # or 'new_line' style: space # or 'new_line'
allow_single_line_padding: false allow_single_line_padding: true
SpaceBetweenParens: SpaceBetweenParens:
enabled: true enabled: true

104
scss/_navbar.scss
View File

@ -128,42 +128,6 @@
} }
} }
// scss-lint:disable ImportantRule
.navbar-toggleable {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
&-#{$breakpoint} {
@include clearfix;
@include media-breakpoint-down($breakpoint) {
.navbar-brand {
display: block;
float: none;
margin-top: .5rem;
margin-right: 0;
}
.navbar-nav {
margin-top: .5rem;
margin-bottom: .5rem;
.dropdown-menu {
position: static;
float: none;
}
}
}
@include media-breakpoint-up($next) {
display: block;
}
}
}
}
// scss-lint:enable ImportantRule
// Navigation // Navigation
// //
// Custom navbar navigation built on the base `.nav` styles. // Custom navbar navigation built on the base `.nav` styles.
@ -284,48 +248,48 @@
} }
} }
// Navbar toggleable // Navbar toggleable
// //
// Custom override for collapse plugin in navbar. // Custom override for collapse plugin in navbar.
// Placed at the end of the file so it can override some CSS properties
// scss-lint:disable ImportantRule
.navbar-toggleable { .navbar-toggleable {
&-xs { @each $breakpoint in map-keys($grid-breakpoints) {
@include clearfix; $next: breakpoint-next($breakpoint, $grid-breakpoints);
@include media-breakpoint-down(xs) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(sm) {
display: block !important;
}
}
&-sm { // Get rid of the 'xs' prefix while reducing duplication
@include clearfix; #{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} {
@include media-breakpoint-down(sm) { @include clearfix;
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(md) {
display: block !important;
}
}
&-md { @include media-breakpoint-down($breakpoint) {
@include clearfix; .navbar-brand {
@include media-breakpoint-down(md) { display: block;
.navbar-nav .nav-item { float: none;
float: none; margin-top: .5rem;
margin-left: 0; margin-right: 0;
}
.navbar-nav {
margin-top: .5rem;
margin-bottom: .5rem;
.dropdown-menu {
position: static;
float: none;
}
.nav-item {
float: none;
margin-left: 0;
}
}
}
@include media-breakpoint-up($next) {
display: block !important;
} }
}
@include media-breakpoint-up(lg) {
display: block !important;
} }
} }
} }
// scss-lint:enable ImportantRule

2
scss/mixins/_clearfix.scss
View File

@ -1,7 +1,7 @@
@mixin clearfix() { @mixin clearfix() {
&::after { &::after {
display: block;
content: ""; content: "";
display: table;
clear: both; clear: both;
} }
} }

10
scss/utilities/_align.scss
View File

@ -1,6 +1,6 @@
.align-baseline { vertical-align: baseline !important; } // Browser default .align-baseline { vertical-align: baseline !important; } // Browser default
.align-top { vertical-align: top !important; } .align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; } .align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; } .align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; } .align-text-top { vertical-align: text-top !important; }

8
scss/utilities/_borders.scss
View File

@ -2,11 +2,11 @@
// Border // Border
// //
.border-0 { border: 0 !important; } .border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; } .border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; } .border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; } .border-left-0 { border-left: 0 !important; }
// //
// Border-radius // Border-radius

28
scss/utilities/_display.scss
View File

@ -8,23 +8,21 @@
$min: breakpoint-min($breakpoint, $grid-breakpoints); $min: breakpoint-min($breakpoint, $grid-breakpoints);
@if $min { @if $min {
@media (min-width: $min) { .d-#{$breakpoint}-none { display: none !important; }
.d-#{$breakpoint}-none { display: none !important; } .d-#{$breakpoint}-inline { display: inline !important; }
.d-#{$breakpoint}-inline { display: inline !important; } .d-#{$breakpoint}-inline-block { display: inline-block !important; }
.d-#{$breakpoint}-inline-block { display: inline-block !important; } .d-#{$breakpoint}-block { display: block !important; }
.d-#{$breakpoint}-block { display: block !important; } .d-#{$breakpoint}-table { display: table !important; }
.d-#{$breakpoint}-table { display: table !important; } .d-#{$breakpoint}-table-cell { display: table-cell !important; }
.d-#{$breakpoint}-table-cell { display: table-cell !important; } .d-#{$breakpoint}-flex { display: flex !important; }
.d-#{$breakpoint}-flex { display: flex !important; }
}
} @else { } @else {
.d-none { display: none !important; } .d-none { display: none !important; }
.d-inline { display: inline !important; } .d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; } .d-inline-block { display: inline-block !important; }
.d-block { display: block !important; } .d-block { display: block !important; }
.d-table { display: table !important; } .d-table { display: table !important; }
.d-table-cell { display: table-cell !important; } .d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; } .d-flex { display: flex !important; }
} }
} }
} }

68
scss/utilities/_flex.scss
View File

@ -4,34 +4,54 @@
@if $enable-flex { @if $enable-flex {
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
// Flex column reordering
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-first { order: -1; } $min: breakpoint-min($breakpoint, $grid-breakpoints);
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
}
// Alignment for every item @if $min {
@include media-breakpoint-up($breakpoint) { // Flex column reordering
.flex-items-#{$breakpoint}-top { align-items: flex-start; } .flex-#{$breakpoint}-first { order: -1; }
.flex-items-#{$breakpoint}-middle { align-items: center; } .flex-#{$breakpoint}-last { order: 1; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; } .flex-#{$breakpoint}-unordered { order: 0; }
}
// Alignment per item // Alignment for every item
@include media-breakpoint-up($breakpoint) { .flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-#{$breakpoint}-top { align-self: flex-start; } .flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-#{$breakpoint}-middle { align-self: center; } .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
}
// Horizontal alignment of item // Alignment per item
@include media-breakpoint-up($breakpoint) { .flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-items-#{$breakpoint}-left { justify-content: flex-start; } .flex-#{$breakpoint}-middle { align-self: center; }
.flex-items-#{$breakpoint}-center { justify-content: center; } .flex-#{$breakpoint}-bottom { align-self: flex-end; }
.flex-items-#{$breakpoint}-right { justify-content: flex-end; }
.flex-items-#{$breakpoint}-around { justify-content: space-around; } // Horizontal alignment of item
.flex-items-#{$breakpoint}-between { justify-content: space-between; } .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
.flex-items-#{$breakpoint}-center { justify-content: center; }
.flex-items-#{$breakpoint}-right { justify-content: flex-end; }
.flex-items-#{$breakpoint}-around { justify-content: space-around; }
.flex-items-#{$breakpoint}-between { justify-content: space-between; }
} @else {
// Flex column reordering
.flex-first { order: -1; }
.flex-last { order: 1; }
.flex-unordered { order: 0; }
// Alignment for every item
.flex-items-top { align-items: flex-start; }
.flex-items-middle { align-items: center; }
.flex-items-bottom { align-items: flex-end; }
// Alignment per item
.flex-top { align-self: flex-start; }
.flex-middle { align-self: center; }
.flex-bottom { align-self: flex-end; }
// Horizontal alignment of item
.flex-items-left { justify-content: flex-start; }
.flex-items-center { justify-content: center; }
.flex-items-right { justify-content: flex-end; }
.flex-items-around { justify-content: space-around; }
.flex-items-between { justify-content: space-between; }
}
} }
} }
} }

12
scss/utilities/_float.scss
View File

@ -4,16 +4,14 @@
@if $min { @if $min {
// everything else // everything else
@media (min-width: $min) { .float-#{$breakpoint}-left { @include float-left; }
.float-#{$breakpoint}-left { @include float-left; } .float-#{$breakpoint}-right { @include float-right; }
.float-#{$breakpoint}-right { @include float-right; } .float-#{$breakpoint}-none { @include float-none; }
.float-#{$breakpoint}-none { @include float-none; }
}
} @else { } @else {
// xs // xs
.float-left { @include float-left; } .float-left { @include float-left; }
.float-right { @include float-right; } .float-right { @include float-right; }
.float-none { @include float-none; } .float-none { @include float-none; }
} }
} }
} }

31
scss/utilities/_spacing.scss
View File

@ -3,6 +3,9 @@
.w-100 { width: 100% !important; } .w-100 { width: 100% !important; }
.h-100 { height: 100% !important; } .h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
// Margin and Padding // Margin and Padding
.mx-auto { .mx-auto {
@ -21,24 +24,22 @@
@if $min { @if $min {
// everything else // everything else
@media (min-width: $min) { .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; }
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } .#{$abbrev}x-#{$breakpoint}-#{$size} {
.#{$abbrev}x-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important;
#{$prop}-right: $length-x !important; #{$prop}-left: $length-x !important;
#{$prop}-left: $length-x !important; }
} .#{$abbrev}y-#{$breakpoint}-#{$size} {
.#{$abbrev}y-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important;
#{$prop}-top: $length-y !important; #{$prop}-bottom: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
} }
} @else { } @else {
// xs // xs
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }
.#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; } .#{$abbrev}t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; } .#{$abbrev}r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; } .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }

32
scss/utilities/_text.scss
View File

@ -4,31 +4,39 @@
// Alignment // Alignment
.text-justify { text-align: justify !important; } .text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; } .text-nowrap { white-space: nowrap !important; }
.text-truncate { @include text-truncate; } .text-truncate { @include text-truncate; }
// Responsive alignment // Responsive alignment
@each $breakpoint in map-keys($grid-breakpoints) { @each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) { @include media-breakpoint-up($breakpoint) {
.text-#{$breakpoint}-left { text-align: left !important; } $min: breakpoint-min($breakpoint, $grid-breakpoints);
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-center { text-align: center !important; } @if $min {
.text-#{$breakpoint}-left { text-align: left !important; }
.text-#{$breakpoint}-right { text-align: right !important; }
.text-#{$breakpoint}-center { text-align: center !important; }
} @else {
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
}
} }
} }
// Transformation // Transformation
.text-lowercase { text-transform: lowercase !important; } .text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; } .text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; } .text-capitalize { text-transform: capitalize !important; }
// Weight and italics // Weight and italics
.font-weight-normal { font-weight: $font-weight-normal; } .font-weight-normal { font-weight: $font-weight-normal; }
.font-weight-bold { font-weight: $font-weight-bold; } .font-weight-bold { font-weight: $font-weight-bold; }
.font-italic { font-style: italic; } .font-italic { font-style: italic; }
// Contextual colors // Contextual colors