Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Installing Bootstrap via CDN | Setting Up Environment
Bootstrap Essentials for Modern Websites

book
Installing Bootstrap via CDN

When working on a vanilla HTML, CSS, and JS project, we can use a CDN to include Bootstrap's CSS and JavaScript files directly into the HTML document without downloading them to the local machine.

Here's how we can include Bootstrap via CDN in the HTML file:

html
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

Behavior Difference

In the examples below, we will demonstrate the difference between default browser styles and styles applied with Bootstrap. We will not focus on Bootstrap usage at this time.

Default Browser Styles

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Example</title>
</head>
<body>
<button class="btn btn-primary">Primary Button</button>
</body>
</html>

Styles Applied with Bootstrap

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Example</title>

<!-- Include Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<button class="btn btn-primary">Primary Button</button>

<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Explanation

Both examples feature a button element adorned with the classes btn and btn-primary. The appearance is accomplished solely by applying these two classes provided by Boostrap without the need for additional CSS styling.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 2

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

We use cookies to make your experience better!
some-alt