使用 Twitter Bootstrap 3 如何获得带圆角的现代表单输入答案

【问题标题】：Using Twitter Bootsrap 3 how to get moder form input with rounded corners使用 Twitter Bootstrap 3 如何获得带圆角的现代表单输入
【发布时间】：2013-08-18 02:05:35
【问题描述】：

我在我的 MVC 视图中使用 Twitter Bootsrap 3 并且有一个问题：

我注意到我的输入框是方形的，当聚焦时，边缘周围有橙色高光。它们也被挤在一起。

我已经尝试了所有方法来获得带有圆角和浅蓝色高光的输入框。我还需要在每个框之间自动应用间距。

我可以使用哪个表单类来实现所需的行为？

<body>
    <div class="container well login-form">
        <div class="logo fullsize"></div>
        @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>Welcome!</legend>
                <div>
                    @Html.LabelFor(m => m.UserName)
                    @Html.TextBoxFor(m => m.UserName, new { placeholder = "type your username" })
                    @Html.ValidationMessageFor(m => m.UserName)
                </div>
                <div>
                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(m => m.Password, new { placeholder = "type your password" })
                    @Html.ValidationMessageFor(m => m.Password)
                </div>
                 <div>
                    @Html.LabelFor(m => m.PartnerAccessCode)
                    @Html.PasswordFor(m => m.PartnerAccessCode, new { placeholder = "partner access code" })
                    @Html.ValidationMessageFor(m => m.PartnerAccessCode)
                </div>
                <div>
                    <label class="checkbox">
                        @Html.CheckBoxFor(m => m.RememberMe)
                        Remember
                    </label>
                </div>
                <input type="hidden" name="returnUrl" value="@ViewBag.ReturnUrl" />
                <input type="submit" value="Log in" class="btn-lg btn-success " onclick="$('form').submit()"/>
            </fieldset>
            <br/>
            <p>
                @Html.ActionLink("Register", "Register") if you don't have an account.
            </p>
        }
    </div>
</body>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您需要input-control 类来实现圆角和蓝色高光。

【讨论】：

嗨，扎克，谢谢。我在 bootsrap 3 css 文件中没有看到输入控制类。

【解决方案2】：

引导文档中对所有内容进行了精彩的解释。请看：http://getbootstrap.com/css/

在您的情况下，使用“form-control”类应该可以工作：

 <input class="form-control" type="hidden" name="returnUrl" value="@ViewBag.ReturnUrl" />
 <input class="form-control" type="submit" value="Log in" class="btn-lg btn-success " onclick="$('form').submit()"/>

您可以查看一些方便的引导示例以开始使用：https://github.com/juthilo/bootstrap-examples

【讨论】：