首页 > 其他分享 >Bootstrap 5 内联表单

Bootstrap 5 内联表单

时间:2024-02-14 13:12:01浏览次数:26  
标签:Bootstrap 表单 查找 类型 内联 片名

<form method="get" class="row row-cols-sm-auto mb-2 gx-2 align-items-center">
<div class="col-12">
<label asp-for="@Model.SearchString" class="form-control-plaintext">片名:</label>
</div>
<div class="col-12">
<input type="text" asp-for="@Model.SearchString" class="form-control" placeholder="请输入片名"/>
</div>
<div class="col-12">
<label for="@Model.MovieGenre" class="form-control-plaintext">类型:</label>
</div>
<div class="col-12">
<select asp-for="@Model.MovieGenre" asp-items="@Model.Genres" class="form-select">
<option value="">全部类型</option>
</select>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">
<span class="bi-search">
查找
</span>
</button>
</div>
</form>

 

标签:Bootstrap,表单,查找,类型,内联,片名
From: https://www.cnblogs.com/liuyuanhao/p/18015145

相关文章

  • 二十、基于Bootstrap和FontAwesome制作页面
    调整项目目录结构:在项目statics目录下,创建JS、CSS、Plugins文件,分别用于存放js、css和第三方插件。Bootstrap:提供现成的样式+效果1、下载Bootstrap在boostrap官网下载用于生产版本的bootstrap,放在plugins文件夹。2、Html中引入Bootstrap的css<head>...<linkrel="style......
  • BootstrapBlazor 模板适配移动设备使用笔记
    项目模板BootstrapBlazorApp模板为了方便大家利用这套组件快速搭建项目,作者制作了项目模板(ProjectTemplates),使用dotnetnew命令行模式,使用步骤如下:安装项目模板dotnetnewinstallBootstrap.Blazor.Templates::8.0.1创建工程dotnetnewbbapp官网教程https:......
  • 表单验证功能的实现
     Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator<el-form:model="ruleForm":rules="rules">     <el-form-itemlabel="账号" placeholder="......
  • Bootstrap5 导航组件和面包屑
    Bootstrap5导航组件和面包屑Bootstrap5提供了一种简单快捷的方法来创建基本导航,它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件,包括选项卡和Pills,都通过基本的 .nav 类共享相同的基本标记和样式。使用Bootstrap5创建基本导航我们可以使用Bootstr......
  • Bootstrap5 导航组件和面包屑
    Bootstrap5导航组件和面包屑Bootstrap5提供了一种简单快捷的方法来创建基本导航,它提供了非常灵活和优雅的选项卡和Pills等组件。Bootstrap5的所有导航组件,包括选项卡和Pills,都通过基本的 .nav 类共享相同的基本标记和样式。使用Bootstrap5创建基本导航我们可以使用Bootstr......
  • 实现流程化办公,可详细了解流程引擎表单!
    随着社会竞争越来越激烈,实现高效率的流程化办公已经成为众多职场人的办公心愿。那么,什么样的软件和平台可以助力实现流程化办公?专业研发低代码技术平台的流辰信息可以为广大客户提供流程引擎表单等整套产品技术方案,助力企业创造高效率流程化办公。流程引擎表单可以通过各种配置化......
  • nginx改变访问应用端口以及解决css,js或表单提交访问不到的问题
    场景如果原先某个网站是通过ip:8080直接访问的,现在想要加个前缀,并且去掉端口进行访问,比如ip/myapp去访问这个项目,可以通过nginx来实现这个过程。最近有个需求需要变更redmine的访问路径,从ip:8080改成ip/redmine,下面以redmine举例子。配置过程以ip/redmine来访问原先ip:8080的项......
  • 可拖拽表单可以用在哪些领域?
    如果想要实现高效率的办公,可以通过低代码技术平台及可拖拽表单实现。什么服务商专业研发低代码技术平台产品?流辰信息拥有丰厚的研发技术功底和市场经验,可以助力企业做好数据管理工作,实现流程化办公,一起进入数字化转型新时代。IBPS开发平台是流辰信息的主流产品,是实现流程化办公的......
  • .NET中使用BootstrapBlazor组件库Table实操篇
    前言Table表格在后台管理应用中使用的是相当频繁的,因此找一个功能齐全的前端框架对于我们而言是非常必要的,因为封装完善的前端框架能够大大提升我们的工作对接效率。今天我们主要来讲解一下在.NET中使用BootstrapBlazor组件库的Table表格组件(本章使用的数据都是程序自动生成的模......
  • Bootstrap5 图片轮播
    Bootstrap5轮播样式表使用的是CDN资源<title>亚丁号</title><!--自定义样式表--><linkhref="static/front/css/front.css"rel="stylesheet"/><!--新Bootstrap5核心CSS文件--><linkrel="stylesheet"h......