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.mzph.cn/news/110083.shtml

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

相关文章

day2：Node.js 环境准备

day2：Node.js 环境准备

day2&#xff1a;Node.js 环境准备 文章目录 day2&#xff1a;Node.js 环境准备安装 Node.js 和 npm验证 Node.js 和 npm使用淘宝 NPM 镜像npm 包管理器的基本使用**NPM 常用命令**小结 准备一台linux服务器 [rootnode3 ~]# cat /etc/redhat-release CentOS Linux release 7.2.…
阅读更多...
wps/word 如何让表格的标题和表格名称文本（表1-1 xxx）跨页显示（已解决）

wps/word 如何让表格的标题和表格名称文本（表1-1 xxx）跨页显示（已解决）

第一步&#xff1a; 打开wps 创建一个跨页的表格表格&#xff0c;如下图 第二步 大家都知道 表格标题跨页 就是1&#xff09;在菜单表格工具 点击重复标题 或者 2&#xff09;表格属性--》行--》在各页顶端以标题行形式出现&#xff0c;详细如下图。 1&#xff09; 第一…
阅读更多...
【APP源码】基于Typecho博客程序开发的博客社区资讯APP源码

【APP源码】基于Typecho博客程序开发的博客社区资讯APP源码

全新博客社区资讯APP源码 Typecho后端 一款功能全面&#xff0c;用户交互良好&#xff0c;数据本地缓存&#xff0c;集成邮箱验证&#xff0c;在线投稿&#xff0c;&#xff08;内置Mardown编辑器&#xff09;&#xff0c; 快捷评论的的博客资讯APP。同时兼容H5和微信小程序。 …
阅读更多...
论坛介绍 | COSCon'23 云计算（C）

论坛介绍 | COSCon'23 云计算（C）

众多开源爱好者翘首期盼的开源盛会&#xff1a;第八届中国开源年会&#xff08;COSCon23&#xff09;将于10月28-29日在四川成都市高新区菁蓉汇举办。本次大会的主题是&#xff1a;“开源&#xff1a;川流不息、山海相映”&#xff01;各位新老朋友们&#xff0c;欢迎到成都&am…
阅读更多...
一些bug总结

一些bug总结

今天被几个小问题和bug折磨了一天&#xff0c;来总结一下… 权限问题 用vscode连接服务器&#xff0c;如果是在root用户连接的情况下新建的文件/文件夹&#xff0c;然后切换到别的用户的时候去写的代码 可能会遇到各种问题 解决方案是更改文件或文件夹的所有权。这可以通过使用…
阅读更多...
ubuntu 18.04 LTS交叉编译opencv 3.4.16并编译工程[全记录]

ubuntu 18.04 LTS交叉编译opencv 3.4.16并编译工程[全记录]

一、下载并解压opencv 3.4.16源码 https://opencv.org/releases/ 放到home路径下的Exe文件夹&#xff08;专门放用户安装的软件&#xff09;中&#xff0c;其中build是后期自建的 为了版本控制&#xff0c;保留了3.4.16&#xff0c;并增加了-gcc-arm 二、安装cmake和cmake-g…
阅读更多...
Redis：Feed流之Timeline的实现

Redis：Feed流之Timeline的实现

当我们关注了用户后&#xff0c;这个用户发了动态&#xff0c;那么我们应该把这些数据推送给用户&#xff0c;这个需求&#xff0c;其实我们又把他叫做Feed流&#xff0c;关注推送也叫做Feed流&#xff0c;直译为投喂。为用户持续的提供“沉浸式”的体验&#xff0c;通过无限下…
阅读更多...
5.Vue-在Vue框架中实现Vue的增删改查

5.Vue-在Vue框架中实现Vue的增删改查

题记 在vue框架中实现vue的增删改查&#xff0c;以下是具体操作流程和代码 编写TestView.vue文件 TestView.vue文件如下&#xff1a; <template> <div id"app"> <h1>学生列表</h1> <input type"text" v-model"searchQue…
阅读更多...
使用 VS Code 作为 VC++ 6.0 的编辑器

使用 VS Code 作为 VC++ 6.0 的编辑器

使用 VS Code 作为 VC 6.0 的编辑器 由于一些众所周知的原因&#xff0c;我们不得不使用经典&#xff08;过时&#xff09;的比我们年龄还大的已有 25 年历史的 VC 6.0 来学习 C 语言。而对于现在来说&#xff0c;这个经典的 IDE 过于简陋&#xff0c;并且早已不兼容新的操作系…
阅读更多...
KNN算法

KNN算法

文章目录 释义欧氏距离simple——KNNsklearn——KNN 释义 近朱者赤近墨者黑----从训练数据集中找出和待预测样本最接近的K个样本 对于分类问题&#xff0c;我们使用了多数表决法来判断目标对象的类别。 对于回归问题&#xff0c;我们使用了平均值法来判断目标对象的数值 如上…
阅读更多...
【YOLO】语义分割和实例分割（四）

【YOLO】语义分割和实例分割（四）

0 YOLO系列笔记 【YOLO】朴实无华的yolov5环境配置&#xff08;一&#xff09; 【YOLO】yolov5训练自己的数据集&#xff08;二&#xff09; 【YOLO】目标识别模型的导出和opencv部署&#xff08;三&#xff09; 1 前言 在之前的实践过程中&#xff0c;总结了如何使用YOLOv…
阅读更多...
Vue3响应式原理初探

Vue3响应式原理初探

vue3响应式原理初探 为什么要使用proxy取代defineProperty使用proxy如何完成依赖收集呢&#xff1f; 为什么要使用proxy取代defineProperty 原因1&#xff1a;defineproperty无法检测到原本不存在的属性。打个&#x1f330; new Vue({data(){return {name:wxs,age:25}}})在vue…
阅读更多...
电脑版便签软件下载用哪个?

电脑版便签软件下载用哪个?

在面对每天繁忙的工作日程&#xff0c;电脑是许多上班族不可或缺的工作助手&#xff0c;而一款得心应手的电脑便签软件&#xff0c;更是可以帮助大家记录、提醒、督促各项任务按时完成的得力助手。那么&#xff0c;究竟在众多的电脑便签软。件中&#xff0c;哪一位能够真正成为…
阅读更多...
Ubuntu：Arduino IDE 开发环境配置【保姆级】

Ubuntu：Arduino IDE 开发环境配置【保姆级】

物联网开发学习笔记——目录索引 本章主要介绍在Ubuntu系统搭建Arduino IDE 开发环境&#xff0c;windows系统请移步&#xff1a;Windows&#xff1a;Arduino IDE 开发环境配置【保姆级】 参考官网&#xff1a;Arduino - Home 有关更多详细信息&#xff0c;请参阅 Arduino I…
阅读更多...
SpringCloud微服务(注册发现Nacos、服务调用SSM、网关gateway)项目环境搭建（项目概况，SSM细节总结）

SpringCloud微服务(注册发现Nacos、服务调用SSM、网关gateway)项目环境搭建（项目概况，SSM细节总结）

目录 1.nacos环境搭建nacos安装 2.项目主体结构6.2)表结构分析6.4)**运营端微服务搭建**6.4)登录功能实现 7)接口工具postman、swagger、knife4j7.1)postman7.2)swagger7.3)knife4j 8)网关9)前端集成9.1)前端项目部署思路9.2)配置nginx 1.nacos环境搭建 nacos安装 ①&#xf…
阅读更多...
LDAP用户密码自服务平台搭建

LDAP用户密码自服务平台搭建

源码地址&#xff1a;https://github.com/ltb-project/self-service-password 官方文档 &#xff1a;https://self-service-password.readthedocs.io/en/latest/ 1.创建配置文件 mkdir -p /opt/ssp cd /opt/ssp vim ssp.conf.php2.在ssp.conf.php其中输入如下配置选项&#…
阅读更多...
ELK日志分析系统的详细介绍与部署

ELK日志分析系统的详细介绍与部署

文章目录 1. ELK的概述1.1 简介1.2 使用ELK的理由1.3 ELK的主要组件1.3.1 Elasticsearch1.3.2 Kibana1.3.3 Logstash1.3.3.1 简介1.3.3.2 Logstash常用相关命令选项 1.3.3.3 Logstash 的输入和输出流1.3.4 Logstash的相关配置文件 1.3.4 Filebeat1.3.4.1 简介1.3.4.2 filebeat …
阅读更多...
数学分析：傅里叶级数

数学分析：傅里叶级数

卓里奇书好的一点就是&#xff0c;不是直接引出公式&#xff0c;而是告诉你理由。先引出正交的概念&#xff0c;然后在函数空间中&#xff0c;也有正交&#xff0c;只不过是无限维的空间。 这里要注意&#xff0c;明确说明了是有限个。 在函数空间里面&#xff0c;内积是指进行…
阅读更多...
studio one6值不值得下载？好用吗

studio one6值不值得下载？好用吗

零基础学混音&#xff0c;持之以恒才能有所收获。首先要明确自己的学习目标&#xff0c;然后选择适合自己的教程。这套教程适用于后期制作和直播&#xff0c;同样适用。我切换到了桌面屏幕。 在这个基础上运行&#xff0c;它提供了适合零基础的模板&#xff0c;适合直播唱歌或…
阅读更多...
【iOS】使用单例封装通过AFNetworking实现的网络请求

【iOS】使用单例封装通过AFNetworking实现的网络请求

这里写目录标题 前言单例封装网络请求1. 首先创建一个继承于NSObject的单例类&#xff0c;笔者这里以Manager对单例类进行命名&#xff0c;然后声明并实现单例类的初始化方法2.实现完单例的创建方法后我们即可通过AFNetworking中的GET方法进行网络请求3.在Controller文件中创建…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023