mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
Merge branch 'master' into v4
This commit is contained in:
Mark Otto
@@ -7,9 +7,8 @@ Stay up to date on the development of Bootstrap and reach out to the community w
|
||||
|
||||
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com/).
|
||||
- Chat with fellow Bootstrappers using IRC in the `irc.freenode.net` server, in the [##twitter-bootstrap channel](irc://irc.freenode.net/%23twitter-bootstrap).
|
||||
- For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3).
|
||||
- For help using Bootstrap, ask on [StackOverflow using the tag `twitter-bootstrap-3`](https://stackoverflow.com/questions/tagged/twitter-bootstrap-3).
|
||||
- Find inspiring examples of people building with Bootstrap at the [Bootstrap Expo](http://expo.getbootstrap.com).
|
||||
- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
|
||||
|
||||
You can also follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap) for the latest gossip and awesome music videos.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient
|
||||
|
||||
## Install Grunt
|
||||
|
||||
**To install Grunt, you must first [download and install node.js](http://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js.
|
||||
**To install Grunt, you must first [download and install node.js](https://nodejs.org/download/)** (which includes npm). npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js.
|
||||
|
||||
From the command line:
|
||||
|
||||
@@ -22,7 +22,7 @@ From the command line:
|
||||
|
||||
When completed, you'll be able to run the various Grunt commands provided from the command line.
|
||||
|
||||
**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
|
||||
**Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.com/) and is a way to manage development dependencies through node.js. [Download and install node.js](https://nodejs.org/download/) before proceeding.
|
||||
|
||||
[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
|
||||
[gembundler]: http://bundler.io/
|
||||
|
||||
@@ -33,7 +33,7 @@ bootstrap/
|
||||
└── bootstrap.min.js
|
||||
{% endhighlight %}
|
||||
|
||||
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developers.google.com/chrome-developer-tools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). CSS [source maps](https://developer.chrome.com/devtools/docs/css-preprocessors) (`bootstrap.*.map`) are available for use with certain browsers' developer tools.
|
||||
|
||||
## Bootstrap source code
|
||||
|
||||
|
||||
@@ -36,13 +36,13 @@ Need only a part of Bootstrap's CSS or JS? Use one of the custom builds to snag
|
||||
|
||||
Compiled and minified CSS and JavaScript. No docs or original source files are included.
|
||||
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
|
||||
<a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
|
||||
|
||||
## Download source and docs
|
||||
|
||||
Source Sass, JavaScript, and documentation. **Requires a Sass compiler and [some setup](../compiling).**
|
||||
|
||||
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
<a href="{{ site.download.source }}" class="btn btn-lg btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
|
||||
|
||||
## Package managers
|
||||
|
||||
@@ -73,6 +73,8 @@ $ meteor add twbs:bootstrap
|
||||
|
||||
### Composer
|
||||
|
||||
You can also install and manage Bootstrap's Less, CSS, JavaScript, and fonts using [Composer](https://getcomposer.org):
|
||||
|
||||
{% highlight bash %}
|
||||
$ composer require twbs/bootstrap
|
||||
{% endhighlight %}
|
||||
|
||||
@@ -131,13 +131,15 @@ Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> a
|
||||
|
||||
This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.
|
||||
|
||||
See [this StackOverflow question](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) for more information.
|
||||
See [this StackOverflow question](https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge) for more information.
|
||||
|
||||
## Internet Explorer 10 in Windows Phone 8
|
||||
|
||||
Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
|
||||
|
||||
{% highlight js %}
|
||||
// Copyright 2014-2015 Twitter, Inc.
|
||||
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||
var msViewportStyle = document.createElement('style')
|
||||
msViewportStyle.appendChild(
|
||||
@@ -198,7 +200,7 @@ Out of the box, Android 4.1 (and even some newer releases apparently) ship with
|
||||
|
||||
#### Select menu
|
||||
|
||||
On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
|
||||
On `<select>` elements, the Android stock browser will not display the side controls if there is a `border-radius` and/or `border` applied. (See [this StackOverflow question](https://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with) for details.) Use the snippet of code below to remove the offending CSS and render the `<select>` as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.
|
||||
|
||||
{% highlight html %}
|
||||
<script>
|
||||
|
||||
@@ -24,10 +24,9 @@ Copy the HTML below to begin working with a minimal Bootstrap document.
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ While we don't officially support any third party plugins or add-ons, we do offe
|
||||
|
||||
## Box-sizing
|
||||
|
||||
Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](http://css-tricks.com/box-sizing/).
|
||||
Some third-party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to `* { box-sizing: border-box; }`, a rule which makes it so `padding` does not affect the final computed width of an element. These widgets expect the box model to be `content-box` instead. Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
|
||||
|
||||
You can deal with this conflict by overriding the box model back to `content-box` just for the third-party widget's section of the page:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user