本次实现成绩查询界面的条件查询部分，效果如下图，实现了每个选项的下拉列表显示 网址如下：http://127.0.0.1:8000/sg/gradesinput/ 项目在Pycharm中启动：python...admin.site.urls), re_path(r'sg/', include(('school_grades.urls', 'sg'), namespace='sg')), ] 一级url设置...-- Bootstrap --> bootstrap/js/bootstrap.js'%}" type="text/javascript">Bootstrap JQuery用来对页面html元素进行操作，实现与后端进行信息交互 Bootstrap用来页面可视化显示、如页面布局，样式等 Part 7：代码实现...数据库中信息如下，这些信息以上网页中的下拉菜单 ?
这个框架就是别人已经写好的css和JavaScript，我们要使用它，首先需要把这些样式和javascript相关文件下载下来，然后在我们的页面中引用这些文件就可以使用这个框架了，直接在这个网站下载，下载地址为...-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!...2.栅格的组成部分： a.版心容器container（相当于html页面的container版心，相当于table表格） b.row(相当于html页面的父盒子模型,相当于table中的tr) c.col...(相当于html页面的子盒子模型，相当于table中的tr) 4.png 3.栅格样式的核心原理 a.版心容器（container是响应式版心，container-fluid是流式版心） 他们两者唯一的区别是...750 992 <= 屏幕宽度 < 1200 宽度970 1200 <= 屏幕宽度 < 1200 宽度1170 container-fluid：流式版心容器 默认样式： 没有高度、边框
image.png image.png 前端页面year.html代码如下： {% extends "base.html" %} {% block css %} bootstrap4.css">...-- Content Header (Page header) --> container-fluid...-- /.container-fluid --> bootstrap4
image.png image.png 前端页面hour.html的代码如下： {% extends "base.html" %} {% block css %} bootstrap4.css">...-- Content Header (Page header) --> container-fluid...-- /.container-fluid --> bootstrap4
image.png image.png 前端页面minutes15.html代码如下： {% extends "base.html" %} {% block css %} bootstrap4.css">...-- Content Header (Page header) --> container-fluid...-- /.container-fluid --> bootstrap4
还是使用以前的固定单位去布局，会引发两个问题： （1）分辨率太大，网页两边留白太多 （2）分辨率太小，页面显示不完全 概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。...首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。...网格系统规则: 网格每一行需要放在设置了.container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。...并且为什么叫它是全局样式，主要是它的使用比较自由，可以在页面中的任意位置使用，也可以放在Bootstrap组件里使用。
通常前端页面中，上传文件通过form表单提交，提交成功后重定向到列表或详情页面。 有一个名为ajaxFileUpload的JQuery插件可以利用iframe来实现前端页面中异步上传文件。...比如上文OCR文字识别例子中，当我们在页面点击选择文件按钮，异步上传身份证照片，上传成功后显示在页面中，然后前端调用百度AI的身份证识别接口返回该身份证的记录各字段信息，然后检查无误后，在页面中再确认添加识别结果到数据库...image.png 看一下html代码和js代码 image.png 下载.png 可以看到，此插件只需要上传url和文件上传input的id就可以使用。...当上传文件文本框变化时，就立即调用异步上传，上传成功后，后台会生成一个id并返回，根据这个id生成上传到服务器的文件的url，（这里是图片，可以立即显示在页面中），设置上传文件的input的data-value...image.png 前端代码如下： <!
image.png image.png 前端页面day.html代码如下： {% extends "base.html" %} {% block css %} bootstrap4.css">...-- Content Header (Page header) --> container-fluid...-- /.container-fluid --> bootstrap4
这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 HTML/CSS 基础。...2.1.2 在 标签内引入 CSS 文件夹内的经过压缩的 bootstrap.min.css。....container 或 .container-fluid 中； 列 .col-md-*（* 可以是 1 到 12，此处代表中等屏幕按此标准显示，.col-md-1 占 .row 的 1/12，.col-md...目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。 官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。...//页面加载完之后再加载瀑布流 window.onload = function(){ //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
使用BootStrap框架的好处： 定义了很多css样式和js插件，开发人员直接可以使用这些样式和插件得到丰富的页面效果； 响应式布局，同一套页面可以兼容不同分辨率的设备； 2、BootStrap的快速入门...页面，引入必要的资源文件，一下为Bootstrap的基本模板页面： 在大屏幕上一行显示12个格子，在平板上一行显示6个格子 <!...3）插件：轮播图 只要会换图片，设置轮播间隔属性等 就可以~使用很简单： 中获取： <!
一、导航 1、概述 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。...="#">Separated link 运行结果： 二、导航条 1、默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件...由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。 代码演示： 页面等宽度的导航条，它会随着页面向下滚动而消失。...-- /.navbar-collapse --> 运行结果： 三、路径导航 在一个带有层次的导航结构中标明当前页面的位置
，如果一个对象（struct）实现了interface中的所有方法，那么该struct便实现该接口 chan的定义，用来各个线程（有人叫协程，超轻量级）间的通信，基本不用考虑死锁等问题 默认大写开头的结构体...页面效果 博客主页： ?...首页页面实现 {{set . "title" "iBlog博客"}} {{set ....DOCTYPE html> {{set . "title" "新博客"}} {{set ....DOCTYPE html> {{set . "title" "博客详情"}} {{set .
request,'index.html',{'article_list':article_list}) 使用admin组件添加数据 http://127.0.0.1:8000/admin   将页面设置为中文...设置页面 设置页面 设置页面 <div role="tabpanel...backend/') Django发送邮件 ---- 导入模块 from django.core.mail import send_mail ---- Django 发邮件 需要在settings中设置一下内容
它基于12个网格列的概念，可以将网页内容分成多个部分，并通过在不同屏幕尺寸下设置列的宽度、偏移和排序，来适应不同的设备和布局需求。...栅格容器在使用Bootstrap栅格布局之前，首先需要创建一个栅格容器（Grid Container）。栅格容器使用.container类或.container-fluid类进行定义。....container-fluid类创建一个占据整个视口宽度的容器，它会自动填充可用空间。以下是一个示例，展示了栅格容器的使用： 在Bootstrap中，列基于12个网格系统，意味着一行中最多可以包含12个列。可以将12个列均匀分割成几个部分，或根据需要指定每个列的宽度。...行中包含了三个列（.col-sm-6 col-md-4）。在小屏幕（sm）上，每个列占据了一半的宽度（.col-sm-6）。
Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel...1、由于轮播图片超宽造成的影响 - 美工为了在不同屏幕下更好地展示将图片两边做的非常宽，但是我们大多数情况的页面宽度都无法满足这样的图片宽度 - 而且Bootstrap的样式中默认将图片的max-width...） - 将轮播图改为背景显示 - 由于可能图片的高度不一定是410px - 所以需要设置css3中的background-size 3、background-size （1）length...（2）cover + 1.背景图片等比例缩放 + 2.让背景图相对较小边放大到目标容器大小结束 * 如：一张100\*200的背景图放到一个300\*400的盒子中...$item.data('image-xs') : $item.data('image-lg'); 10 11 // 设置背景图片 12 $item.css('backgroundImage', 'url
.row-cols-2设置在行元素中，表示一行中最多显示几个列元素。...后加start、center、end，分别是顶部对齐，垂直居中，底部对齐 .align-self- 与上面的不同但相似，设置在column元素类中，单独对自身垂直方向对齐 <div class="row...，同上 ---- Gutter列填充 特别方便、简单、规范的设置元素间距。....gx- 水平填充 .gy- 垂直填充 .g-水平垂直都设置 ---- Reboot 重置样式 ---- Typography排版 设置标题大小 .h1 .h2 .h3 文本样式 ...的按钮样式，只需在button元素中添加class属性：.btn 按钮主样式 控制颜色需要改变
在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。...： css文件夹中 js文件夹中 引入Bootstrap文件 直接把整个下载好的Bootstrap文件夹复制到相应的文件里即可 在具体的HTML文件中上图的位置引入Bootstrap文件 处理依赖..."> js内容书写位置 css部分讲解 一 页面设置 需要页面设置为 HTML5 文档类型 二 移动设备自适应标签 为了确保适当的绘制和触屏缩放...Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。...我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。
TODO 我想把博客在改造一下，大概先想这些，后续想到在加吧… 网站底部样式改造 头像呼吸灯 自定义鼠标右键 友链页面 音乐播放器 头像呼吸灯 在主题后台全局css里添加 /*头像呼吸光环和鼠标悬停旋转放大...none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover...1.6.0/css/cydibu.min.css"> bootstrap-grid.min.css..."> footer页面放入以下代码 中，查找到<?
BootStrap常用组件 PS:所有的代码必须写在container-fluid”>容器当中 常用组件包含内容: 字体图标 下拉菜单 按钮组 输入框俎 导航 分页...”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分...设置viewport 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： 高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。...JavaScript插件 常用的Bootstrap自带插件 其他常用插件 Bootstrap实例精选： 封面图 Carousel 博客页面 控制台 登录页 Offcanvas 课后习题： 后台管理页面（
该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。...3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点.../css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="....、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；undefined 所有页面相互超链接，可到三级页面，有5-10个页面组成； 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术； 菜单美观...、醒目，二级菜单可正常弹出与跳转； 要有JS特效，如定时切换和手动切换图片新闻； 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用； 页面清爽、美观、大方，不雷同。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
