芜湖公司做网站,济南公众平台网站建设,企业公司简介,高平企业网站文章目录 需要达到的前端效果预览#xff1a;实现步骤复制bootstrp代码#xff08;buttons#xff09;复制bootstrp代码#xff08;Alert警告框#xff09;写js测试效果 需要达到的前端效果预览#xff1a;
{% load static %}
!DOCTYPE html
html lang实现步骤复制bootstrp代码buttons复制bootstrp代码Alert警告框写js测试效果 需要达到的前端效果预览
{% load static %}
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheethref{% static antapp/bootstrap/bootstrap.min.css %}titleDocument/title/headbodydiv classrow stylemargin-top: 20px;margin-left: 40px;button typebutton idchinese classbtn btn-primary stylemargin-left: 5px;语文/buttonbutton typebutton idmath classbtn btn-warning stylemargin-left: 5px;数学/buttonbutton typebutton idenglish classbtn btn-success stylemargin-left: 5px;英语/buttonbutton typebutton idshow classbtn btn-danger stylemargin-left: 5px;显示/buttonbutton typebutton idhide classbtn btn-secondary stylemargin-left: 5px;隐藏/button/divdiv classrow stylemargin-top: 20px; margin-left: 40px;div idshowtxt classalert alert-primary rolealert A simple primary alert—check it out!/div/divscript src{% static antapp/bootstrap/jquery.min.js %}/scriptscript src{% static antapp/bootstrap/bootstrap.bundle.min.js %}/scriptscriptvar btconfig{chinese:语文成绩100,math:数学成绩99,english:英语成绩98,}$(function(){$(#chinese).click(function(){alert(btconfig[chinese])$(#showtxt).html(btconfig[chinese])})$(#math).click(function(){$(#showtxt).html(btconfig[math])})$(#english).click(function(){$(#showtxt).html(btconfig[english])})$(#show).click(function(){$(#showtxt).show()})$(#hide).click(function(){$(#showtxt).hide()})})/script/body
/html实现步骤
复制bootstrp代码buttons
button typebutton idchinese classbtn btn-primary stylemargin-left: 5px;语文/button
button typebutton idmath classbtn btn-warning stylemargin-left: 5px;数学/button
button typebutton idenglish classbtn btn-success stylemargin-left: 5px;英语/button
button typebutton idshow classbtn btn-danger stylemargin-left: 5px;显示/button
button typebutton idhide classbtn btn-secondary stylemargin-left: 5px;隐藏/button上图使用的工具链接如下 https://blog.csdn.net/xzzteach/article/details/140732891
复制bootstrp代码Alert警告框
https://v4.bootcss.com/docs/components/alerts/
div idshowtxt classalert alert-primary rolealert A simple primary alert—check it out!/div写js scriptvar btconfig{chinese:语文成绩100,math:数学成绩99,english:英语成绩98,}$(function(){$(#chinese).click(function(){alert(btconfig[chinese])$(#showtxt).html(btconfig[chinese])})$(#math).click(function(){$(#showtxt).html(btconfig[math])})$(#english).click(function(){$(#showtxt).html(btconfig[english])})$(#show).click(function(){$(#showtxt).show()})$(#hide).click(function(){$(#showtxt).hide()})})/script测试效果
