python web开发 Bootstrap框架基础

文章目录

    • 1. 安装
    • 2. Bootstrap 5 基本应用

learning from 《python web开发从入门到精通》

  • Bootstrap 是最受欢迎的 前端组件库,用于 HTML,CSS,JavaScript 开发的 开源工具集

1. 安装

  • 使用 CDN 引用
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  • 或者下载 https://getbootstrap.com/
    在这里插入图片描述

popper.js cdn:https://unpkg.com/@popperjs/core@2
jquery.js https://code.jquery.com/jquery-3.6.0.js

在这里插入图片描述
解压 Bootstrap 到项目下,并下载(复制粘贴)上面两个 js 文件到 js 文件夹里

后面使用外部文件引入即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用bootstrap框架</title><link rel="stylesheet" href="../css/bootstrap.css"><script src="../js/jquery.js"></script><script src="../js/popper.js"></script><script src="../js/bootstrap.js"></script></head>
<body><div class="mt-4 p-5 bg-primary text-white rounded"><h1 style="text-align: center">Michael学习web开发</h1><p>我的博客地址是:<a href="https://michael.blog.csdn.net/">https://michael.blog.csdn.net/</a></p></div></body>
</html>

bootstrap5-jumbotron 不支持https://www.runoob.com/bootstrap5/bootstrap5-jumbotron.html

在这里插入图片描述

2. Bootstrap 5 基本应用

  • Bootstrap 提供了很多组件,巨幕、信息提示框、按钮、表单、导航栏等
    可以去官网 https://getbootstrap.com/ 查询组件示例,快速修改

在这里插入图片描述
https://getbootstrap.com/docs/5.1/examples/navbars/
https://getbootstrap.com/docs/5.1/components/navbar/
在这里插入图片描述

例子:创建导航栏菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用bootstrap框架制作导航栏</title><link rel="stylesheet" href="../css/bootstrap.css"><script src="../js/jquery.js"></script><script src="../js/popper.js"></script><script src="../js/bootstrap.js"></script></head>
<body><nav class="navbar navbar-expand-sm navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="https://michael.blog.csdn.net/">我的导航</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="https://michael.blog.csdn.net/">主页</a></li><li class="nav-item"><a class="nav-link" href="#">链接</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-bs-toggle="dropdown" aria-expanded="false">关于作者</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">简历</a></li><li><a class="dropdown-item" href="#">项目</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">联系方式</a></li></ul></li><li class="nav-item"><a class="nav-link disabled">商城</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="输入你的关键词" aria-label="Search"><button class="btn btn-outline-success" type="submit">站内搜索</button></form></div></div>
</nav></body>
</html>

效果图:
在这里插入图片描述

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

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

相关文章

window.cookie

本地测试cookie用火狐来测试 首先cookie是document上的一个属性。 先弹出一个cookie alert(document.cookie); //弹出是空的 设置cookie&#xff0c;格式是有一定要求的&#xff0c;格式是&#xff0c;名字值 这样的格式 所以设置的时候&#xff0c;这样设置 document.cook…

python web开发 网络编程 TCP/IP UDP协议

文章目录1. TCP/IP协议1.1 IP协议1.2 TCP协议2. UDP协议3. Socket4. TCP编程4.1 创建TCP服务器4.2 创建TCP客户端4.3 简易聊天工具5. UDP编程5.1 创建UDP服务器5.2 创建UDP客户端learning from 《python web开发从入门到精通》 1. TCP/IP协议 大家都用同样的协议 protocol&am…

python web开发 网络编程 HTTP协议、Web服务器、WSGI接口

文章目录1. HTTP协议2. Web服务器3. 静态服务器创建 web_server.py4. WSGI 接口4.1 CGI 通用网关接口4.2 WSGI4.3 定义 WSGI 接口4.4 运行 WSGI 服务learning from 《python web开发从入门到精通》 1. HTTP协议 应用层最主要的协议&#xff1a;HTTP协议&#xff08;HyperText…

android 75 新闻列表页面

new.xml <?xml version"1.0" encoding"UTF-8" ?> <newslist><news><title>黑马52期就业快报</title><detail>热烈祝贺黑马52期平均薪水突破13k</detail><comment>15687</comment><image>ht…

python web开发 MySQL数据库基础

文章目录1. 简介2. 下载安装3. 操作 MysQL 数据库3.1 创建数据库3.2 选择数据库3.3 查看数据库3.4 删除数据库4. 数据类型5. 操作 MysQL 数据表5.1 创建数据表5.2 查看表的结构5.3 修改表的结构5.4 删除数据表6. 操作 MySQL 数据表记录6.1 添加数据6.2 查询、修改、删除learnin…

python 操作MySQL数据库

文章目录1. 安装 PyMySQL2. 连接对象3. 游标对象4. 增删改操作cursor.execute(sql)cursor.executemany(sql, seq_of_params)5. 查询操作6. ORM编程常用 python ORM 库learning from 《python web开发从入门到精通》 1. 安装 PyMySQL conda 虚拟环境下安装 pip install pymysq…

python web框架基础

文章目录1. Web框架简介1.1 MVC1.2 模板引擎2. 常用 Python Web 框架3. 虚拟环境4. 部署方式learning from 《python web开发从入门到精通》 1. Web框架简介 简化 web 开发的软件框架 一般都支持&#xff1a;管理路由&#xff0c;支持数据库&#xff0c;MVC&#xff0c;ORM&…

导Excel数据到Oracle的脚本,Oracle使用TOAD实现导入导出Excel数据

在Oracle应用程序的开发过程中&#xff0c;访问数据库对象和编写SQL程序是一件乏味且耗费时间的工作&#xff0c;对数据库进行日常管理也是需要很多SQL脚本才能完成的。Quest Software为此提供了高效的Oracle应用开发工具-Toad。在Toad的新版本中&#xff0c;还加入了DBA模块&a…

Chapter 14 Exercises Problems

转载于:https://www.cnblogs.com/momoko/p/4937730.html

FastAPI 结合 SQLAlchemy 操作 MySQL 数据库

文章目录1. 安装 SQLAlchemy2. 创建数据库3. SQLAlchemy 连接 MySQL4. 创建数据模型5. 创建 Pydantic 模型6. crud 工具7. main函数learning from 《python web开发从入门到精通》 1. 安装 SQLAlchemy pip install sqlalchemy 2. 创建数据库 mysql -u root -p 命令行登录 M…

LeetCode 2094. 找出 3 位偶数

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 digits &#xff0c;其中每个元素是一个数字&#xff08;0 - 9&#xff09;。数组中可能存在重复元素。 你需要找出 所有 满足下述条件且 互不相同 的整数&#xff1a; 该整数由 digits 中的三个元素按 任意 顺序 依次连接 …

LeetCode 2095. 删除链表的中间节点(快慢指针)

文章目录1. 题目2. 解题1. 题目 给你一个链表的头节点 head 。删除 链表的 中间节点 &#xff0c;并返回修改后的链表的头节点 head 。 长度为 n 链表的中间节点是从头数起第 ⌊n / 2⌋ 个节点&#xff08;下标从 0 开始&#xff09;&#xff0c;其中 ⌊x⌋ 表示小于或等于 x…

LeetCode 2096. 从二叉树一个节点到另一个节点每一步的方向(最小公共祖先)

文章目录1. 题目2. 解题1. 题目 给你一棵 二叉树 的根节点 root &#xff0c;这棵二叉树总共有 n 个节点。 每个节点的值为 1 到 n 中的一个整数&#xff0c;且互不相同。 给你一个整数 startValue &#xff0c;表示起点节点 s 的值&#xff0c;和另一个不同的整数 destValue …

LeetCode 2097. 合法重新排列数对(欧拉路径)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维整数数组 pairs &#xff0c;其中 pairs[i] [starti, endi] 。如果 pairs 的一个重新排列&#xff0c;满足对每一个下标 i &#xff08; 1 < i < pairs.length &#xff09;都有 endi-1 starti &#xff0c…

《如何在大学里脱颖而出(How to Win at College)》读书笔记

《如何在大学里脱颖而出(How to Win at College)》读书笔记 图书简介 中文版&#xff1a; 英文版&#xff1a; 作者卡尔纽波特&#xff08;Cal Newport&#xff09;于 2004 年6月以优等生荣誉学会会员身份毕业于达特茅斯学院。曾在《华尔街日报》的学报和《今日商务》等杂志上发…

LeetCode 2099. 找到和最大的长度为 K 的子序列

文章目录1. 题目2. 解题1. 题目 给你一个整数数组 nums 和一个整数 k 。 你需要找到 nums 中长度为 k 的 子序列 &#xff0c;且这个子序列的 和最大 。 请你返回 任意 一个长度为 k 的整数子序列。 子序列 定义为从一个数组里删除一些元素后&#xff0c;不改变剩下元素的顺…

cms安装教程Linux,DoraCMS安装教程(linux)

最近在熟悉linux环境&#xff0c;也基本上把DoraCMS部署上去了&#xff0c;本教程基于ubuntu server 14.0.4&#xff0c;其它linux版本部署方式基本上差不多&#xff0c;下面详细说明一下&#xff1a;1、进入server环境下&#xff0c;在ubuntu目录下建立文件夹softbak,我们用来…

LeetCode 2100. 适合种地的日子(计数)

文章目录1. 题目2. 解题1. 题目 你和一群强盗准备种地。给你一个下标从 0 开始的整数数组 security &#xff0c;其中 security[i] 是第 i 天 天气热的数量。日子从 0 开始编号。同时给你一个整数 time 。 如果第 i 天满足以下所有条件&#xff0c;我们称它为一个适合种地的日…

如何在linux中使用u盘,如何在Linux系统下使用U盘

如何在Linux系统下使用U盘Linux系统中U盘被视为SCSI设备, SCSI设备对应的设备文件格式为“sdX” 系统中的第一个SCSI设备表示“sda”&#xff0c;第二个表示为“sdb”等。下面是jy135小编收集整理的U盘里面的.如何在Linux系统下使用U盘&#xff0c;欢迎阅读。在Linux系统下&…

linux sys存放内容,了解linux系统目录,sys,tmp,usr,var!

原标题&#xff1a;了解linux系统目录&#xff0c;sys,tmp,usr,var&#xff01;linux小白到大神的成长之路&#xff1a;了解linux系统目录&#xff0c;sys,tmp,usr,var&#xff01;本经验由宗龙龙原创,全文共600多字&#xff0c;阅读需要14分钟&#xff0c;如果文中存在错误&am…