三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
2024-06-07 12:00:25
1.1 警告提示框
1.2 徽章和面包屑
1.3 按钮和按钮组
1.4 卡片
1.5 列表组
1.6 导航和选项卡
1.7 分页和进度条
1.8 巨幕和旋转图标
1.9 轮播图
1.10 折叠菜单
1.11 下拉菜单
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>18.卡片</title><!-- 移动设备优先 设置宽度为设备屏幕的宽度，初始化缩放的比例，自动适应手机屏幕的宽度--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><!-- 引入Bootstrap CSS --><link rel="stylesheet" href="./bootstrap-4.6.0-dist/css/bootstrap.css"></head><style type="text/css">body {padding: 20px;}</style><body><div class="dropdown"><button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">下拉菜单</button><div class="dropdown-menu"><a href="#" class="dropdown-item">选项一</a><a href="#" class="dropdown-item">选项二</a><a href="#" class="dropdown-item">选项三</a></div></div><br><div class="dropdown btn-group"><button type="button" class="btn btn-success">下拉菜单</button><button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item active">选项一</a><a href="#" class="dropdown-item">选项二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">选项三</a><a href="#" class="dropdown-item disabled">选项三</a></div></div><br><br><br><br><br><br><br><br><br><br><br><br><div class="dropdown btn-group dropup"><button type="button" class="btn btn-success">下拉菜单</button><button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item active">选项一</a><a href="#" class="dropdown-item">选项二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">选项三</a><a href="#" class="dropdown-item disabled">选项三</a></div></div><br><br><br><br><br><br><br><br><br><br><br><br><div class="dropdown btn-group dropright"><button type="button" class="btn btn-success">下拉菜单</button><button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item active">选项一</a><a href="#" class="dropdown-item">选项二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">选项三</a><a href="#" class="dropdown-item disabled">选项三</a></div></div><!-- 先引入 jQuery.js,再引入bootstrap.js --><script src="./js/jquery-3.5.0.js"></script><script src="bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script></body>
</html>1.12 导航条
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>18.卡片</title><!-- 移动设备优先 设置宽度为设备屏幕的宽度，初始化缩放的比例，自动适应手机屏幕的宽度--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><!-- 引入Bootstrap CSS --><link rel="stylesheet" href="./bootstrap-4.6.0-dist/css/bootstrap.css"></head><style type="text/css">body {padding: 20px;}</style><body><nav class="navbar navbar-expand-md navbar-dark bg-primary"><span class="navbar-brand">LOGO</span><button class="navbar-toggler" data-toggle="collapse" data-target="#navbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbar"><ul class="navbar-nav ml-auto"><li class="nav-item "><a class="nav-link" href="#">首页</a></li><li class="nav-item active"><a class="nav-link" href="#">菜单1</a></li><li class="nav-item"><a class="nav-link" href="#">菜单2</a></li><li class="nav-item"><a class="nav-link" href="#">菜单3</a></li></ul></div></nav><br><nav class="navbar navbar-expand-md navbar-dark bg-primary"><span class="navbar-brand">LOGO</span><button class="navbar-toggler" data-toggle="collapse" data-target="#navbar2"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbar2"><div class="navbar-nav ml-auto"><a class="nav-item nav-link active" href="#">首页</a><a class="nav-item nav-link" href="#">菜单1</a><a class="nav-item nav-link" href="#">菜单2</a><a class="nav-item nav-link disabled" href="#">菜单3</a></div></div></nav><!-- 先引入 jQuery.js,再引入bootstrap.js --><script src="./js/jquery-3.5.0.js"></script><script src="bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script></body>
</html>1.13 滚动监听
1.14 轻量弹框
1.15 模态框
1.16 表单
<form action="" class="form-row"><div class="form-group col-sm-6"><label for="user">请输入用户名：</label><input type="text" id="user" class="form-control"></div><div class="form-group col-sm-6"><label for="password">请输入密码：</label><input type="password" id="password" class="form-control"></div><div class="form-check col-sm-12 "><input type="checkbox" id="check" class="form-check-input"><label for="check">保存用户名和密码</label></div><div class="form-group col-sm-12"><label for="city">选择城市：</label><select multiple="multiple" name="" id="city" class="form-control"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select></div><div class="form-group col-sm-12"><label for="info">请输入备注：</label><textarea name="info" id="info" rows="10" cols="30" class="form-control"></textarea></div><div class="form-group col-sm-12"><label for="file">上传头像：</label><input type="file" id="file" class="form-control-file"></div><div class="form-group col-sm-12"><label for="email1">请输入电子邮箱：</label><input type="text" id="email1" class="form-control form-control-lg"></div><div class="form-group col-sm-12"><label for="email2">请输入电子邮箱2：</label><div class="input-group"><div class="input-group-prepend"><span class="input-group-text">@</span></div><input type="text" id="email2" class="form-control"></div></div><div class="form-group col-sm-12"><label for="range">请选择大小：</label><input type="range" id="range" class="form-control-range"></div><div class="form-inline col-sm-12"><div class="form-check"><input type="checkbox" id="check1" class="form-check-input"><label for="check1" class="form-check-label">复选框</label></div><div class="form-check"><input type="radio" id="radio" class="form-check-input"><label for="radio" class="form-check-label">单选框</label></div></div></form>
三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）相关推荐
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
- html菜单箭头,html – 纯CSS选择菜单/下拉菜单：如何制作右箭头功能？
我根据解决方案使用自定义选择/下拉菜单: https://stackoverflow.com/a/10190884/1318135 这个功能很棒,只有在单击该框时才显示选项.单击右侧的"箭头 ...
- jq4 实例（磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏）...
1.磁力图片: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- 1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5. 此外,所有的 <p> 元素 margin-top ...
- html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
- 怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
- CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言 该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
- 下拉菜单，汉堡菜单，Mega menu… 学习5种常见UI导航设计
可访问的导航将引导用户浏览 UI 中的信息流,并帮助他们完成任务.提高用户体验. Web/移动转化率.同样,如果用户无法在网站或app找到方向,那么该网站/app对他们毫无用处 -- 糟糕的导航设计会 ...
- android 下拉菜单触发_Android实现三级联动下拉框 城市选择器（简单）
主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值 先贴出效果图: 主布局代码: xmlns:tools="http://s ...
最新文章
- [Machine Learning with Python] Data Visualization by Matplotlib Library
- android ble5.0添加扫描过滤,bluetooth-lowenergy
- ActionScript 3.0 Step By Step系列(五)：走在面向对象开发的路上,以类为基础去思考编程问题...
- Java项目启动时执行指定方法的几种方式
- 大作文_p2_v1.0
- 牛客练习赛36 F-Rabbit的蛋糕 (叉积求面积, 记录前缀)
- Android Studio 之 NDK篇
- 华为笔记本软件商店_华为应用市场 PC 端体验：干净好用 - 华为
- ROJECT SERVER如何与OUTLOOK集成使用
- eclise去连接mysql,Eclipse如何连接MySQL
- Bower介绍及用法(转)
- centos 时间服务器ntp
- 数据结构和算法（C语言版）期末速成基础不挂科补考
- RF（接口自动化测试）
- DwgLocker 图纸加密外发控制系统
- ArcGIS API For JavaScript 利用GP服务生成等值线、等值面（一）之生成等值线
- linux文件夹压缩与分卷压缩
- 桌面许多快捷方式图标/文件左下角出现绿色对号小图标
- 获取MP4视频关键帧图像，并保存为JPEG格式文件
- 软文成功案例，给企业带来的价值不可限量