Community Learn Tools Library Leisure
search
English
Home > Web Front-end > Bootstrap Tutorial > body text

How to introduce html in bootstrap

下次还敢
Release： 2024-04-05 02:27:15
Original
434 people have browsed it

Bootstrap introduces HTML

How to introduce Bootstrap into HTML?

Introduce Bootstrap into HTML by following these steps:

  1. Download the Bootstrap file:

    • Visit Bootstrap Official website (https://getbootstrap.com/) and download the latest stable version.
    • Unzip the downloaded ZIP file.

  2. Copy the CSS and JS files:

    • Place bootstrap.css in the unzipped folder Copy to your HTML file directory.
    • Copy bootstrap.js in the unzipped folder to your HTML file directory.

  3. Link CSS and JS files in HTML:

    • In HTML file &lt ;head> section, link to the stylesheet: 

      <code class="html"><link rel="stylesheet" href="bootstrap.css"></code>
      Copy after login

    • At the bottom of the HTML file, link to the JavaScript: 

      <code class="html"><script src="bootstrap.js"></script></code>
      Copy after login

Example:

<code class="html"><!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container">
    <h1>Hello, Bootstrap!</h1>
  </div>
  <script src="bootstrap.js"></script>
</body>
</html></code>
Copy after login

Use CDN:

You can also use CDN (Content Delivery Network) to introduce Bootstrap, it can Improve loading speed and performance.

Use the following code in the <head> section of the HTML file: 

<code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script></code>
Copy after login

The above is the detailed content of How to introduce html in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css bootstrap
source：php.cn
Previous article：How to build a website with bootstrap Next article：How to introduce bootstrap into Eclipse
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template