BootStrap详解

Bootstrap简介

什么是BootStrap？

  • BootStrap来自Twitter，是目前最受欢迎的响应式前端框
  • Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷

为什么使用Bootstrap？

  • 移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库移动设备优先的样式。
 - 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中- 也就是说，针对移动设备的样式融合进了框架的每个角度，而不是增加一个额外的文件
  • 浏览器支持：所有的主流浏览器支持Bootstrap
  • 容易上手：只要您具备HTML和CSS基础知识，您就可以开始学习Bootstrap
  • 响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机
  • 它为开发人员创建接口提供了一个简洁统一的解决方案
  • 它包含了功能强大的内置组件、易于定制
  • 它还提供了基于Web的定制
  • 它是开源的

下载与使用

中文官网：https://www.bootcss.com/
英文官网：http://getbootstrap.com

Bootstrap初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap-5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body style="padding: 100px;"><h1>Hello,bootstrap</h1><button class="btn btn-primary">学习充电</button><button class="btn btn-success">极速入职</button>
</body>
</html>

Bootstrap的使用

表格

和之前的表格相比，标签更丰富更加语义化，效果更加美观

丰富的表格

  • < table>为表格添加基础样式
  • < thead>表格 表格行 的容器元素（< tr>）
  • < tbody>表格主体的表格行的容器元素（< tr>）
  • < tr>表格行
  • < td>默认的表格单元格
  • < th>特殊的表格单元格，（居中和加粗的效果）。必须在< thead>内使用
  • < caption>关于表格存储内容的描述或总结

好看的类样式

  • .table为任意< table>添加基本样式（只有横向分割线）
  • .table-striped 在< tbody>内添加斑马线形式的条纹（IE8不支持），隔行变色
  • .table-bordered为所有表格的单元格添加边框
  • .table-hover在< tbody>内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
  • .table-condensed让表格更加紧凑

情景色类样式

适合应用在< th>、< tr> 、< td>

  • table-active激活效果（悬停颜色）
  • table-success表示成功或积极的动作
  • table-info表示普通的提示信息或动作
  • table-warning表示警告或需要用户注意
  • table-danger表示危险或潜在的带来的负面影响的动作

响应式表格

表格的父元素设置响应式，小于768px，出现边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.js"></script>
</head>
<body><table class="table table-bordered table-hover table-condensed"><caption>经营产品大全</caption><thead><tr><th>产品</th><th>付款日期</th><th>状态</th></tr></thead><tbody><tr class="table-active"><td>产品1</td><td>2024-1-1</td><td>待发货</td></tr><tr class="table-success"><td>产品2</td><td>2024-1-2</td><td>已发货</td></tr><tr class="table-info"><td>产品3</td><td>2024-1-3</td><td>已发货</td></tr><tr class="table-warning"><td>产品4</td><td>2024-1-4</td><td>已退货</td></tr><tr class="table-danger"><td>产品5</td><td>2024-1-6</td><td>已退款</td></tr></tbody></table>
</body>
</html>

表单

表单布局

默认布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><title>Bootstrap Example</title><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;"><form><div class="mb-3"><label for="exampleInputEmail1" class="form-label">邮箱</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入你的邮箱"></div><div class="mb-3"><label for="exampleInputPassword1" class="form-label">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入你的密码"></div><button type="submit" class="btn btn-primary">提交</button></div></form>
</body>
</html>

表单控件

  • 输入框
    在这里插入图片描述
  <div class="mb-3"><label for="exampleInputEmail1" class="form-label">邮箱</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入你的邮箱"></div>
  • 文本框
    在这里插入图片描述
 <div class="mb-3"><label for="">文本框</label><textarea class="form-control" id="" cols="30" rows="5"></textarea></div>
  • 复选框

1.默认：form-check
在这里插入图片描述

 <div class="form-check"><label><input type="checkbox">1</label></div><div class="form-check"><label><input type="checkbox">2</label></div>

2.内联：form-check-inline

在这里插入图片描述

 <div class="form-check form-check-inline"><label><input type="checkbox">3</label></div><div class="form-check form-check-inline"><label><input type="checkbox">4</label></div>
  • 复选按钮
    在这里插入图片描述
 <div class="btn-group" data-toggle="buttons"><input type="checkbox" class="btn-check" id="btn-check-1" autocomplete="off"><label class="btn btn-primary" for="btn-check-1">音乐</label><input type="checkbox" class="btn-check" id="btn-check-2" autocomplete="off"><label class="btn btn-primary" for="btn-check-2">体育</label><input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off"><label class="btn btn-primary" for="btn-check-3">美术</label><input type="checkbox" class="btn-check"  id="btn-check-4"autocomplete="off"><label class="btn btn-primary" for="btn-check-4">电脑</label></div>
  • 单选框
    在这里插入图片描述
 <div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked><label class="form-check-label" for="exampleRadios1">男</label></div><div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"><label class="form-check-label" for="exampleRadios2">女</label></div>

在这里插入图片描述

 <div class="form-check-inline"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked><label class="form-check-label" for="exampleRadios1">男</label></div><div class="form-check-inline"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"><label class="form-check-label" for="exampleRadios2">女</label></div>
  • 单选按钮
    在这里插入图片描述
 <div class="btn-group" data-toggle="buttons"><input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked=""><label class="btn btn-primary" for="option1">男</label><input type="radio" class="btn-check" name="options" id="option2" autocomplete="off"><label class="btn btn-primary" for="option2">女</label></div>

按钮

在这里插入图片描述

 <button type="button" class="btn btn-primary">primary</button><button type="button" class="btn btn-secondary">secondary</button><button type="button" class="btn btn-success">success</button><button type="button" class="btn btn-danger">danger</button><button type="button" class="btn btn-warning">warning</button><button type="button" class="btn btn-info">info</button><button type="button" class="btn btn-light">light</button><button type="button" class="btn btn-dark">dark</button>
  • 按钮大小

在这里插入图片描述

<button type="button" class="btn btn-primary btn-lg">超大按钮</button><button type="button" class="btn btn-primary">大按钮</button><button type="button" class="btn btn-primary btn-sm">小按钮</button>
  • 按钮状态

disabled通过将布尔属性添加到任何元素，使按钮看起来不活动。已应用禁用按钮pointer-events: none，防止触发悬停和活动状态。

在这里插入图片描述

<button type="button" class="btn btn-primary" disabled>Primary button</button><button type="button" class="btn btn-secondary" disabled>Button</button><button type="button" class="btn btn-outline-primary" disabled>Primary button</button><button type="button" class="btn btn-outline-secondary" disabled>Button</button>

分页在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;"><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></nav>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;"><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>
</body>
</html>

下拉菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;"><div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;"><div class="dropdown"><a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown link</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;"><!-- Example single danger button -->
<div class="btn-group"><button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Action</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><a class="dropdown-item" href="#">Something else here</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Separated link</a></li></ul></div>
</body>
</html>

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

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

相关文章

Kafka 3.x.x 入门到精通（07）——Java应用场景——SpringBoot集成

Kafka 3.x.x 入门到精通（07）——Java应用场景——SpringBoot集成

Kafka 3.x.x 入门到精通&#xff08;07&#xff09;——Java应用场景——SpringBoot集成 4. Java应用场景——SpringBoot集成4.1 创建SpringBoot项目4.1.1 创建SpringBoot项目4.1.2 修改pom.xml文件4.1.3 在resources中增加application.yml文件 4.2 编写功能代码4.2.1 创建配置…
阅读更多...
机器人-轨迹规划

机器人-轨迹规划

旋转矩阵 旋转矩阵--R--一个3*3的矩阵&#xff0c;其每列的值时B坐标系在A坐标系上的投影值。 代表B坐标系相对于A坐标系的姿态。 旋转矩阵的转置矩阵 其实A相对于B的旋转矩阵就相当于把B的列放到行上就行。 视频 &#xff08;将矩阵的行列互换得到的新矩阵称为转置矩阵。&…
阅读更多...
SQLite尽如此轻量

SQLite尽如此轻量

众所周知&#xff0c;SQLite是个轻量级数据库&#xff0c;适用于中小型服务应用等&#xff0c;在我真正使用的时候才发现&#xff0c;它虽然轻量&#xff0c;但不知道它却如此轻量。 下载 官网&#xff1a; SQLite Download Page 安装 1、将下载好的两个压缩包同时解压到一个…
阅读更多...
【PG-2】PostgreSQL存储管理器

【PG-2】PostgreSQL存储管理器

2. PostgreSQL存储管理器 src/backend/storage (base) torrestorresの机革:~/codes/postgresql-16.2/src/backend/storage$ ls Makefile buffer file freespace ipc large_object lmgr meson.build objfiles.txt page smgr sync存储管理器—smgr 通用存储管理器 …
阅读更多...
航拍图像拼接 | 使用C++实现的无人机航拍图像拼接

航拍图像拼接 | 使用C++实现的无人机航拍图像拼接

项目应用场景 面向无人机航拍图像拼接场景&#xff0c;项目使用 C 实现&#xff0c;使用 harris 角点查找特征点 非极大值抑制&#xff0c;由于航拍图像没有严重的尺度旋转变化&#xff0c;使用了 berief 描述子&#xff0c;然后使用 RANSAC 求 H&#xff0c;最后进行图像拼接…
阅读更多...
linux 中 make 和 gmake的关系

linux 中 make 和 gmake的关系

1. 关系 gmake特指GNU make。 make是指系统默认的make实现; 在大多数Linux发行版中&#xff0c;make就是GNU make&#xff0c;但是在其他unix中&#xff0c;gmake可以指代make的某些其他实现&#xff0c;例如BSD make或各种商业unix的make实现。 gmake是GNU Make的缩写。 Linux…
阅读更多...
【算法一则】【贪心】数组中的数可以拼装成的最大数

【算法一则】【贪心】数组中的数可以拼装成的最大数

题目 给定一组非负整数 nums&#xff0c;重新排列每个数的顺序&#xff08;每个数不可拆分&#xff09;使之组成一个最大的整数。 注意&#xff1a;输出结果可能非常大&#xff0c;所以你需要返回一个字符串而不是整数。 示例 1&#xff1a; 输入&#xff1a;nums [10,2] …
阅读更多...
【UnityRPG游戏制作】RPG项目的背包系统商城系统和BOSS大界面

【UnityRPG游戏制作】RPG项目的背包系统商城系统和BOSS大界面

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…
阅读更多...
二分查找-在排序数组中查找元素的第一个和最后一个位置

二分查找-在排序数组中查找元素的第一个和最后一个位置

给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 输入&#xf…
阅读更多...
程序链接步骤2：重定位

程序链接步骤2：重定位

一、链接步骤 链接步骤1“符号解析”&#xff1a; 将符号引用和符号定义建立关联后&#xff1b; 链接步骤2“重定位”&#xff1a; 将引用符号的地址“重定位”为相关联的符号定义的地址。 二、原文链接&#xff1a;https://www.jianshu.com/p/7d13ec4735ba 符号解析完成后&…
阅读更多...
ZooKeeper 搭建详细步骤之二（伪集群模式）

ZooKeeper 搭建详细步骤之二（伪集群模式）

ZooKeeper 搭建详细步骤之一&#xff08;单机模式&#xff09; ZooKeeper 及相关概念简介 伪集群搭建 ZooKeeper 伪集群是指在一个单一的物理或虚拟机环境中模拟出一个由多个 ZooKeeper 节点构成的集群。尽管这些节点实际上运行在同一台机器上&#xff0c;但它们通过配置不同的…
阅读更多...
字节秋招高频算法汇总（高级篇）

字节秋招高频算法汇总（高级篇）

更多大厂面试内容可见 -> http://11come.cn 字节秋招高频算法汇总 接下来讲一下 字节秋招 中的高频算法题&#xff0c;分为三个部分&#xff1a; 基础篇 、 中级篇 、 进阶篇 目的就是为了应对秋招中的算法题&#xff0c;其实过算法题的诀窍就在于 理解的基础上 背会 看…
阅读更多...
与Apollo共创生态：我和Apollo七周年大会的心路历程

与Apollo共创生态：我和Apollo七周年大会的心路历程

一、写在前面 前几天观看了Apollo七周年大会&#xff0c;给我带来了超多的惊喜&#xff0c;博主想将这份惊喜分享给大家&#xff01; 二、Apollo开放平台 Apollo开放平台秉承其核心理念——开放能力、共享资源、加速创新、持续共赢&#xff0c;致力于推动自动驾驶技术的革新…
阅读更多...
《HCIP-openEuler实验指导手册》1.2Apache主页面配置

《HCIP-openEuler实验指导手册》1.2Apache主页面配置

一、配置服务器监听IP及端口 注释主配置文件“监听IP及端口”部分 cd /etc/httpd/conf cp httpd.conf httpd.conf.bak vim httpd.conf可以在普通模式下搜索Listen关键字 :/Listen按n键继续向后搜索 在/etc/httpd/conf.d中新建子配置文件port.conf&#xff1a; touch /etc…
阅读更多...
观成科技：蔓灵花组织加密通信研究分析总结

观成科技：蔓灵花组织加密通信研究分析总结

1.概述 蔓灵花&#xff0c;又名"Bitter"&#xff0c;常对南亚周边及孟加拉湾海域的相关国家发起网络攻击&#xff0c;主要针对巴基斯坦和中国两国。其攻击目标主要包括政府部门、核工业、能源、国防、军工、船舶工业、航空工业以及海运等行业&#xff0c;其主要意图…
阅读更多...
后端每日一题 2：DNS 解析过程

后端每日一题 2：DNS 解析过程

本文首发于公众号&#xff1a;腐烂的橘子 本文梗概&#xff1a; DNS 是什么&#xff0c;有什么作用一条 DNS 记录是什么样的DNS 域名解析原理DNS 服务器如何抵御攻击 DNS 是什么&#xff0c;有什么作用 DNS&#xff08;Domain Name System&#xff09;是一种应用层协议&…
阅读更多...
使用和配置：超秀的 MySQL 客户端工具 MyCli

使用和配置：超秀的 MySQL 客户端工具 MyCli

1.安装一个更人性化的一个mysql客户端、终端: sudo apt install mycli 登录方式 mycli -uroot password 2. 功能&#xff1a;界面更好看&#xff0c;且支持自动补全&#xff0c;按tab可以补全 3.mycli使用帮助说明文档 mycli --help用法: mycli [OPTIONS] [DATABASE]例如:…
阅读更多...
西门子程序专业备份软件BUDdy for S7和使用说明

西门子程序专业备份软件BUDdy for S7和使用说明

西门子程序专业备份软件BUDdy for S7和使用说明
阅读更多...
虹科Pico汽车示波器 | 免拆诊断案例 | 2006 款林肯领航员车发动机怠速抖动

虹科Pico汽车示波器 | 免拆诊断案例 | 2006 款林肯领航员车发动机怠速抖动

故障现象 一辆2006款林肯领航员车&#xff0c;搭载5.4 L发动机&#xff0c;累计行驶里程约为26万km。该车因发动机怠速抖动故障进厂维修&#xff0c;维修人员更换了火花塞、点火线圈及凸轮轴位置传感器&#xff0c;清洗了积炭和喷油器&#xff0c;故障依旧&#xff0c;于是向笔…
阅读更多...
SpringBoot学习之Redis下载安装启动【Windows版本】（三十六）

SpringBoot学习之Redis下载安装启动【Windows版本】（三十六）

一、下载Redis for Windows Redis 官方网站没有提供 Windows 版的安装包，但可以通过 GitHub 来下载安装包，下载地址：https://github.com/tporadowski/redis/releases 1、网站提供了安装包和免安装版本，这里我们直接选择下面的免安装版本 2、下载后的压缩包解压以后，如下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023