Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
200 views
in Technique[技术] by (71.8m points)

html - Using Twitter Bootsrap 3 how to get moder form input with rounded corners

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need the input-control class to achieve the rounded corners and blue highlights.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...