mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
Merge branch 'master' into v4
Conflicts: _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.css.map dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/js/bootstrap.min.js docs/_includes/components/thumbnails.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/customizer-variables.html docs/_includes/footer.html docs/_includes/getting-started/download.html docs/_includes/getting-started/template.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/tooltips.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/assets/js/src/customizer.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/js/bootstrap.js docs/dist/js/bootstrap.min.js docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/non-responsive/index.html docs/examples/theme/index.html grunt/configBridge.json less/alerts.less less/badges.less less/jumbotron.less less/panels.less less/tables.less less/theme.less less/variables.less package.json scss/_button-group.scss scss/_buttons.scss scss/_forms.scss
This commit is contained in:
Mark Otto
+13
-13
@@ -98,16 +98,6 @@
|
||||
origin: >
|
||||
Bootstrap#12078
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
summary: >
|
||||
`<input type="password">` sporadically causes bad widths on floated elements.
|
||||
upstream_bug: >
|
||||
Chromium#377346
|
||||
origin: >
|
||||
Bootstrap#13892
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome
|
||||
@@ -118,6 +108,16 @@
|
||||
origin: >
|
||||
Bootstrap#14409
|
||||
|
||||
-
|
||||
browser: >
|
||||
Chrome (Windows & Linux)
|
||||
summary: >
|
||||
Animation glitch when returning to inactive tab after animations occurred while tab was hidden.
|
||||
upstream_bug: >
|
||||
Chromium#449180
|
||||
origin: >
|
||||
Bootstrap#15298
|
||||
|
||||
-
|
||||
browser: >
|
||||
Safari (OS X)
|
||||
@@ -156,7 +156,7 @@
|
||||
summary: >
|
||||
Small font size when printing webpage with fixed-width `.container`.
|
||||
upstream_bug: >
|
||||
WebKit#138192
|
||||
WebKit#138192, Safari#19435018
|
||||
origin: >
|
||||
Bootstrap#14868
|
||||
|
||||
@@ -166,7 +166,7 @@
|
||||
summary: >
|
||||
Alpha linear-gradient has dark line at its edge.
|
||||
upstream_bug: >
|
||||
WebKit#139803
|
||||
WebKit#139803, Safari#19434933
|
||||
origin: >
|
||||
Bootstrap#15205
|
||||
|
||||
@@ -196,6 +196,6 @@
|
||||
summary: >
|
||||
`display: block` causes text of temporal `<input>`s to become vertically misaligned
|
||||
upstream_bug: >
|
||||
WebKit#139848
|
||||
WebKit#139848, Safari#19434878
|
||||
origin: >
|
||||
Bootstrap#11266, Bootstrap#13098
|
||||
|
||||
@@ -32,7 +32,8 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
|
||||
{% if site.github %}
|
||||
<script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
|
||||
{% else %}
|
||||
|
||||
+69
-13
@@ -40,10 +40,10 @@ Individual form controls automatically receive some global styling. All textual
|
||||
|
||||
## Inline forms
|
||||
|
||||
Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
|
||||
Add `.form-inline` to your `<form>` or a parent element for left-aligned and inline-block controls. **This only applies to form controls within viewports that are at least 768px wide.**
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Requires custom widths</h4>
|
||||
<h4>May require custom widths</h4>
|
||||
<p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
@@ -51,15 +51,35 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
|
||||
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
|
||||
</div>
|
||||
|
||||
### Visible labels
|
||||
|
||||
{% example html %}
|
||||
<div class="bs-example" data-example-id="simple-form-inline">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputName2">Name</label>
|
||||
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail2">Email</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Send invitation</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Hidden labels
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputEmail2">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
|
||||
<label class="sr-only" for="exampleInputEmail3">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputPassword2">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
|
||||
<label class="sr-only" for="exampleInputPassword3">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
@@ -86,7 +106,7 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
|
||||
|
||||
## Horizontal forms
|
||||
|
||||
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
|
||||
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form or form control's parent. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
|
||||
|
||||
{% example html %}
|
||||
<form class="form-horizontal">
|
||||
@@ -410,18 +430,30 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
||||
{% example html %}
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||||
<input type="text" class="form-control" id="inputSuccess2">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputSuccess2Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
<div class="form-group has-warning has-feedback">
|
||||
<label class="control-label" for="inputWarning2">Input with warning</label>
|
||||
<input type="text" class="form-control" id="inputWarning2">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
|
||||
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputWarning2Status" class="sr-only">(warning)</span>
|
||||
</div>
|
||||
<div class="form-group has-error has-feedback">
|
||||
<label class="control-label" for="inputError2">Input with error</label>
|
||||
<input type="text" class="form-control" id="inputError2">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
|
||||
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
|
||||
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputError2Status" class="sr-only">(error)</span>
|
||||
</div>
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
|
||||
</div>
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
@@ -434,6 +466,18 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
|
||||
<div class="col-sm-9">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
|
||||
</div>
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@@ -447,6 +491,18 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success has-feedback">
|
||||
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">@</span>
|
||||
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
|
||||
</div>
|
||||
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
||||
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
|
||||
|
||||
{% example html %}
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -176,7 +176,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -230,7 +230,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="offcanvas.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="tooltip-viewport.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -45,6 +45,13 @@ Bootstrap is available as [an npm package](https://www.npmjs.org/package/bootstr
|
||||
|
||||
{% highlight bash %}$ npm install bootstrap{% endhighlight %}
|
||||
|
||||
### Autoprefixer required for Less/Sass
|
||||
`require('bootstrap')` will load all of Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
|
||||
|
||||
Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its Less/Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.
|
||||
Bootstrap's `package.json` contains some additional metadata under the following keys:
|
||||
|
||||
- `less` - path to Bootstrap's main [Less](http://lesscss.org) source file
|
||||
- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
|
||||
|
||||
### Autoprefixer required
|
||||
|
||||
Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) to deal with [CSS vendor prefixes](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm). If you're compiling Bootstrap from its source Sass and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this as Autoprefixer is already integrated into our Gruntfile.
|
||||
|
||||
@@ -133,7 +133,7 @@ Use the `focus` trigger to dismiss popovers on the next click that the user make
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
<a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
{% endexample %}
|
||||
|
||||
{% highlight js %}
|
||||
@@ -271,19 +271,19 @@ Initializes popovers for an element collection.
|
||||
|
||||
#### .popover('show')
|
||||
|
||||
Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
|
||||
Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.
|
||||
|
||||
{% highlight js %}$('#element').popover('show'){% endhighlight %}
|
||||
|
||||
#### .popover('hide')
|
||||
|
||||
Hides an element's popover.
|
||||
Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
|
||||
|
||||
{% highlight js %}$('#element').popover('hide'){% endhighlight %}
|
||||
|
||||
#### .popover('toggle')
|
||||
|
||||
Toggles an element's popover.
|
||||
Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
|
||||
|
||||
{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
|
||||
|
||||
|
||||
@@ -241,19 +241,19 @@ Attaches a tooltip handler to an element collection.
|
||||
|
||||
#### .tooltip('show')
|
||||
|
||||
Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.
|
||||
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
|
||||
|
||||
{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
|
||||
|
||||
#### .tooltip('hide')
|
||||
|
||||
Hides an element's tooltip.
|
||||
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
||||
|
||||
{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
|
||||
|
||||
#### .tooltip('toggle')
|
||||
|
||||
Toggles an element's tooltip.
|
||||
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
|
||||
|
||||
{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
|
||||
|
||||
|
||||
+1
-1
@@ -355,7 +355,7 @@ Move columns to the right using `.col-md-offset-*` classes. These classes increa
|
||||
|
||||
### Example: Nesting columns
|
||||
|
||||
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
|
||||
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
|
||||
|
||||
{% example html %}
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user