diff --git a/_data/translations.yml b/_data/translations.yml index 44ce59ce1a6175978ae8957df1c1ab6c4523c3cb..1594865b0b9c7c3b570f4574b6688ddbce3d48ae 100644 --- a/_data/translations.yml +++ b/_data/translations.yml @@ -1,8 +1,3 @@ -- name: Chinese - code: zh - description: Bootstrap ä¸æ–‡æ–‡æ¡£ - url: https://v4.bootcss.com/ - - name: Chinese code: zh description: Bootstrap 4 ä¸æ–‡æ–‡æ¡£æ•™ç¨‹ diff --git a/_includes/callout-danger-async-methods.md b/_includes/callout-danger-async-methods.md index f7a76aa4d3ea2cffdf73972df357e0b00d07335b..809643e1dcef5b4259916aea53ea10724bdb416e 100644 --- a/_includes/callout-danger-async-methods.md +++ b/_includes/callout-danger-async-methods.md @@ -3,5 +3,5 @@ All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. -[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/#content) +[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/) {% endcallout %} diff --git a/docs/4.0/components/carousel.md b/docs/4.0/components/carousel.md index 0846a68be11c9f4d4e0c906df32c36925b894cfc..29802f466697d6002aed609dd0ca76c8831453bc 100644 --- a/docs/4.0/components/carousel.md +++ b/docs/4.0/components/carousel.md @@ -109,7 +109,7 @@ The `.active` class needs to be added to one of the slides. Otherwise, the carou ### With captions -Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. +Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. <div class="bd-example"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> diff --git a/docs/4.0/content/images.md b/docs/4.0/content/images.md index 7ef59b19d069ed8899850585190261d19264ea1b..aa6fe4bccc8ac11791f16b87057857aa5d4ef92a 100644 --- a/docs/4.0/content/images.md +++ b/docs/4.0/content/images.md @@ -38,7 +38,7 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc ## Aligning images -Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/embed/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). +Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/utilities/float) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering). <div class="bd-example bd-example-images"> <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners"> diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index c4b82ab2f358a3b0e2a9ff2008f7994dae8195de..7565bb41a77bf7fb941cd09748b13e3734ff2495 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -342,7 +342,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. {% endcallout %} -To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/invisible-content/) instead. +To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. ## Click delay optimization for touch diff --git a/docs/4.0/examples/grid/index.html b/docs/4.0/examples/grid/index.html index 06d674847deb299ed1d1339c51fa46e55fbb40ec..2479b06636ea56a8d59be31855d8a2bc1eed3645 100644 --- a/docs/4.0/examples/grid/index.html +++ b/docs/4.0/examples/grid/index.html @@ -130,38 +130,6 @@ <div class="col-6 col-sm-4">.col-6 .col-sm-4</div> </div> - <hr> - - <h3>Column clearing</h3> - <p><a href="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p> - <div class="row"> - <div class="col-6 col-sm-3"> - .col-6 .col-sm-3 - <br> - Resize your viewport or check it out on your phone for an example. - </div> - <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> - - <!-- Add the extra clearfix for only the required viewport --> - <div class="clearfix d-sm-none"></div> - - <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> - <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> - </div> - - <hr> - - <h3>Offset, push, and pull resets</h3> - <p>Reset offsets, pushes, and pulls at specific breakpoints.</p> - <div class="row"> - <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> - <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> - </div> - <div class="row"> - <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> - <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> - </div> - </div> <!-- /container --> <!-- Bootstrap core JavaScript diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 44d0e112378cc78393d027871902c5ca89e42d34..eee7a9256838b771ebb47ba607b12a3dd5bc30bc 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -238,7 +238,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o ### Equal-width multi-row -Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/). +Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/). <div class="bd-example-row"> {% example html %} diff --git a/docs/4.0/layout/media-object.md b/docs/4.0/layout/media-object.md index 64f66bb9ec2e4c8217b27abe8656282b8af0268e..e3377ef6b6b2de9c8570d9c6b2e6e7de0dfa3d62 100644 --- a/docs/4.0/layout/media-object.md +++ b/docs/4.0/layout/media-object.md @@ -25,7 +25,7 @@ Below is an example of a single media object. Only two classes are required—th {% callout warning %} ##### Flexbug #12: Inline elements aren't treated as flex items -Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display-property/), as an easy fix. +Internet Explorer 10-11 do not render inline elements like links or images (or `::before` and `::after` pseudo-elements) as flex items. The only workaround is to set a non-inline `display` value (e.g., `block`, `inline-block`, or `flex`). We suggest using `.d-flex`, one of our [display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/), as an easy fix. **Source:** [Flexbugs on GitHub](https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items) {% endcallout %} diff --git a/index.html b/index.html index 1a1e5ca7dd92b86c28e88d5928cdc47a00bbef3d..723a95346fa41902d026b50a7fa8961babfff5b6 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@ layout: home <h4>Managed dependencies</h4> <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p> <p> - <a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a> + <a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download#package-managers">View install methods</a> </p> </div> <div class="col-sm-6 col-md-5 mb-3 pl-md-4">