zoukankan      html  css  js  c++  java
  • 视图模板中 使用boottstrap 将各表单字段排成一行

    如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 <form> 标签添加 class .form-inline

    <form class="form-inline" role="form">
       <div class="form-group">
          <label class="sr-only" for="name">名称</label>
          <input type="text" class="form-control" id="name" 
             placeholder="请输入名称">
       </div>
    <button type="submit" class="btn btn-default">提交</button>
    Asp.net MVC 中使用bootstrap 布局视图的时候,可以使用内联的样式将各个表单排成一行。View中的代码如下

    @using (Html.BeginForm("Index", "Movie", FormMethod.Get, htmlAttributes: new { @class = "form-inline", role = "form" })) //使用get形式发送表单可以使发送的字符串显示在URL中,并保存为书签。
    {


    <div class="form-group">
    <label for="searchString" class="control-label">片名:</label>
    </div>

    也可以Label标签不用包含在在<div class="from-group">中。直接

    <label for="searchString" class="control-label">片名:</label>
    <div class="form-group">
    @Html.TextBox("searchString", "", htmlAttributes: new { @class = "form-control", placeholder = "请输入片名" })
    </div>
    <input type="submit" value="查找" class="btn btn-primary" />

    }

    截图如下:

  • 相关阅读:
    【算法笔记】B1020 月饼
    JZOJ 3412. 【NOIP2013模拟】KC看星
    JZOJ 3517. 空间航行
    JZOJ 3515. 软件公司
    JZOJ 3514. 最小比例
    JZOJ 3490. 旅游(travel)
    luogu P3178 [HAOI2015]树上操作
    JZOJ 3427. 归途与征程
    JZOJ 3426. 封印一击
    JZOJ 3425. 能量获取
  • 原文地址:https://www.cnblogs.com/liuyuanhao/p/4317585.html
Copyright © 2011-2022 走看看