📅 最后修改于: 2023-12-03 14:59:34.981000 🧑 作者: Mango
Bootstrap 5 (BS5) is the latest version of the popular front-end development framework created by Twitter. The framework is designed to help developers create responsive, mobile-first websites and web applications quickly and easily. Using the BS5 CDN, developers can quickly and easily include all the necessary CSS, JavaScript, and optional JavaScript plugins in their HTML documents.
To get started using the BS5 CDN in your HTML documents, you need to include the necessary CSS and JavaScript files. You can do this by copying and pasting the following code snippets into your HTML document's head and body sections, respectively:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
The CSS file contains all the necessary styles for BS5's components, while the JavaScript file contains the necessary functions and plugins for those components to function properly.
Once you have included the necessary BS5 files in your HTML document, you can start using the framework's powerful components. Here are a few examples of how you might use some of BS5's most popular components:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x1080.png?text=Slide+1" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x1080.png?text=Slide+2" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x1080.png?text=Slide+3" class="d-block w-100" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Using the BS5 CDN is a quick and easy way to get started with Bootstrap 5. By including the necessary CSS and JavaScript files in your HTML documents, you can start using BS5's powerful components to create responsive, mobile-first websites and web applications.