Twitter 的引导与 ASP.NET MVC5 项目中插入响应的图像

标签: Asp.net HTML CSS
发布时间: 2017/3/26 3:55:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试着脚手架应用程序,和我想我的网站,以响应使用的手机。

我想要插入徽标,但真不知如何去做如下图所示︰

enter image description here

我想要的图像是蓝色的盒子里。什么是 HTML 标签做到这一点?

当插入图像,我想要调整大小,页面的其余成正比的图像。

这里是我到目前为止已经创建视图︰

@model someModel.Models.LoginViewModel

<div class="row">
    <div class="col-md-8 col-sm-12 col-xs-12">
        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true)
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder="USUÁRIO"})
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder="SENHA" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-xs-12">
                        <button type="submit" class="btn btn-success btn-block">Entrar</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
                        <button type="submit" class="btn btn-primary btn-block" onclick="location.href='@Url.Action("Register", "Account")'">Ainda Não Tenho Conta</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
                        <button type="submit" class="btn btn-info btn-block">Esqueci Meu Usuário Ou Senha</button>
                    </div>
                </div>
            }
        </section>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

解决方法 1:

所以在这里的几件事。第一件事插入图像。这可以通过 img 标记就是 HTML 的一部分。这是为实际插入的图像,仅此而已。

第二部分是引导类包括。我不会谈论 col-md-12 因为您已经在使用的。text-center(这是内置引导) 类将到中间中心的形象像您的请求 div

第三部分,并不需要在这里是 @Url.Content("path to image") 这是 razor 语法。从根本上说,这将生成的图像位置呈现时的物理地址。作为一个例子,我将创建一个名为文件夹 Images 中我会坐在这里的项目 C:\Users\SomeUser\Documents\Visual Studio 2013\Projects\MyProject\MyProject\Images\image.png ,因此呈现为 Images\image.png 。按评论,一个更现实的版本将是 @Url.Content("~/Images/image.png") 。使用这个的原因是因为无论页面位于何处内项目的层次结构,razor 语法将确保它指向正确的位置。

第四部分是 alt="image" ,是为了使它符合 W3 标准的属性。在一个基本的水平,这意味着如果图像不可用,将给予而不是图像的替代是一些文本将显示 image

最后是一类图像这是 img-responsive 。这是一个内置的自举类使图像响应的浏览器中调整大小 / 不同视区大小。

我们把这一切放在一起,最终应位于上方像你第一次输入一个代码块︰

<div class="col-md-12 text-center">
    <img src="@url.content("path to image")" alt="image" class="img-responsive" />
</div>

这里的一切对答案引用︰

官方微信
官方QQ群
31647020