HTML bootstrap 模态对话框添加用户
HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Bootstrap 实例 - 模态框（Modal）插件</title>
6 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
7 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
8 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
9 </head>
10 <body>
11 <div>
12 <form action="{% url 'sw_mgmt:new_init' %}" method="post">
13 {% csrf_token %}
14 <!-- 按钮：用于打开模态框 -->
15 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
16 添加新脚本
17 </button>
18 <!-- 模态框 -->
19 <div class="modal fade" id="myModal">
20 <div class="modal-dialog modal-lg">
21 <div class="modal-content">
22 <!-- 模态框头部 -->
23 <div class="modal-header">
24 <h4 class="modal-title" id="myModalLabel">
25 添加新脚本
26 </h4>
27 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
28 ×
29 </button>
30 </div>
31 <!-- 模态框主体 -->
32 <div class="modal-body">
33 <div>
34 <label for="id_brand">品 牌:</label>
35 <select name="brand" required id="id_brand">
36 <option value="" selected>请选择品牌</option>
37 <option value="0">CISCO</option>
38 <option value="1">H3C</option>
39 <option value="2">锐捷</option>
40 <option value="3">华为</option>
41 <option value="4">博科</option>
42 </select>
43 </div><br>
44 <div>
45 <label for="id_sw_model">型 号:</label>
46 <input type="text" name="sw_model" maxlength="150" autofocus required id="id_sw_model" placeholder="请输入交换机型号">
47 </div><br>
48 <div>
49 <label style="vertical-align: top;" for="id_commands">命令集:</label>
50 <textarea style="overflow-y: auto; width:650px;height: 500px;" name="commands" autofocus required id="id_commands" placeholder="请输入初始化命令集"></textarea>
51 </div>
52 </div>
53 <!-- 模态框底部 -->
54 <div class="modal-footer">
55 <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
56 <button type="submit" class="btn btn-primary" value="提交">提交</button>
57 </div>
58 </div>
59 </div>
60 </div>
61 </form>
62 </div><br>
63 </body>
64 </html>
65
HTML bootstrap 模态对话框添加用户的更多相关文章
- 为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
- Bootstrap 模态框在用户点击背景空白处时会自动关闭
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载
http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...
- bootstrap模态对话框
bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...
- bootstrap模态对话框(最简单)
根据公司的需求,需要一个对话框来返回给客户的失败原因,刚刚开在百度上搜了老半天,嫩是没有搜索一个自己想要的,后来发送私信给一个博友,经过他哪里找到了自己想要的答案,废话不多说直接看源码: <!D ...
- Bootstrap 模态对话框 remote指定内容加载
第一个页面: .....其他内容..... <div class="modal" id="ID_ReformDetail"> <div cla ...
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
原文: https://my.oschina.net/qczhang/blog/190215?p=1
- python Django html 一对多数据实例 模态对话框添加数据
- Bootstrap 避免模态框在用户点击背景空白处时，会自动关闭。
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
随机推荐
- STM32，下载HAL库写的代码后J-Link识别不到芯片，必须要按住复位才能下载？
问题描述:最近在学STM32的HAL库,据说可以统一STM32江湖,前途无量.最近一段时间参照STM32CubeMX和原子的资料自己学着建了两个HAL库的工程模板,F4的还好说,F1的出现了一个玄学问 ...
- PHP中的MySQLi扩展学习（三）mysqli的基本操作
我们继续 MySQLi 扩展的学习,上篇文章中提到过,MySQLi 的扩展相对于 PDO 来说功能更加的丰富,所以我们依然还会在学习过程中穿插各种 MySQLi 中好玩的方法函数.不过,今天的主角是 ...
- Shell系列（31）- 双分支if语句简介
双分支if条件语句 if [ 条件判断式 ] then 条件成立,执行的程序 else 条件不成立,执行的程序 fi 需求 根据用户输入的目录名,判断是否存在 脚本: #!/bin/bash #使用r ...
- Shell系列（35）- for循环语法一简介及批量解压缩脚本
for循环语法一 for 变量 in 值1 值2 值3 - do 程序 done 例子 需求:批量解压缩 脚本: #!/bin/bash cd /root/publicls *.tar.gz > ...
- 『Python』面向对象（二）
继承 继承的语法 class Animal(object): def __init__(self,name): self.__name = name class Dog(Animal): kind = ...
- 自学 Java开发（Java后台开发|Java后端开发）的书籍推荐
java编程思想java并发编程实战深入理解java虚拟机函数式编程思维tcp/ip详解鸟哥的linux私房菜spring mvc +mybatis开发从入门到精通spring技术内幕elastics ...
- 深入浅出WPF-11.Template（模板）01
模板 在WPF中,模板可以分为两大类: 控件模板(ControlTemplate)是算法内容的表现形式,一个控件怎么组织其内部的结构才能让它更符合业务逻辑,让用户操作更舒服,都是由她控制的.它决定了控 ...
- 深入浅出WPF-04.x名称空间详解
x名称空间详解 几个需要特别说明的名称空间: x:Class 用来标记XAML和后台代码之间的合并关系.x:Class根节点的类型必须和x:Class值指向的类型保持一致.x:Class的值指向的类型 ...
- 阿里：MySQL数据库规范
阿里:MySQL数据库规范 简介:基于阿里数据库设计规范扩展而来 设计规范 1.[推荐]字段允许适当冗余,以提高查询性能,但必须考虑数据一致.冗余字段应遵循: 不是频繁修改的字段. 不是 varcha ...
- mysql8 主从搭建
主:192.168.10.2 从:192.168.10.3 主:1.登录mysql,授权账号,让从数据库可以进行复制. mysql CREATE USER 'repl'@'192.168.10.3' ...