📌  相关文章
📜  bootstrap 4 6 cdn - Html (1)

📅  最后修改于: 2023-12-03 14:59:32.607000             🧑  作者: Mango

Bootstrap 4 CDN

Bootstrap is a popular framework for building responsive and mobile-first websites, and the simplest way to get started is by using the Bootstrap 4 CDN.

What is a CDN?

A CDN (Content Delivery Network) is a group of servers distributed around the world with the purpose of providing faster and more reliable access to web content. When you use a CDN to load a third-party library or framework hosted on one of its servers, your browsers will download the files from a server that is geographically closer to them, reducing latency and improving page load times.

How to include Bootstrap 4 from the CDN

To use Bootstrap 4 in your HTML code, you need to include the CSS and JavaScript files in your page. You can do that by adding the following links to the <head> section of your HTML document:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-WNrLzLbHrRo68gyfddNbxsrE7ZslfoqN2fe7QbSH9XlBN7y/5/kzRtt7VnkbaFCM" crossorigin="anonymous">

<!-- JavaScript (jQuery is required) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-/s674s+Lk4IvPgS61E6hTkJzgCUpG9aq+SG80S6WUkUN6U/mAyJaU/NIaI90peB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-x+IL3qyrNQ2eJAFsWdZ8SCsA4b+4MEQCvJAEWmT8T+fHpMmS+VG+WpD+FoZP+owu" crossorigin="anonymous"></script>

Make sure to include the jQuery library before the Bootstrap JavaScript file.

Examples

Here are some examples of how to use Bootstrap 4 classes and features in your HTML code:

Grid system

The Bootstrap grid system allows you to create responsive layouts by dividing the container into rows and columns. Here's an example:

<div class="container">
  <div class="row">
    <div class="col-sm-4">First column</div>
    <div class="col-sm-4">Second column</div>
    <div class="col-sm-4">Third column</div>
  </div>
</div>

This will create three equal-width columns on small devices (sm).

Buttons

Bootstrap provides several classes to style buttons. Here's an example:

<button class="btn btn-primary">Primary button</button>
<button class="btn btn-secondary">Secondary button</button>
<button class="btn btn-success">Success button</button>
<button class="btn btn-danger">Danger button</button>
Forms

Bootstrap also includes styles for forms, inputs, and labels. Here's an example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
Conclusion

The Bootstrap 4 CDN is an easy and fast way to incorporate the Bootstrap framework into your website. By using it, you can take advantage of Bootstrap's features without worrying about hosting or updating the files yourself.