当前位置: 首页 > news >正文

python web开发(四): Bootstrap

1.初步了解

别人已经写好的CSS样式,我们可以直接引用

  • 下载
    Link-BootStrap

  • 解压,并放入到当前项目中
    在这里插入图片描述

  • 引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    第一种方式引用: 开发版本 --><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css"><!--    第二种方式引用:生产版本;相比开发版文件更小,其他都一样 --><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css"></head>
<body><input type="button" value="原始按钮"><input type="button" value="bootstrap-1" class="btn btn-primary"><input type="button" value="bootstrap-2" class="btn btn-success"><input type="button" value="bootstrap-3" class="btn btn-danger"><input type="button" value="bootstrap-4" class="btn btn-danger btn-xs">
</body>
</html>

效果如下
在这里插入图片描述

2. 小试牛刀

构建一个导航界面

进入bootstrap文档
在这里插入图片描述
在这里插入图片描述

将代码拷贝到html文件中,并对部分代码进行定制化修改,如下图所示
在这里插入图片描述
效果如下
在这里插入图片描述

http://www.lryc.cn/news/197767.html

相关文章:

  • 【EI会议征稿】2024年遥感技术与测量测绘国际学术会议(RSTSM 2024)
  • 灵感:VUE2实现权限按钮控制
  • 【2023最新版】Python全栈知识点总结
  • 推荐系统离线评估方法和评估指标,以及在推荐服务器内部实现A/B测试和解决A/B测试资源紧张的方法。还介绍了如何在TensorFlow中进行模型离线评估实践。
  • day1:Node.js 简介
  • ESP RainMaker 客户案例 #1|Halonix
  • 【Linux】adduser命令使用
  • 中文连续视觉语音识别挑战赛
  • (ubuntu) 安装JDK
  • 工程管理系统源码之全面+高效的工程项目管理软件
  • 网络安全常见问题隐患及其应对措施
  • 《机器学习分类器 二》——朴素的贝叶斯算法,项目实践,算法实践。
  • 亚马逊英国站手机/笔记本电脑电池和充电器的合规标准是什么?
  • 亚马逊云科技顾凡解读云计算助力初创快速抢滩生成式AI新风口
  • Unity之ShaderGraph如何实现积雪效果
  • 实现mnist手写数字识别
  • Camera BSP之GPIO/I2C/PMIC简介
  • Spring 数据校验:Validation
  • 网页构造与源代码
  • 辅助驾驶功能开发-功能对标篇(14)-NOA领航辅助系统-集度
  • 论坛介绍 | COSCon'23 云计算(C)
  • Spring 国际化:i18n
  • 【APP源码】基于Typecho博客程序开发的博客社区资讯APP源码
  • Spring Security登录表单配置(3)
  • 代理模式(初学)
  • Spring底层架构核心概念
  • 为什么高精度机器人普遍使用谐波减速器而不是普通减速器?
  • 特殊类的设计
  • HTTP 协议的基本格式(部分)
  • Android 第三方app https 抓包