root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

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

This commit is contained in:
Mark Otto 2017-10-19 00:14:27 -07:00
parent 521aa875e7 39b144c88f
commit f51440da22
3 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/4.0/utilities/flex.md
View File

@ -215,20 +215,24 @@ Responsive variations also exist for `align-self`.
## Auto margins ## Auto margins
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below is are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).
### With justify-content **Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details.
Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`.
{% example html %} {% example html %}
<div class="d-flex justify-content-end bd-highlight mb-3"> <div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div> <div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
</div> </div>
<div class="d-flex justify-content-start bd-highlight"> <div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div> <div class="ml-auto p-2 bd-highlight">Flex item</div>
@ -237,7 +241,7 @@ Easily move all flex items to one side, but keep another on the opposite end by
### With align-items ### With align-items
Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`. Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
{% example html %} {% example html %}
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;"> <div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">

9
package.json
View File

@ -36,12 +36,12 @@
"js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/", "js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/",
"js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ docs/ sw.js", "js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ docs/ sw.js",
"js-compile": "npm-run-all --parallel js-compile-*", "js-compile": "npm-run-all --parallel js-compile-*",
"js-compile-standalone": "cross-env ROLLUP=true rollup --environment BUNDLE:false --config build/rollup.config.js", "js-compile-standalone": "cross-env ROLLUP=true rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
"js-compile-bundle": "cross-env ROLLUP=true rollup --environment BUNDLE:true --config build/rollup.config.js", "js-compile-bundle": "cross-env ROLLUP=true rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
"js-compile-plugins": "cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps", "js-compile-plugins": "cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps",
"js-minify": "npm-run-all --parallel js-minify-*", "js-minify": "npm-run-all --parallel js-minify-*",
"js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js", "js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
"js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js", "js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
"js-minify-docs": "uglifyjs --mangle --comments \"/^!/\" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js", "js-minify-docs": "uglifyjs --mangle --comments \"/^!/\" --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
"js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60", "js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
"js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & node build/saucelabs-unit-test.js", "js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & node build/saucelabs-unit-test.js",
@ -125,6 +125,7 @@
"build", "build",
"js/.eslintrc.json", "js/.eslintrc.json",
"js/**/*.js", "js/**/*.js",
"js/**/*.js.map",
"scss/**/*.scss" "scss/**/*.scss"
], ],
"browserslist": [ "browserslist": [

25
scss/_variables.scss
View File

@ -62,16 +62,25 @@ $colors: map-merge((
"gray-dark": $gray-800 "gray-dark": $gray-800
), $colors); ), $colors);
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$theme-colors: () !default; $theme-colors: () !default;
$theme-colors: map-merge(( $theme-colors: map-merge((
"primary": $blue, "primary": $primary,
"secondary": $gray-600, "secondary": $secondary,
"success": $green, "success": $success,
"info": $cyan, "info": $info,
"warning": $yellow, "warning": $warning,
"danger": $red, "danger": $danger,
"light": $gray-100, "light": $light,
"dark": $gray-800 "dark": $dark
), $theme-colors); ), $theme-colors);
// stylelint-enable // stylelint-enable