使用Bootstrap CDN和jQuery的教程-「好主机」

首页 / 日本VPS推荐 / 正文

使用Bootstrap CDN和jQuery的教程

Time：2024年11月09日 Read：7 评论：42 作者：y21dr45

背景介绍

使用Bootstrap CDN和jQuery的教程

在现代Web开发中，前端框架和库扮演了至关重要的角色，它们不仅简化了开发过程，还大大提高了开发效率和代码质量，Bootstrap和jQuery是两个非常流行的工具，本文将详细介绍如何使用Bootstrap的内容分发网络（CDN）和jQuery来构建一个响应式的网页。

什么是Bootstrap？

Bootstrap是一个由Twitter开发的开源前端框架，用于快速开发响应式和移动优先的Web项目，它提供了HTML、CSS和JavaScript组件，帮助开发者轻松创建现代化的网站和应用，Bootstrap的最大特点之一就是它的栅格系统，允许开发者通过一套简单的类来创建各种布局。

什么是jQuery？

jQuery是一个快速、小巧且功能丰富的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，jQuery的简洁语法和强大的插件生态使得它成为前端开发中不可或缺的工具。

引入Bootstrap和jQuery

使用CDN引入

分发网络（CDN）是一种通过一组分布式服务器提供内容的方式，以提高内容的传输速度和可靠性，Bootstrap和jQuery都提供了CDN服务，可以通过以下方式引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap实例</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- 引入jQuery -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- 引入Popper.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>你好，世界！</h1>
    </div>
</body>
</html>

本地引入

如果出于某些原因需要本地化资源文件，可以从官网下载Bootstrap和jQuery，并在项目中引用它们：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap本地实例</title>
    <!-- 引入本地的Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 引入本地的jQuery -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 引入本地的Popper.js -->
    <script src="js/popper.min.js"></script>
    <!-- 引入本地的Bootstrap JS -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>你好，世界！</h1>
    </div>
</body>
</html>

使用Bootstrap组件

Bootstrap提供了许多预制的组件，可以快速构建出漂亮的网页，以下是一些常用组件的使用示例：

按钮

<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>

导航条

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
                <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">特性</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">定价</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
            </li>
        </ul>
    </div>
</nav>

模态框

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>模态框内容...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

轮播图

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

自定义JavaScript代码与jQuery的结合使用

除了使用Bootstrap自带的组件外，还可以结合jQuery编写自定义的JavaScript代码来操作页面元素，以下是一个简单的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap与jQuery示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://

原文链接：https://www.asoulu.com/post/85581.html

上一篇：利用CDN URL重写提升网站性能与安全性，url重写技术

下一篇：直播CDN方案，打造高效、稳定的直播传输体验，直播cdn方案

标签： bootstrap cdn jq

1. 引言