Bootstrap 5-圆角胶囊

于 2024-05-10 03:06:07 发布
阅读量230 收藏
点赞数 2
分类专栏： Bootstrap 5 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73839298/article/details/138629385
版权

rounded-pill

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 bootstrap.css -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        span {
            display: inline-block;
            width: 70px;
            height: 70px;
            margin: 6px;
            background-color: #282a36;
        }
    </style>
</head>
<body>

    <span class="rounded-pill" style="width:130px"></span>

</body>
</html>
<!-- 
    圆角胶囊：rounded-pill

    注意！
            在Bootstrap 5中的圆角胶囊类rounded-pill是用于创建一个带有大圆角的矩形元素，使得元素的边缘看起来更加圆润，类似于一个药丸的形状。
-->

Jealous_-
关注
专栏目录
BootStrap4
weixin_45027950的博客
09-29 1212
[[toc]] Bootstrap4.4介绍 全球最受欢迎的前端组件库 用于开发响应式布局、移动设备优先的 WEB 项目 基于JQuery Bootstrap4.4的安装 本地安装 官网：https://v4.bootcss.com/ CDN引用<!-- Bootstrap4.4 CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.mi
（学习笔记）Bootstrap基础--Web组件
Clew123的博客
10-17 1718
学习笔记，方便查看。文本标题<h1>Bootstrap标题一<small>我是副标题</small></h1> <h2>Bootstrap标题二<small>我是副标题</small></h2> <h3>Bootstrap标题三<small>我是副标题</small></h3> <h4>Bootstrap标题四<small>我是副标题</small></h4> <h5>Bootstrap标题五<sm
Bootstrap制作胶囊标签页
yangaoyuan1999的博客
12-15 1180
胶囊标签页： 1.使用一个完整的标签页可以分为页头选择卡和内容两部分 2.页头使用ul标签在ul标签中能够添加.nav和.nav-tabs类，将会应用Bootstrap标签页样式， 添加.nav和.nav-pills类会应用胶囊标签样式 3.需要几个标签项就添加几个li 4.在li标签中添加a标签，a标签的href的值直接跟标签页下面的内容div的id关联，十分重要 5.在a标签中添加data-toggle="tab"或data-toggle="pill" <!DOCTYPE html> &l
html5+css3胶囊按钮代码
最新发布
supermodule的博客
02-09 512
【代码】html5+css3胶囊按钮代码。
学习 Bootstrap 5 之 Borders
qq_37354060的博客
01-17 2855
学习 Bootstrap 5 之 边框边框 (Borders)1. 添加边框 (Border)(1). 四周添加边框 class = "border"(2). 仅添加上边框 class = "border-top"(3). 仅添加下边框 class = "border-bottom"(4). 仅添加左边框 class = "border-start"(5). 仅添加右边框 class = "border-end"(6). 除去四周边框 class = "border-0"(7). 仅除去上边框 class
Bootstrap 5-导航-选项卡下拉菜单/胶囊下拉菜单
m0_73839298的博客
09-23 1129
4.给其中一个导航菜单项nav-item设置名为dropdown的类，来表示导航菜单项具有下拉列表的功能，来表示导航菜单项是一个下拉列表，在超链接a中设置名为dropdown-toggle来表示下拉菜单样式，属于js属性，下拉列表是需要点击触发事件的，就设置data-bs-toggle，data-bs-toggle的意思就是表示当点击时触发什么事件？1.导航菜单用ul>li表示实现，首先创建一个导航菜单容器nav，并把导航菜单容器显示为导航菜单胶囊，使用nav-pills。什么是导航菜单选项卡下拉列表？
BootStrap基础知识学习-No.1
qq_27348951的博客
12-05 1296
Bootstrap基础知识！
Python学习笔记：5.3.4 bootstrap框架
元文的博客
02-10 1966
本文主要讲解了bootstrap框架简介、响应式设计、bootstrap响应式布局、bootstrap组件等相关内容。
BootStrap #响应式布局 #组件
weixin_47234657的博客
12-03 601
响应式布局 1.啥叫响应式：根据浏览器页面的设备不同 自动的改变布局 图片 文本 不会影响体验 2.编写响应式的网页： (1)视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> width=device-width 视口宽度为设备宽度 initial-scale=1.0 初始化不允许缩放 maximum-s
BootStrap 入门教程学习摘要笔记
抓更够
08-15 1799
个人在学习BootStrap入门教程时做的摘要笔记 时不时更新
1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
weixin_45954184的博客
01-31 419
bootstrap
【前端开发】bootstrap框架：导航元素
`雾博客
06-18 963
表格导航或标签 创建一个标签式的导航菜单： 以一个带有.nav类 的无序列表开始 添加 .nav-tabs类水平排序 <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li&
bootstrap4--常用布局组件二
zxn200125的博客
12-17 1060
bootstrap4常用布局组件中图像形状、信息提示框、进度条、加载效果、徽章等功能介绍与演示
学习Bootstrap 5的第十五天
m0_74293254的博客
10-29 395
Bootstrap 5 实用工具边框Bootstrap 5提供了一系列的边框类，让开发者可以方便地为元素添加或删除边框。这些边框类都是以"border-"为前缀的CSS类，其后跟着不同的属性值来描述边框的样式、颜色和大小等。此外，Bootstrap 5还提供了更加细粒度的边框类，可以通过组合不同的属性值来实现更加个性化的边框样式。边框圆角在Bootstrap 5中，您可以使用rounded类为元素添加圆角。通过使用不同的rounded类，您可以实现不同程度和形状的圆角效果。
Bootstrap5 组件
qq_44174346的博客
08-04 1296
.badge bg-secondary .badge rounded-pill.progress .progress-bar .progress-bar-striped 条纹 .progress-bar-animated 动画 .spinner-border .text-muted .spinner-grow 闪烁 .spinnner-border-sm 加载效果大小 ul .pagination li .page-link .active 面包屑导航 .breadcrumb .b
Bootstrap5 徽章（Badges）
T0620514的博客
12-09 168
Bootstrap5 徽章（Badges）
bootstrap的Hello World
weixin_34122604的博客
02-14 281
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"...
bootstrap ---- 边框效果
Cg_Companion_Xi的博客
05-10 772
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> .
Bootstrap的颜色与边框
jwz934738949的博客
07-04 2754
颜色 使用.text-实现特定的颜色，其中可以为success,danger,warning,primary,secondary,light,dark,muted,white,black 其中white与black还可以设置为text-white-50，text-black-50,分别表示颜色的一半 使用.text-*也可以实现超链接的点击与悬停，但是white与muted不支持 .bg-可以实现背景颜色的设置，其中与文本颜色一致，多一个transparent，用来设置背景色为透明 边框 使用.bor
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
这个命令的作用是在Keystone中创建初始用户、服务和端点，以及设置管理员和服务用户的凭据。在运行此命令之前，您需要确保已经安装了Keystone，并且具有管理员权限。 该命令需要指定以下参数： - `--bootstrap-password`：用于设置管理员用户的密码。 - `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于设置Keystone的区域ID。 下面是运行此命令的示例： ``` sudo keystone-manage bootstrap --bootstrap-password cqu2022 \ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne ``` 请注意，在运行此命令后，您将创建一个具有管理员角色的用户，并设置了管理员和服务用户的凭据。同时，您还将创建服务和端点以供其他OpenStack服务使用。如果您需要创建更多的用户、服务和端点，请参考Keystone的文档以获取更多信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值