Bootstrap框架（组件）

news2024/9/24 15:25:23

目录

      • 前言
      • 一，组件
        • 1.1，字体图标
        • 1.2，下拉菜单组件
          • 1.2.1，基本下拉菜单
          • 1.2.2，按钮式下拉菜单
        • 1.3，导航组件
          • 1.3.1，选项卡导航
          • 1.3.2，胶囊式导航
          • 1.3.3，自适应导航
          • 1.3.4，下拉菜单导航
          • 1.3.5，综合导航栏
          • 1.3.6，顶部导航栏
          • 1.3.7，底部导航栏
        • 1.4，下拉框
        • 1.5，搜索框
      • 二，分页
        • 2.1，默认分页
        • 2.2，翻页
        • 2.3，对齐翻页
      • 最后

前言

根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片
这一章我们来讲一下一些组件

一，组件

1.1，字体图标

无处不在的字体图标 如图：
在这里插入图片描述
在这里插入图片描述
它们在APP页面底部、网站导航条、登录页面或注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div>
            <!-- 设置图标 -->
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </div>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上
在这里插入图片描述

1.2，下拉菜单组件

  • 用于显示链接列表或有上下文的菜单
    • 基本下拉菜单
    • 按钮式下拉菜单
1.2.1，基本下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <!-- Single button -->
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>     
            <!-- role="separator" class="divider" 下滑线 -->
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.2.2，按钮式下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <!-- Split button -->
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离
在这里插入图片描述

1.3，导航组件

  • 导航可以便于用户查找网站所提供的各种功能服务
    • 选项卡导航
    • 胶囊式导航
    • 自适应导航
    • 下拉菜单导航
1.3.1，选项卡导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">个人中心</a></li>
            <li><a href="#">商品详情</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">联系客服</a></li>
        </ul>
    </div>
    

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.2，胶囊式导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">个人中心</a></li>
            <li><a href="#">商品详情</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">联系客服</a></li>
        </ul>
    </div>
    
    

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.3，自适应导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">联系客服</a></li>
    </ul>
    <br>
    <br>
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">购物车</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">联系客服</a></li>
    </ul>
    
    

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式
在这里插入图片描述

1.3.4，下拉菜单导航
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <ul class="nav nav-tabs">
        ...
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">购物车</a></li>
            <li><a href="#">我的订单</a></li>
            <li><a href="#">联系客服</a></li>
          </ul>
        </li>
        ...
      </ul>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.5，综合导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <div>
        <!-- 综合导航栏 -->
        <nav class="navbar navbar-default">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>
          
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">Link</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li role="separator" class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                      <li role="separator" class="divider"></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
                <form class="navbar-form navbar-left">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Link</a></li>
                  <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li role="separator" class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
    </div>
    </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.6，顶部导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <div>
        <!-- 固定在顶部 -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <ul  class="nav navbar-nav">
                    <li class="active"><a href="#">Brand</a></li>
                    <li><a href="#">Home</a></p></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
          </nav>
    </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.3.7，底部导航栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <div>
        <!-- 固定在底部 -->
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <ul  class="nav navbar-nav">
                    <li class="active"><a href="#">Brand</a></li>
                    <li><a href="#">Home</a></p></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
          </nav>
    </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.4，下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
   <!-- 下拉框 -->
   <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
  </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

1.5，搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <br>
    <br>
    <div>
        <!-- 搜索框 -->
        <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入要搜索的内容">
            <span class="input-group-addon">百度一下</span>
        </div>
    </div>
    <hr>
    <div>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入要搜索的内容">
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button">百度一下</button>
            </span>
        </div>
    </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

二，分页

2.1，默认分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <nav aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

2.2，翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <nav aria-label="...">
        <ul class="pager">
          <li><a href="#">上一页</a></li>
          <li><a href="#">下一页</a></li>
        </ul>
      </nav>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

翻页只能实现上一页和下一页的简单翻页，其常用于博客和杂志等简单站点
在这里插入图片描述

2.3，对齐翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    
    <nav aria-label="...">
        <ul class="pager">
          <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
          <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
        </ul>
      </nav>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>

在这里插入图片描述

最后

最后送大家一句司汤达的一句话：一个人只要强烈地坚持不懈地追求，他就能达到目的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/798384.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【LeetCode】114.二叉树展开为链表

【LeetCode】114.二叉树展开为链表

题目 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…
阅读更多...
【黑马头条之图片识别文字审核敏感词】

【黑马头条之图片识别文字审核敏感词】

本笔记内容为黑马头条项目的图片识别文字审核敏感词部分 目录 一、需求分析 二、图片文字识别 三、Tess4j案例 四、管理敏感词和图片文字识别集成到文章审核 一、需求分析 产品经理召集开会&#xff0c;文章审核功能已经交付了&#xff0c;文章也能正常发布审核。对于上次…
阅读更多...
【已解决】React Antd Form.List 表单校验无飘红提示的问题

【已解决】React Antd Form.List 表单校验无飘红提示的问题

背景 我想对 Form.List 构建的表单进行校验&#xff0c;比如下拉框中的内容应当至少有一个 XX&#xff0c;表单的长度不能少于多少等等对 List 内容进行校验&#xff0c;并给出飘红提示 问题 比如我有这样一段代码来实现对 list 具体内容的校验&#xff0c;但是写完后发现没有…
阅读更多...
专科程序员，想要面试获胜必须要做的两个点

专科程序员，想要面试获胜必须要做的两个点

这两天看到一篇关于专科程序员找工作的文章&#xff0c;感受到了其中的坎坷 那么作为专科程序员&#xff0c;我们应该如何获胜&#xff0c;获得工作机会呢&#xff1f; 根据我的经验&#xff0c;以下两点一定会给你带来更多的机会。 一个是学好英语 另外一个是构建自己的…
阅读更多...
高层金属做power mesh如何避免via stack

高层金属做power mesh如何避免via stack

随着工艺精进&#xff0c;pr要处理的层次也越来越多&#xff0c;如何选择power plan的层次尤为关键&#xff0c;一方面决定ir drop的大小&#xff0c;影响着芯片的功能&#xff0c;一方面决定绕线资源&#xff0c;影响面积。 选择高层metal做power mesh的关键在于厚金属&#…
阅读更多...
微信小程序开发之配置菜单跳转到自定义页面

微信小程序开发之配置菜单跳转到自定义页面

需求: 用户点击公众号菜单跳转到自定义带引流码的链接 公众号相关文档: 网页授权 | 微信开放文档 大致流程: 1.在公众号菜单配置链接: https://open.weixin.qq.com/connect/oauth2/authorize?appidXXXXXXXXXXXX&redirect_urihttps%3A%2F%2F测试域名%2Fws_dabai%2Fwe…
阅读更多...
i.MX6ULL(二十) linux platform 设备驱动

i.MX6ULL(二十) linux platform 设备驱动

Linux 系统要考虑到驱动的可重用性&#xff0c;因 此提出了驱动的分离与分层这样的软件思路&#xff0c;在这个思路下诞生了我们将来最常打交道的 platform 设备驱动&#xff0c;也叫做平台设备驱动。 1 Linux 驱动的分离与分层 1.1 驱动的分隔与分离 对于 Linux 这样一…
阅读更多...
查看电脑上NET Framework最高版本

查看电脑上NET Framework最高版本

1、使用CMD工具 1、进入路径&#xff1a; cd %WINDIR%\Microsoft.NET\Framework\v4.0.303192、查看版本 MSBuild /version2、效果
阅读更多...
【Github】自动监测 SSL 证书过期的轻量级监控方案 - Domain Admin

【Github】自动监测 SSL 证书过期的轻量级监控方案 - Domain Admin

在现代的企业网络中&#xff0c;网站安全和可靠性是至关重要的。一个不注意的SSL证书过期可能导致网站出现问题&#xff0c;给公司业务带来严重的影响。针对这个问题&#xff0c;手动检测每个域名和机器的证书状态需要花费大量的时间和精力。为了解决这个问题&#xff0c;我想向…
阅读更多...
NAT详解（网络地址转换）

NAT详解（网络地址转换）

一句话说清楚它是干什么的&#xff1a; 网络地址转换&#xff1a;是指通过专用网络地址转换为公用地址&#xff0c;从而对外隐藏内部管理的IP地址&#xff0c;它使得整个专用网只需要一个全球IP就可以访问互联网&#xff0c;由于专用网IP地址是可以重用的&#xff0c;所以NAT大…
阅读更多...
基于机器学习的供水管网水力模型

基于机器学习的供水管网水力模型

大数据、人工智能、物联网等前沿技术正推动人类社会发展发生深刻变革。2021年12月12日&#xff0c;国务院印发了《“十四五”数字经济发展规划》&#xff0c;进一步指明了各行业数字化转型发展的方向。作为传统的民生保障行业&#xff0c;供水行业也面临着向数字化智慧化转型的…
阅读更多...
2023年的前端开发还好找工作么

2023年的前端开发还好找工作么

首先可以明确写在前面的是&#xff0c;前端的确是不像之前一样&#xff0c;只会简单的基础就能轻轻松松的找到工作的&#xff0c;随着学习的人不断增多&#xff0c;市场自然会逐步提高对就业人员的要求&#xff0c;那么再以之前的要求来看待前端的话的确是不可取的 互联网在&a…
阅读更多...
机器学习深度学习——多层感知机的从零开始实现

机器学习深度学习——多层感知机的从零开始实现

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——多层感知机 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们有所帮助 为…
阅读更多...
计算机二级Python基本操作题-序号41

计算机二级Python基本操作题-序号41

1. 输入字符串s&#xff0c;按要求把s输出到屏幕&#xff0c;格式要求&#xff1a;宽度为30个字符&#xff0c;星号字符*填充&#xff0c;居中对齐。如果输入字符串超过30位&#xff0c;则全部输出。 例如&#xff1a;键盘输入字符串s为"Congratulations”&#xff0c;屏幕…
阅读更多...
基于Kaggle训练集预测的多层人工神经网络的能源消耗的时间序列预测（Matlab代码实现）

基于Kaggle训练集预测的多层人工神经网络的能源消耗的时间序列预测（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f308;3 Matlab代码实现 &#x1f389;4 参考文献 &#x1f4a5;1 概述 本文为能源消耗的时间序列预测&#xff0c;在Matlab中实现。该预测采用多层人工神经网络&#xff0c;基于Kaggle训练集预测未来能源消耗。 &am…
阅读更多...
自动化测试如何做？分层自动化测试如何实施？一篇概全...

自动化测试如何做？分层自动化测试如何实施？一篇概全...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 分层的自动化测试…
阅读更多...
qt简易闹钟

qt简易闹钟

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->stopBtn->setDisabled(true);this->setFixedSize(this->size()); //设置固定大小this->s…
阅读更多...
【Spring Cloud Alibaba】限流--Sentinel

【Spring Cloud Alibaba】限流--Sentinel

文章目录 概述一、Sentinel 是啥&#xff1f;二、Sentinel 的生态环境三、Sentinel 核心概念3.1、资源3.2、规则 四、Sentinel 限流4.1、单机限流4.1.1、引入依赖4.1.2、定义限流规则4.1.3、定义限流资源4.1.4、运行结果 4.2、控制台限流4.2.1、客户端接入控制台4.2.2、引入依赖…
阅读更多...
(双指针) 剑指 Offer 57. 和为s的两个数字 ——【Leetcode每日一题】

(双指针) 剑指 Offer 57. 和为s的两个数字 ——【Leetcode每日一题】

❓ 剑指 Offer 57. 和为s的两个数字 难度&#xff1a;简单 输入一个递增排序的数组和一个数字 s&#xff0c;在数组中查找两个数&#xff0c;使得它们的和正好是 s。如果有多对数字的和等于 s&#xff0c;则输出任意一对即可。 示例 1&#xff1a; 输入&#xff1a;nums [2…
阅读更多...
1400*C. Strong Password

1400*C. Strong Password

Example input 5 88005553535123456 2 50 56 123412341234 3 111 444 1234 4 4321 4321 459 2 49 59 00010 2 10 11output YES NO YES NO YES解析&#xff1a; 题目要求有一种密码不在数据库中即可&#xff0c;所以枚举每一位的所有可能的数字&#xff0c;记录这一位数字在数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023