Bootstrap4 official documentation | Introduction to new features

Bootstrap is a simple, intuitive, and powerful front-end development framework that makes web development faster and easier. It is the world's most popular front-end framework for building responsive, mobile-device-first WEB sites.

Getting started with Bootstrap 4

installation

Introduced by download

• Method 1: Download the source file and import it to the project page.
  By downloading the source files of Bootstrap's Sass, JavaScript and documentation, use your own process tool to compile Bootstrap. Download source files
• Method 2: Pre-compiled CSS and JS files
  Download the pre-compiled files of Bootstrap v4.5.0 and add them to the project. Download Bootstrap
• Method 3: BootstrapCDN
  uses BootstrapCDN so that there is no need to download, and use the cache to load Bootstrap's pre-compiled CSS and JS files into the project.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Note: Compiled JavaScript, don’t forget to introduce the CDN version of jQuery and Popper.js before it

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Package manager

Using some of the most popular package managers, you can drag Bootstrap source files into almost any project. No matter what the package manager is, Bootstrap will require the Sass compiler and Autoprefixer to set the settings that match our official compiled version.

• npm
  uses npm to install Bootstrap into a Node.js application:

npm install bootstrap

• Yarn
  uses yarn to install Bootstrap into the Node.js application:

yarn add bootstrap

• RubyGems
  add the following code to your Gemfile file, and then use Bundler (recommended) and RubyGems tool to install Bootstrap into your Ruby application:

$ gem 'bootstrap', '~> 4.5.0'

//不使用 Bundler，你还可以通过以下命令安装 Bootstrap 的 gem：
$ gem install bootstrap -v 4.5.0

• Composer
  You can also use Composer to install and manage Bootstrap's Sass and JavaScript files:

composer require twbs/bootstrap:4.5.0

• NuGet
  If you are a .NET developer, you can also use NuGet to install and manage Bootstrap's CSS or Sass and JavaScript files:

Install-Package bootstrap
Install-Package bootstrap.sass

content

The content included in Bootstrap includes pre-compiled and source code versions. Note that Bootstrap's JavaScript plugin requires jQuery.

Pre-compiled bootloader

After downloading, unzip the compressed folder, with the following contents:

bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map

Compiled CSS and JS (bootstrap. ), and compiled and streamlined CSS and JS (bootstrap.min. ).
Source maps (bootstrap.*.map) can be used in developer tools for some browsers.
The bundled JS file (bootstrap.bundle.js minimize bootstrap.bundle.min.js) includes Popper but not jQuery.

CSS file

The contents of the css file are as follows:

JS file

Bootstrap program source code

The Bootstrap source code download includes pre-compiled CSS and JavaScript assets, as well as source Sass, JavaScript and documentation. More specifically, it includes the following and more:

bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──docs/
│ └── 4.5/
│ └── examples/
├── js/
└── scss/

Browsers and devices

Supported browser

Bootstrap supports the latest and stable versions of all major browsers and platforms. On Windows, Internet Explorer 10-11 / Microsoft Edge is supported.
There is no explicit support to use the latest version of WebKit, Blink or Gecko alternative browsers directly or through the platform's Web view API. However, Bootstrap should (in most cases) also be displayed and run normally in these browsers. More specific support information is provided below.

https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

Mobile devices

Generally speaking, Bootstrap supports the latest version of the default browser for each major platform.
注意:Proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC mini browser, Amazon Silk) are not supported. Details are as follows:

Desktop browser

Likewise, the latest version of most desktop browsers is supported. Details are as follows:

IE browser

Support Internet Explorer 10+; IE9 and down are not.
Note: Some CSS3 attributes and HTML5 elements are not fully supported in IE10 or require prefix attributes to have full functionality. If you need IE8-9 support, please use Bootstrap 3. Get detailed information about browser support for CSS3 and HTML5 features. …

Javascript

1. Bring Bootstrap to life with optional JavaScript plugin built on jQuery

2. The plug-in can be included separately (using Bootstrap's personal js/dist/ .js), and can also use bootstrap.js or the reduced plug-in bootstrap.min.js (not including both). If you use bundlers (Webpack, summary...), you can use /js/dist/.jsUMD ready files.

3. 所有插件都依赖于jQuery（这意味着必须在插件文件之前包含jQuery ）

Disable data attribute API

To disable the data attribute API, you need to unbind all events on the document namespace. The data-api is as follows:

$(document).off('.data-api')

To locate a specific plugin, just include the name of the plugin as the namespace and the data-api namespace, as shown below:

$(document).off('.alert.data-api')

event

Bootstrap provides custom events for the sole operation of most plugins. All infinitive events provide preventDefault()functionality. This provides the ability to stop execution before the action starts. Returning from the event handler falsewill also automatically call preventDefault().

$('#myModal').on('show.bs.modal', function (e) {
    
    
  if (!data) {
    
    
    return e.preventDefault() // stops modal from being shown
  }
})

Programmatic API

Use all Bootstrap plugins via JavaScript API. All public APIs are a single linkable method and return the set of actions.

$('.btn.danger').button('toggle').addClass('fat')

// 所有方法都应接受可选的options对象，以特定方法为目标的字符串或不包含任何内容（以默认行为启动插件）：如下
$('#myModal').modal() // initialized with defaults
$('#myModal').modal({
    
     keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

Each plugin also exposes its original constructor on the Constructor property $.fn.popover.Constructor. If you want to get a particular plug-in instance, retrieve it from the elements: $('[rel="popover"]').data('popover').

Asynchronous functions and conversion

All programming API methods are asynchronous and return to the caller after the transition starts but before it ends.

In order to perform operations after the conversion is complete, you can listen to the corresponding event.

$('#myCollapse').on('shown.bs.collapse', function (e) {
    
    
  // Action to execute once the collapsible area is expanded
})

In addition, method calls to transition components will be ignored.

$('#myCarousel').on('slid.bs.carousel', function (e) {
    
    
  $('#myCarousel').carousel('2') // 1完成后将滑向2
})

$('#myCarousel').carousel('1') // 
$('#myCarousel').carousel('2') // 被忽视

default setting

You can change the default settings of the plug-in by modifying the Constructor.Default object of the plug-in:

$.fn.modal.Constructor.Default.keyboard = false

Theming

Customize Bootstrap 4 with the new built-in Sass variables to implement global style preferences to facilitate theming and component changes. In Bootstrap 3, theming is mainly replaced by variables in LESS, custom CSS and a separate theme style sheet that we include in the dist file. With a little effort, you can completely redesign the appearance of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar but slightly different approach.
Now, theming is done through Sass variables, Sass mapping and custom CSS. There are no more dedicated theme style sheets. Instead, we can enable built-in themes to add gradients, shadows, etc.

Sass

Utilize source Sass files to utilize variables, maps, mixins, etc. In the build of Bootstrap, Sass rounding accuracy has been increased to 6 (default is 5) to prevent browser rounding issues.
…
To learn more about bootstrap4 , and learn more about bootstrap4 official documentation…