【无标题】

最新推荐文章于 2024-06-03 23:50:56 发布
最新推荐文章于 2024-06-03 23:50:56 发布
阅读量112 收藏
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52765407/article/details/124022256
版权

boostrap作业

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="./css/index.css">
    <title>首页</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container-fluid  ">
          <a class="navbar-brand" href="#"><img src="./img/logoi.png" alt=""></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">测试</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   更多
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">手机版本</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜一搜" aria-label="Username" aria-describedby="basic-addon1">
                    <span class="input-group-text" id="basic-addon1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                      </svg></span>
                </div>
            </form>
          </div>
        </div>
      </nav>
      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 5"></button>
    
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./img/xin1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/xin2.gif" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/xin3.jpeg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/xin4.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/xin5.png" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
    -->
  </body>
</html>

在这里插入图片描述

Anti_无所谓
关注
Bootstrap v5 Navigation Bar 导航栏
SimonHeeeee的博客
10-18 724
Bootstrp 5 CSS <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous"> Navigation Bar
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
bfc，圣杯结构
qq_40281275的博客
10-25 283
BFC display 属性为 block, list-item, table 的元素，会产生BFC. 大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。 这个BFC 有着具体的布局特性： 有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。 什么情况下可以让元素产生BFC 以上盒子具有BFC条件了，就是说有资质了，但是怎...
bootstrap5
云墨知秋的博客
11-06 3436
Bootstrap v5 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网 (bootcss.com)
BootStrap V5：现代化前端开发的必备工具
DevCorner的Pro技术博客
08-15 619
BootStrap V5是一款开源的前端框架，由Twitter开发并维护。它基于HTML、CSS和JavaScript，提供了丰富的组件和样式，使开发者能够快速构建响应式的网页界面。BootStrap V5具有易用性、灵活性和可定制性的特点，被广泛应用于各种Web开发项目中。BootStrap V5支持响应式设计，可以根据不同设备的屏幕尺寸自动调整网页布局和样式，从而提供更好的用户体验。开发者只需使用BootStrap提供的CSS类，即可轻松实现响应式布局。
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
C#创建无标题栏窗体
03-16
摘要:C#源码,菜单窗体,无标题栏窗体　C#创建无标题栏窗体源码，实际上是动态显示或隐藏窗体的标题栏，当隐藏的时候就类似窗体没有了标题栏，当显示标题栏的时候，鼠标按住标题栏即可拖动窗体，以前记得网友需要此...
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
BootstrapV5:Bootstrap版本5练习
05-07
BootstrapV5 Bootstrap版本5练习
BootstrapBlazorUI框架 v5.0
11-24
为您提供BootstrapBlazorUI框架下载，Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：1、使用 C# 代替 JavaScript 来创建丰富的交互式 UI。2、共享使用 .NET 编写的服务器端和客户端应用逻辑。3、将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。使用 .NET 进行客户端 Web 开发可提供以下优势：1、使用 C# 代替 JavaScript 来编写代码。2、
hugo-bootstrap-5:使用 Bootstrap 5 的简单 Hugo 主题
05-29
Hugo Bootstrap v5 主题 这是一个使用的简单 Hugo 主题，灵感来自 。 安装 您可以将主题安装为克隆或子模块。 我推荐后者。 从 Hugo 站点的根目录，键入以下内容： $ git submodule add https://github.com/NotWoods/hugo-bootstrap-5.git themes/hugo-bootstrap-5 $ git submodule init $ git submodule update 现在，您可以通过更新子模块来获取主题的更新： $ git submodule update --remote themes/hugo-bootstrap-5 演示版 您可以找到演示。 屏幕截图 配置 检查exampleSite/config.toml以获取示例配置。 牌 可以通过添加您自己的布局layouts/partial
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
09-01
主要为大家详细介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
圣杯布局
良雨
05-10 577
圣杯布局 概述：布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局 布局要求有几点： 三列布局，中间宽度自适应，两边定宽； 中间栏要在浏览器中优先显示渲染 允许三列中的任意一列成为最高列 1、DOM结构 首先定义出整个布局的DOM结构，主要部分是由container包裹的center、left、right三部分组成。其中center定义在最前面 <div class...
详解圣杯布局
技术无止境，人生仍探索。
04-30 1060
圣杯布局 html结构： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc...
前端框架 Bootstrap 5.0 alpha 发布
寒冰屋的专栏
06-21 945
Bootstrap 团队发布了 Bootstrap 5 的 Alpha 版本。Bootstrap 5 的两个重要变化是，它不再依赖 jQuery，并且不再支持 Internet Explorer。针对 5.0 版本的其他改进还包括有：新的 API、对网格系统的更改以及改进的文档等。 具体更新内容分如下： 新外观 以 v4.5.0 中文档首页的改进为基础，并为其余文档提供了更新的外观。文档页面不再全角显示，以提高可读性。此外，还升级了侧边栏，以使用可扩展部分（由 Collapse 插件提供支持）来实现.
Bootstrap框架最新V5 快速入门&直通
最新发布
qingwan_91的博客
06-03 1704
一篇文章直通Bootstrap
Bootstrap v5版本的HTML模板
强者征服今天，懦夫哀叹昨天，懒汉坐等明天。
11-27 663
一个基本的Bootstrap v5版本的HTML模板。这是一个非常基础的模板，包含了Bootstrap CSS和JS的引用，以及一个基本的HTML结构。这个模板中，我已经包含了Bootstrap v5的CSS和JS的CDN链接。更多的Bootstrap组件或者样式，您可以参考Bootstrap的官方文档。标签中，您可以添加您自己的HTML内容。
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值