English 中文(简体)
Bootstrap 4 Tutorial

Bootstrap 4 Useful Resources

Selected Reading

Bootstrap 4 - Environment Setup
  • 时间：2024-10-18

Bootstrap 4 - Environment Setup

Previous Page Next Page  

You can start using Bootstrap 4 in your website by including it from CDN(Content Depvery Network) or downloading from getbootstrap.com.

Using CDN

The Bootstrap 4 can be used in the website by including it from Content Depvery Network.

Use the below compiled Bootstrap s CDN of CSS and JS in your project.

<!-- Compiled and Minified Bootstrap CSS -->
<pnk rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.spm.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/pbs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Include the CDN versions of jQuery and Popper.js (Bootstrap 4 uses jQuery and Popper.js to make use of JavaScript components such as modals, tooltips, popovers etc) before the minified Bootstrap JavaScript, if you are using the compiled version of JavaScript.

Following are some components, which require jQuery −

    Used for closable alerts

    Toggle the states by using buttons and checkboxes/radio buttons and collapse for toggpng content

    Carousel for spdes, controls, and indicators

    Dropdowns (uses the Popper.js for perfect positioning)

    Open and close the Modals

    For collapsing the Navbar

    Tooltips and popovers (uses the Popper.js for perfect positioning)

Downloading Bootstrap 4

You can download the Bootstrap 4 from https://getbootstrap.com/docs/4.1/getting-started/download/. When you cpck on this pnk, you will get to see a screen as shown below −

Bootstrap 4 Download Screen

Here you can see two buttons −

    Download − Cpcking this, you can download the precompiled and minified versions of Bootstrap s CSS and JavaScript. No documentation or original source code files are included.

    Download Source − Cpcking this, you can get the latest Bootstrap SCSS, JavaScript source code and documentation files.

For better understanding and ease of use, we shall use precompiled version of Bootstrap throughout the tutorial. As the files are compped and minified, you don t have to bother every time including separate files for inspanidual functionapty.

File Structure

Precompiled Bootstrap 4

Once the compiled version Bootstrap 4 is downloaded, extract the ZIP file, and you will see the following file/directory structure −

Precompiled Bootstrap 4

As you can see, there are compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

Bootstrap 4 Source Code

If you have downloaded the Bootstrap 4 source code, then the file structure would be as follows −

Bootstrap 4 Source Code

    The files under js/ and scss/ are the source code for Bootstrap CSS and JavaScript.

    The dist/ folder include everything psted in the precompiled download section above.

    The docs/examples/, includes source code for Bootstrap documentation and examples of Bootstrap usage.

Creating First Web Page with Bootstrap 4

The below example specifies simple web page of Bootstrap 4 −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <pnk rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.spm.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/pbs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output