三、bootstrap4 组件(警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单)

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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

吴恩达-《深度学习DeepLearning》汇总目录

从2019年2月底开始学习《数据结构与算法之美》&#xff0c;王争老师的课程非常好&#xff0c;到2019年8月底已经学完一遍&#xff0c;后面还要多次复习巩固以及OJ刷题。生命不息&#xff0c;学习不止&#xff0c;又要开始新的篇章了–《机器学习》&#xff0c;有点小兴奋&#…

javascript常用内置对象总结(重要)

Javascript对象总结 JS中内置了17个对象&#xff0c;常用的是Array对象、Date对象、正则表达式对象、string对象、Global对象 Array对象中常用方法&#xff1a; Concat&#xff08;&#xff09;&#xff1a;表示把几个数组合并成一个数组。 Join&#xff08;&#xff09;&#…

十三、axios框架学习

一、axios的基本使用 1.1 安装axios 执行命令&#xff1a;npm install axios --save 1.2 发送get请求演示 1.3 发送并发请求 有时候, 我们可能需求同时发送两个请求 使用axios.all, 可以放入多个请求的数组.axios.all([]) 返回的结果是一个数组&#xff0c;使用 axios.sp…

LeetCode解题汇总目录

此篇为学习完《数据结构与算法之美》后&#xff0c;在LeetCode刷题的汇总目录&#xff0c;方便大家查找&#xff08;CtrlFind&#xff09;&#xff0c;一起刷题&#xff0c;一起PK交流&#xff01;如果本文对你有帮助&#xff0c;可以给我点赞加油&#xff01; Updated on 2022…

java——IO流整理(一)

一、基础 1.字节、字符 位&#xff08;bit&#xff09;   &#xff1a;二进制中的一个1或0称为1位字节&#xff08;byte&#xff09; &#xff1a;8个二进制位称为一个字节字符     &#xff1a;一个自然符号称为字符。英文符号&#xff08;1个字节&#xff09;、中文符…

Node.js学习笔记

Node介绍 为什么要学习Node.js 企业需求 具有服务端开发经验更改front-endback-end全栈开发工程师基本的网站开发能力 服务端前端运维部署 多人社区 Node.js是什么 Node.js是JavaScript 运行时通俗易懂的讲&#xff0c;Node.js是JavaScript的运行平台Node.js既不是语言&am…

《统计学习方法》学习笔记目录

此篇为 李航老师著的《统计学习方法》的学习笔记汇总&#xff0c;准备学习并敲一敲代码&#xff0c;还请大家不吝赐教&#xff01;updated on 2020.4.26 一些相关的实践&#xff1a;请查阅机器学习 1. 统计学习及监督学习概论 2. 感知机&#xff08;Perceptron&#xff09; …

iOS: 属性声明strong和retain竟然不一样

今天和同事在处理一处用strong声明的Block属性引发的问题时偶然发现的。在诸多教程中都会讲到&#xff1a;声明属性时用strong或者retain效果是一样的&#xff08;貌似更多开发者更倾向于用strong&#xff09;。不过在声明Block时&#xff0c;使用strong和retain会有截然不同的…

一、node.js搭建最简单的服务器

node.js搭建最简单的服务器 代码演示&#xff1a; // 1. 加载http核心模块 var http require(http)// 2. 使用http.createServer()方法创建一个Web服务器 // 返回一个Server实例 var server http.createServer()// 3. 服务器干嘛&#xff1f; // 提供服务&#xff1a; 对数…

DDD 领域驱动设计-如何 DDD?

注&#xff1a;科比今天要退役了&#xff0c;我是 60 亿分之一&#xff0c;满腹怀念&#xff5e;??? 前几天看了园友的一篇文章《我眼中的领域驱动设计》&#xff0c;文中有段话直击痛点&#xff1a;有人误认为项目架构中加入 Repository&#xff0c;Domain&#xff0c;Valu…

二、搭建Apache服务器 模板引擎

1. 案例&#xff1a;搭建简单的Apache服务器 var http require(http) var fs require(fs)var server http.createServer()var wwwDir D:\\CWork\\node.js黑马程序员\\study_nodejs\\day02\\code\\wwwserver.on(request, function(req, res) {var url req.urlfs.readFile(…

三、案例:留言板 url.parse()

1. url.parse()的使用 2. 留言板案例 index.html: <!DOCTYPE html> <!-- saved from url(0027)http://192.168.150.76:3000/ --> <html lang"en"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8…

iOS开发——收集Github上的iOS控件和开发资料

https://github.com/JanzTam/MyGithubMark转载于:https://www.cnblogs.com/adople/p/5391912.html

四、模块系统

什么是模块化 文件作用域(模块是独立的&#xff0c;在不同的文件使用必须要重新引用)【在node中没有全局作用域&#xff0c;它是文件模块作用域】通信规则 加载require导出exports CommonJS模块规范 在Node中的JavaScript还有一个重要的概念&#xff0c;模块系统。 模块作用…

Jquery 实现原理之 Ajax

一&#xff1a;Jquery Ajax底层接口有&#xff1a;$.ajaxPrefilters、$.ajaxTransport、$.ajaxSettings、$ajaxSetup、$ajaxSettings; 其中$.ajaxPrefilters 和 $.ajaxTransport是通过inspectPrefiltersOrTransports构造器来创建的; $.ajaxPrefilters&#xff1a;是一个前置过滤…

一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)

第 1 章&#xff1a;原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c; 最大的优势&#xff1a;无刷新获取数据。 AJAX 不是新的编程语言&#xff0c;而是…

App安全之网络传输安全

移动端App安全如果按CS结构来划分的话&#xff0c;主要涉及客户端本身数据安全&#xff0c;Client到Server网络传输的安全&#xff0c;客户端本身安全又包括代码安全和数据存储安全。所以当我们谈论App安全问题的时候一般来说在以下三类范畴当中。 App代码安全&#xff0c;包括…

二、nodemon-Node.js 监控工具

nodemon-Node.js 监控工具 https://www.npmjs.com/package/nodemon 这个工具在我们改变了服务端代码时&#xff0c;会自动重启服务器&#xff0c;不需要我们再手动去重启服务器了&#xff0c;方面我们后面调试代码&#xff01; 1. 安装 node &#xff1a;http://nodejs.cn/d…

利用动态规划(DP)解决 Coin Change 问题

问题来源 这是Hackerrank上的一个比较有意思的问题&#xff0c;详见下面的链接&#xff1a; https://www.hackerrank.com/challenges/ctci-coin-change 问题简述 给定m个不同面额的硬币&#xff0c;C{c0, c1, c2…cm-1}&#xff0c;找到共有几种不同的组合可以使得数额为n的…

jquery datatable设置垂直滚动后,表头(th)错位问题

jquery datatable设置垂直滚动后&#xff0c;表头(th)错位问题 问题描述&#xff1a; 我在datatable里设置&#xff1a;”scrollY”: ‘300px’,垂直滚动属性后&#xff0c;表头的宽度就会错位&#xff0c;代码如下&#xff1a; <!-- HTML代码 --> <table id"dem…