rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

remove old flex utils, update docs to match

Browse Source
This commit is contained in:
Mark Otto 2016-12-23 13:31:09 -08:00 committed by Mark Otto
parent 378aa6667b
commit 9d13fd3fe3
7 changed files with 21 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
</nav>
{% endcomment %}
<div class="d-flex flex-items-between hidden-lg-up">
<div class="d-flex justify-content-between hidden-lg-up">
<a class="navbar-brand" href="{{ site.baseurl }}/">
Bootstrap
</a>

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

@ -27,19 +27,19 @@ The most basic list group is simply an unordered list with list items, and the p
## Badge
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
{% highlight html %}
<ul class="list-group">
<li class="list-group-item flex-items-between">
<li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li>
<li class="list-group-item flex-items-between">
<li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li>
<li class="list-group-item flex-items-between">
<li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li>

2
docs/components/navbar.md
View File

@ -202,7 +202,7 @@ Place various form controls and components within a navbar with `.form-inline`.
Align the contents of your inline forms with utilities as needed.
{% example html %}
<nav class="navbar navbar-light bg-faded flex-items-right">
<nav class="navbar navbar-light bg-faded justify-content-end">
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

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

@ -39,7 +39,7 @@
</div>
</div>
<div class="navbar navbar-inverse bg-inverse">
<div class="container d-flex flex-items-between">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

2
docs/examples/justified-nav/index.html
View File

@ -30,7 +30,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-toggleable-md" id="navbarCollapse">
<ul class="nav navbar-nav text-md-center flex-items-md-between">
<ul class="nav navbar-nav text-md-center justify-content-md-between">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

26
docs/layout/grid.md
View File

@ -204,7 +204,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-md-center">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
@ -304,10 +304,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
### Vertical alignment
<div class="bd-example-row">
<div class="bd-example-row bd-example-row-flex-cols">
{% example html %}
<div class="container">
<div class="row flex-items-top">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
@ -318,7 +318,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of three columns
</div>
</div>
<div class="row flex-items-middle">
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
@ -329,7 +329,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of three columns
</div>
</div>
<div class="row flex-items-bottom">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
@ -348,13 +348,13 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
{% example html %}
<div class="container">
<div class="row">
<div class="col flex-top">
<div class="col align-self-start">
One of three columns
</div>
<div class="col flex-middle">
<div class="col align-self-center">
One of three columns
</div>
<div class="col flex-bottom">
<div class="col align-self-end">
One of three columns
</div>
</div>
@ -367,7 +367,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
<div class="bd-example-row">
{% example html %}
<div class="container">
<div class="row flex-items-left">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
@ -375,7 +375,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of two columns
</div>
</div>
<div class="row flex-items-center">
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
@ -383,7 +383,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of two columns
</div>
</div>
<div class="row flex-items-right">
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
@ -391,7 +391,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of two columns
</div>
</div>
<div class="row flex-items-around">
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
@ -399,7 +399,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
One of two columns
</div>
</div>
<div class="row flex-items-between">
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>

21
scss/utilities/_flex.scss
View File

@ -11,27 +11,6 @@
.flex#{$infix}-last { order: 1; }
.flex#{$infix}-unordered { order: 0; }
// Alignment for every item
.flex-items#{$infix}-top { align-items: flex-start; }
.flex-items#{$infix}-middle { align-items: center; }
.flex-items#{$infix}-bottom { align-items: flex-end; }
// Alignment per item
.flex#{$infix}-top { align-self: flex-start; }
.flex#{$infix}-middle { align-self: center; }
.flex#{$infix}-bottom { align-self: flex-end; }
// Horizontal alignment of item
.flex-items#{$infix}-left { justify-content: flex-start; }
.flex-items#{$infix}-center { justify-content: center; }
.flex-items#{$infix}-right { justify-content: flex-end; }
.flex-items#{$infix}-around { justify-content: space-around; }
.flex-items#{$infix}-between { justify-content: space-between; }
//
// New flex utils to replace and extend the ones above
//
.flex#{$infix}-fill { flex: 1 1 auto; }
.flex#{$infix}-justify { flex: 1 1 100%; }