问题描述
我在我的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>
<图例>欢迎！< /图例>
< div>
@ Html.LabelFor（m => m.UserName）
@ Html.TextBoxFor（m => m.UserName，new {placeholder =输入您的用户名}）
@ Html.ValidationMessageFor（m => m.UserName）
< / div>
< div>
@ Html.LabelFor（m => m.Password）
@ Html.PasswordFor（m => m.Password，new {placeholder =输入您的密码}）
@ 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）
记住
< / label>
< / div>
< input type =hiddenname =returnUrlvalue =@ ViewBag.ReturnUrl/>
< input type =submitvalue =Log inclass =btn-lg btn-successonclick =$（'form'）。submit（）/>
< / fieldset>
< br />
< p>
@ Html.ActionLink（注册，注册），如果您没有帐户。
< / p>
}
< / div>
< / body>
在bootstrap文档中，请看看：
$ p
< input class = form-controltype =hiddenname =returnUrlvalue =@ ViewBag.ReturnUrl/>
< input class =form-controltype =submitvalue =Loginclass =btn-lg btn-successonclick =$（'form'）。submit（）/ >
您可以查看一些方便的引导示例以开始使用：
I am using Twitter Bootsrap 3 in my MVC view and have a question:
I noticed that my input boxes are squared and when focused has orange highlights around the edges. Also they are squished together.
I have tried everything to get the input boxes with rounded corners and light blue highlights. I also need spacing to be applied to automatically between each boxes.
Which form class can I use to achieve my required behavior?
<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>
Everything is wonderfully explained in the bootstrap documentation. Please, take a look: http://getbootstrap.com/css/
In your case using the "form-control" class should work:
<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()"/>
You can take a look at some handy bootstrap examples to get started: https://github.com/juthilo/bootstrap-examples
这篇关于使用Twitter Bootsrap 3如何获得具有圆角的现代形式输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！