-- name: Chinese
- code: zh
- description: Bootstrap 中文文档
- url: https://v4.bootcss.com/
-
- name: Chinese
code: zh
description: Bootstrap 4 中文文档教程
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 %}
### 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">
## 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">
`[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
<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
### 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 %}
{% 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 %}
<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">
projects / thirdparty / bootstrap.git / commitdiff
