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">
<div class="container">
{% comment %}
<nav class="nav navbar-nav float-xs-right">
<nav class="nav navbar-nav float-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,12 +27,12 @@
<nav>
<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 }}/">
Bootstrap
</a>
</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">
<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>

2
docs/_layouts/simple.html
View File

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

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

@ -19,9 +19,9 @@
}
}
.flex-items-xs-top,
.flex-items-xs-middle,
.flex-items-xs-bottom {
.flex-items-top,
.flex-items-middle,
.flex-items-bottom {
min-height: 6rem;
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>
</div>
<div class="card card-block text-xs-center">
<div class="card card-block text-center">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card card-block text-xs-right">
<div class="card card-block text-right">
<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>
<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 %}
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
Featured
</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.
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs float-left">
<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 %}
{% example html %}
<div class="card text-xs-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills float-left">
<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`.**
{% 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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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.
{% example html %}
<div class="card card-outline-primary text-xs-center">
<div class="card card-outline-primary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<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>
</div>
</div>
<div class="card card-outline-secondary text-xs-center">
<div class="card card-outline-secondary text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<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>
</div>
</div>
<div class="card card-outline-success text-xs-center">
<div class="card card-outline-success text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<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>
</div>
</div>
<div class="card card-outline-info text-xs-center">
<div class="card card-outline-info text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<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>
</div>
</div>
<div class="card card-outline-warning text-xs-center">
<div class="card card-outline-warning text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<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>
</div>
</div>
<div class="card card-outline-danger text-xs-center">
<div class="card card-outline-danger text-center">
<div class="card-block">
<blockquote class="card-blockquote">
<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>
</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">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
@ -552,7 +552,7 @@ Only applies to small devices and above.
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<div class="card card-block text-center">
<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"><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">
<img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
</div>
<div class="card card-block text-xs-right">
<div class="card card-block text-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<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>
{% 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 %}
<ul class="list-group">
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item flex-items-xs-between">
<li class="list-group-item flex-items-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</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.
{% 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">
<a class="nav-link active" href="#">Active</a>
</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 %}
<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>
<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>
<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>
<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>
<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>
{% 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.
{% 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">
<div class="progress">
<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 %}
<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.">
<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>
{% endexample %}

4
docs/content/images.md
View File

@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon
{% endhighlight %}
<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">
</div>
</div>
{% highlight html %}
<div class="text-xs-center">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
{% endhighlight %}

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

@ -43,7 +43,7 @@
</div>
</div>
<section class="jumbotron text-xs-center">
<section class="jumbotron text-center">
<div class="container">
<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>
@ -103,7 +103,7 @@
<footer class="text-muted">
<div class="container">
<p class="float-xs-right">
<p class="float-right">
<a href="#">Back to top</a>
</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">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption text-xs-left">
<div class="carousel-caption text-left">
<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><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
@ -71,7 +71,7 @@
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption text-xs-right">
<div class="carousel-caption text-right">
<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><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
@ -164,7 +164,7 @@
<!-- 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>
</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">
<h1>Dashboard</h1>
<section class="row text-xs-center placeholders">
<section class="row text-center placeholders">
<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">
<h4>Label</h4>

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 float-xs-right">
<ul class="nav nav-pills float-right">
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>

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

@ -23,7 +23,7 @@
<div class="container">
<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>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<div class="collapse navbar-toggleable" id="navbar-header">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
@ -39,7 +39,7 @@
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline float-xs-right">
<form class="form-inline float-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-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>
</p>
<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">
<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>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<div class="collapse navbar-toggleable" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Sticky footer</a>
<ul class="nav navbar-nav">
<li class="nav-item active">

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

@ -20,7 +20,7 @@
<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-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 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>
</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">
{% example html %}
<div class="container">
<div class="row flex-items-xs-top">
<div class="row flex-items-top">
<div class="col-xs">
One of three columns
</div>
@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
</div>
</div>
<div class="row flex-items-xs-middle">
<div class="row flex-items-middle">
<div class="col-xs">
One of three columns
</div>
@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns.
One of three columns
</div>
</div>
<div class="row flex-items-xs-bottom">
<div class="row flex-items-bottom">
<div class="col-xs">
One of three columns
</div>
@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-top">
<div class="col-xs flex-top">
One of three columns
</div>
<div class="col-xs flex-xs-middle">
<div class="col-xs flex-middle">
One of three columns
</div>
<div class="col-xs flex-xs-bottom">
<div class="col-xs flex-bottom">
One of three columns
</div>
</div>
@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-xs-left">
<div class="row flex-items-left">
<div class="col-4">
One of two columns
</div>
@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-center">
<div class="row flex-items-center">
<div class="col-4">
One of two columns
</div>
@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-right">
<div class="row flex-items-right">
<div class="col-4">
One of two columns
</div>
@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-around">
<div class="row flex-items-around">
<div class="col-4">
One of two columns
</div>
@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
One of two columns
</div>
</div>
<div class="row flex-items-xs-between">
<div class="row flex-items-between">
<div class="col-4">
One of two columns
</div>
@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content.
{% example html %}
<div class="container">
<div class="row">
<div class="col-xs flex-xs-unordered">
<div class="col-xs flex-unordered">
First, but unordered
</div>
<div class="col-xs flex-xs-last">
<div class="col-xs flex-last">
Second, but last
</div>
<div class="col-xs flex-xs-first">
<div class="col-xs flex-first">
Third, but first
</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>
<tr>
<th></th>
<th class="text-xs-center">
<th class="text-center">
Extra small<br>
<small>&lt;576px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Small<br>
<small>&ge;576px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Medium<br>
<small>&ge;768px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Large<br>
<small>&ge;992px</small>
</th>
<th class="text-xs-center">
<th class="text-center">
Extra large<br>
<small>&ge;1200px</small>
</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 %}
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
@mixin clearfix() {
&::after {
display: block;
content: "";
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.
{% 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 %}
{% 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>
{% 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.
{% example html %}
<p class="text-xs-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-xs-right">Right aligned text on all viewport sizes.</p>
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center 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-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
}
if (this._activeTarget && scrollTop < this._offsets[0]) {
if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
this._activeTarget = null
this._clear()
return

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

@ -287,6 +287,50 @@ $(function () {
.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) {
assert.expect(5)
var navbarHtml =

2
scss/.scss-lint.yml
View File

@ -492,7 +492,7 @@ linters:
SpaceBeforeBrace:
enabled: true
style: space # or 'new_line'
allow_single_line_padding: false
allow_single_line_padding: true
SpaceBetweenParens:
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
//
// Custom navbar navigation built on the base `.nav` styles.
@ -284,48 +248,48 @@
}
}
// Navbar toggleable
//
// 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 {
&-xs {
@include clearfix;
@include media-breakpoint-down(xs) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(sm) {
display: block !important;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
&-sm {
@include clearfix;
@include media-breakpoint-down(sm) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
}
}
@include media-breakpoint-up(md) {
display: block !important;
}
}
// Get rid of the 'xs' prefix while reducing duplication
#{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} {
@include clearfix;
&-md {
@include clearfix;
@include media-breakpoint-down(md) {
.navbar-nav .nav-item {
float: none;
margin-left: 0;
@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;
}
.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() {
&::after {
display: block;
content: "";
display: table;
clear: both;
}
}

10
scss/utilities/_align.scss
View File

@ -1,6 +1,6 @@
.align-baseline { vertical-align: baseline !important; } // Browser default
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-baseline { vertical-align: baseline !important; } // Browser default
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: 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-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 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

28
scss/utilities/_display.scss
View File

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

68
scss/utilities/_flex.scss
View File

@ -4,34 +4,54 @@
@if $enable-flex {
@each $breakpoint in map-keys($grid-breakpoints) {
// Flex column reordering
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
}
$min: breakpoint-min($breakpoint, $grid-breakpoints);
// Alignment for every item
@include media-breakpoint-up($breakpoint) {
.flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
}
@if $min {
// Flex column reordering
.flex-#{$breakpoint}-first { order: -1; }
.flex-#{$breakpoint}-last { order: 1; }
.flex-#{$breakpoint}-unordered { order: 0; }
// Alignment per item
@include media-breakpoint-up($breakpoint) {
.flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
}
// Alignment for every item
.flex-items-#{$breakpoint}-top { align-items: flex-start; }
.flex-items-#{$breakpoint}-middle { align-items: center; }
.flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
// Horizontal alignment of item
@include media-breakpoint-up($breakpoint) {
.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; }
// Alignment per item
.flex-#{$breakpoint}-top { align-self: flex-start; }
.flex-#{$breakpoint}-middle { align-self: center; }
.flex-#{$breakpoint}-bottom { align-self: flex-end; }
// Horizontal alignment of item
.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 {
// everything else
@media (min-width: $min) {
.float-#{$breakpoint}-left { @include float-left; }
.float-#{$breakpoint}-right { @include float-right; }
.float-#{$breakpoint}-none { @include float-none; }
}
.float-#{$breakpoint}-left { @include float-left; }
.float-#{$breakpoint}-right { @include float-right; }
.float-#{$breakpoint}-none { @include float-none; }
} @else {
// xs
.float-left { @include float-left; }
.float-left { @include float-left; }
.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; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
// Margin and Padding
.mx-auto {
@ -21,24 +24,22 @@
@if $min {
// everything else
@media (min-width: $min) {
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}x-#{$breakpoint}-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$breakpoint}-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
.#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; }
.#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; }
.#{$abbrev}x-#{$breakpoint}-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}y-#{$breakpoint}-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
} @else {
// 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}r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }

32
scss/utilities/_text.scss
View File

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