将下面代码的button变小 <button type="submit" class="btn btn-danger pull-right" id="delete-button">删除</button>
时间: 2023-06-16 20:06:49 浏览: 71
可以尝试修改`btn-danger`和`pull-right`这两个class的属性来缩小按钮的大小。例如,可以将`btn-danger`修改为`btn-sm`,将`pull-right`修改为`float-right`,代码如下:
```
<button type="submit" class="btn btn-sm btn-danger float-right" id="delete-button">删除</button>
```
你也可以在style中添加自己的样式来控制按钮大小,例如:
```
<button type="submit" class="btn btn-danger pull-right" id="delete-button" style="font-size: 14px; padding: 5px 10px;">删除</button>
```
这样就可以通过修改`font-size`和`padding`来控制按钮的大小了。
相关问题
<div class="container"> <div class="mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-danger" type="button" id="button-addon2" >删除</button> </div> <button type="submit" class="btn btn-primary">提交</button> <button type="submit" class="btn btn-success">增加</button> </div> 如何动态增加一模一样药物输入框
可以使用 JavaScript 实现动态增加药物输入框,具体实现步骤如下:
1. 给“增加”按钮绑定点击事件,点击按钮时动态增加一个药物输入框。
2. 在点击事件中创建一个新的输入框元素,并设置其属性和样式。
3. 将新的输入框元素添加到表单中。
下面是示例代码:
```html
<div class="container">
<div class="mb-3">
<label for="name" class="form-label">姓名</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div id="medicines">
<div class="input-group mb-3">
<input type="text" class="form-control medicine-input" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-danger delete-button" type="button" id="button-addon2">删除</button>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
<button type="button" class="btn btn-success add-button">增加</button>
</div>
<script>
// 获取元素
const medicinesDiv = document.getElementById('medicines');
const addButton = document.querySelector('.add-button');
const deleteButtons = document.querySelectorAll('.delete-button');
// 定义增加输入框的函数
function addMedicineInput() {
// 创建新的输入框元素
const inputGroup = document.createElement('div');
inputGroup.classList.add('input-group', 'mb-3');
const input = document.createElement('input');
input.type = 'text';
input.classList.add('form-control', 'medicine-input');
input.placeholder = '药物';
input.setAttribute('aria-label', 'Recipient\'s username');
input.setAttribute('aria-describedby', 'button-addon2');
const deleteButton = document.createElement('button');
deleteButton.classList.add('btn', 'btn-danger', 'delete-button');
deleteButton.type = 'button';
deleteButton.id = 'button-addon2';
deleteButton.textContent = '删除';
// 绑定删除按钮的点击事件
deleteButton.addEventListener('click', () => {
inputGroup.remove();
});
// 将新的元素添加到表单中
inputGroup.appendChild(input);
inputGroup.appendChild(deleteButton);
medicinesDiv.appendChild(inputGroup);
}
// 绑定增加按钮的点击事件
addButton.addEventListener('click', addMedicineInput);
// 绑定删除按钮的点击事件
deleteButtons.forEach((button) => {
button.addEventListener('click', () => {
button.parentNode.parentNode.remove();
});
});
</script>
```
在上面的代码中,我们将药物输入框包裹在一个 `<div>` 元素中,并为这个 `<div>` 元素设置了一个 id,方便后面操作。我们还定义了一个增加输入框的函数 `addMedicineInput()`,在这个函数中,我们创建了一个新的输入框元素,并将其添加到表单中。当用户点击“增加”按钮时,我们调用这个函数来增加输入框。同时,我们也为每个删除按钮绑定了点击事件,在点击时删除对应的输入框。
<%@page pageEncoding="utf-8" %> <!-- Modal --> <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title text-info">用户注册</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form method="post" action="${pageContext.request.contextPath }/model/register"> <div class="modal-body"> <div class="form-group row"> <label class="col-sm-2 col-form-label">用户名</label> <div class="col-sm-10"> <input class="form-control" id="username" name="un" type="text" required /> <span class="text-danger" id="checkInfo"></span> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">密码</label> <div class="col-sm-10"> <input class="form-control" name="pw" type="password" required /> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">电话</label> <div class="col-sm-10"> <input class="form-control" name="tel" type="number" required /> </div> </div> <div class="form-group row"> <label class="col-sm-2 col-form-label">地址</label> <div class="col-sm-10"> <input class="form-control" name="addr" type="text" required /> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="submit" class="btn btn-primary" id="regButton">确定</button> </div> </form> </div> </div> </div>解析每一行代码
= score_management.average_score('math')
print(f'数学成绩最高分:{highest_score}')
print(f'数学成绩最低分:{lowest_score}')
print(f'数学成绩平均分:{average_score}')
1. 第一行是指定页面编码为 UTF-8。
2. 注释行,提示该模态框是用 elif sub_option == '3':
highest_score = score_management.highest_score('english')
lowest_score = score_management.lowest_score于注册用户的。
3. 创建一个模态框,id 为 registerModal,用于显示用户注册的内容。
4.('english')
average_score = score_management.average_score('english')
print(f'英语成绩最高分:{highest 创建一个模态框的主体部分。
5. 创建一个模态框的标题部分。
6. 创建一个关闭按钮,用于关闭模态框。
7. 创建一个表单,method 为 post,action 为 register,用于提交用户_score}')
print(f'英语成绩最低分:{lowest_score}')
print(f'英语成绩平均分注册信息。
8. 创建一个模态框的主体内容部分。
9. 创建一个表单组,标签为“:{average_score}')
elif option == '3':
print('退出系统')
break
else:
print('输入用户名”,包含一个输入框,要求输入框必填,id 为 username,name 为 un,同时包含一个有误,请重新选择!')
```
该代码实现了基本信息管理模块和学生成绩管理模块的主要功能。你可以根据实际需求进行修改和完善。同时,这份代码也是面向对象编程用于显示错误信息的 span 元素。
10. 创建一个表单组,标签为“密码”,包含一个密码输入的一个简单示例,你可以参考其中的设计思路和代码实现。
阅读全文