mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Merge branch 'v4-dev' into colors-redux

Browse Source
This commit is contained in:
Mark Otto
2017-06-18 02:19:34 -07:00
parent 09e3509ff3 845320fe8c
commit 74f1d002b4
57 changed files with 588 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/components/input-group.md
+1 -1
View File
@@ -8,7 +8,7 @@ toc: true
## Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group.**
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
{% example html %}
<div class="input-group">
docs/4.0/examples/index.md
+16 -16
View File
@@ -15,15 +15,15 @@ Examples that focus on implementing uses of built-in components provided by Boot
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/starter-template/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/starter-template.jpg" alt="">
<h4>Starter template</h4>
</a>
<h4>Starter template</h4>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/grid.jpg" alt="">
<h4>Grids</h4>
</a>
<h4>Grids</h4>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@@ -31,8 +31,8 @@ Examples that focus on implementing uses of built-in components provided by Boot
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/jumbotron/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/jumbotron.jpg" alt="">
<h4>Jumbotron</h4>
</a>
<h4>Jumbotron</h4>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="col-6 col-md-4">
@@ -52,15 +52,15 @@ Taking the default navbar component and showing how it can be moved, placed, and
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbars/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar.jpg" alt="">
<h4>Navbar</h4>
</a>
<h4>Navbar</h4>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-static.jpg" alt="">
<h4>Static top navbar</h4>
</a>
<h4>Static top navbar</h4>
<p>Super basic template with a static top navbar along with some additional content.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@@ -68,8 +68,8 @@ Taking the default navbar component and showing how it can be moved, placed, and
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/navbar-top-fixed/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/navbar-fixed.jpg" alt="">
<h4>Fixed navbar</h4>
</a>
<h4>Fixed navbar</h4>
<p>Super basic template with a fixed top navbar along with some additional content.</p>
</div>
</div>
@@ -82,15 +82,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/album/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/album.jpg" alt="">
<h4>Album</h4>
</a>
<h4>Album</h4>
<p>Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/cover/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/cover.jpg" alt="">
<h4>Cover</h4>
</a>
<h4>Cover</h4>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@@ -98,15 +98,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/carousel/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/carousel.jpg" alt="">
<h4>Carousel</h4>
</a>
<h4>Carousel</h4>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/blog/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/blog.jpg" alt="">
<h4>Blog</h4>
</a>
<h4>Blog</h4>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@@ -114,15 +114,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/dashboard/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/dashboard.jpg" alt="">
<h4>Dashboard</h4>
</a>
<h4>Dashboard</h4>
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/signin/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sign-in.jpg" alt="">
<h4>Sign-in page</h4>
</a>
<h4>Sign-in page</h4>
<p>Custom form layout and design for a simple sign in form.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@@ -130,15 +130,15 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/justified-nav/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/justified-nav.jpg" alt="">
<h4>Justified nav</h4>
</a>
<h4>Justified nav</h4>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div>
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer.jpg" alt="">
<h4>Sticky footer</h4>
</a>
<h4>Sticky footer</h4>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="clearfix hidden-md-up"></div>
@@ -146,8 +146,8 @@ Brand new components and templates to help folks quickly get started with Bootst
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/sticky-footer-navbar/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/sticky-footer-navbar.jpg" alt="">
<h4>Sticky footer w/ navbar</h4>
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
@@ -160,8 +160,8 @@ Examples that focus on future-friendly features or techniques.
<div class="col-6 col-md-4">
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/offcanvas/">
<img class="img-thumbnail" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/screenshots/offcanvas.jpg" alt="">
<h4>Offcanvas</h4>
</a>
<h4>Offcanvas</h4>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>
docs/4.0/getting-started/download.md
+1 -1
View File
@@ -12,7 +12,7 @@ toc: true
**Current version:** v{{ site.current_version}}
<a href="{{ site.download.dist }}" class="btn btn-lg " onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
<a href="{{ site.download.dist }}" class="btn btn-bd-purple" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>
## Source files
**Want to compile Bootstrap with your project's asset pipeline?** Choose this option to download our source Sass, JavaScript, and documentation files. Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/build-tools/#tooling-setup).
docs/4.0/getting-started/options.md
+2 -7
View File
@@ -1,23 +1,18 @@
---
layout: docs
title: Customization options
description: Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new Sass variables.
description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
group: getting-started
toc: true
---
## Customizing variables
Bootstrap 4 ships with a `_custom.scss` file for easy overriding of default variables in `/scss/_variables.scss`. Copy and paste relevant lines from there into the `_custom.scss` file, modify the values, and recompile your Sass to change our default values. **Be sure to remove the `!default` flag from override values.**
Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile.
For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
{% highlight scss %}
// Bootstrap overrides
//
// Copy variables from `_variables.scss` to this file to override default values
// without modifying source files.
$body-bg: $gray-dark;
$body-color: $gray-light;
{% endhighlight %}
docs/4.0/utilities/position.md
+2
View File
@@ -26,6 +26,8 @@ Position an element at the bottom of the viewport, from edge to edge. Be sure yo
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
**Microsoft Edge and IE11 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that properly can render it.
{% highlight html %}
<div class="sticky-top">...</div>
{% endhighlight %}