form-group 如何按钮和文本框结合
时间: 2024-02-28 09:52:50 浏览: 14
可以使用 Bootstrap 中的 form-group 和 input-group 组件来实现按钮和文本框的结合。
下面是一个示例代码:
```
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入内容">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div>
</div>
```
在这个示例中,我们使用 input-group 将文本框和按钮包裹起来,然后将整个组合放在 form-group 内部。通过添加 input-group-btn 类,我们可以将按钮放在文本框的旁边。
注意,上述代码中引用了 Bootstrap 的样式文件和脚本文件,需要在页面中引入这些文件才能使用这些组件。
相关问题
html页面文本框布局
以下是一个简单的HTML页面文本框布局的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
padding: 16px;
background-color: white;
margin: 0 auto;
}
.input-group {
margin-bottom: 16px;
}
.input-group label {
display: block;
margin-bottom: 8px;
}
.input-group input[type="text"],
.input-group input[type="email"],
.input-group textarea {
width: 100%;
padding: 12px 20px;
margin-bottom: 8px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.input-group input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
.input-group input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>登录</h2>
<form action="/login" method="post">
<div class="input-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</div>
<div class="input-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
</div>
<div class="input-group">
<input type="submit" value="登录">
</div>
</form>
</div>
</body>
</html>
```
这个示例中,我们使用了HTML和CSS来创建一个简单的登录表单。通过CSS样式,我们设置了文本框的宽度、边框样式、背景颜色等。在HTML中,我们使用`<form>`元素来创建表单,并使用`<input>`元素来创建文本框和提交按钮。每个文本框都被包裹在一个`<div>`元素中,以便应用样式。用户可以在文本框中输入用户名和密码,并点击登录按钮提交表单。
vue-cron代码
以下是一个简单的 Vue.js 组件,用于生成 Cron 表达式。
```
<template>
<div>
<div class="form-group">
<label>分钟</label>
<input type="text" v-model="minute" placeholder="*"/>
</div>
<div class="form-group">
<label>小时</label>
<input type="text" v-model="hour" placeholder="*"/>
</div>
<div class="form-group">
<label>日</label>
<input type="text" v-model="day" placeholder="*"/>
</div>
<div class="form-group">
<label>月</label>
<input type="text" v-model="month" placeholder="*"/>
</div>
<div class="form-group">
<label>周</label>
<input type="text" v-model="week" placeholder="*"/>
</div>
<div class="form-group">
<button @click="generateCron">生成 Cron 表达式</button>
</div>
<div class="form-group">
<label>Cron 表达式:</label>
<input type="text" :value="cron" readonly/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
minute: '*',
hour: '*',
day: '*',
month: '*',
week: '*',
cron: '',
};
},
methods: {
generateCron() {
this.cron = `${this.minute} ${this.hour} ${this.day} ${this.month} ${this.week}`;
},
},
};
</script>
```
这个组件有五个文本框,一个按钮和一个只读的文本框。用户可以在文本框中输入 cron 表达式的五个字段。当用户点击 "生成 Cron 表达式" 按钮时,组件将会将这些字段拼接在一起,形成最终的 cron 表达式,并将其显示在只读文本框中。