ASP.Net 调整布局，调整图像和按钮以适应分辨率（响应式布局）

Question

我对 HTML 和 CSS 有点陌生，我知道，但我一点也不擅长设计，我确信我想要的是可能的，但是当我在寻找我想要的东西时，我没有得到好的 results/searches 所以我很难你们可以帮助我。（我觉得它叫响应式布局？如果我错了请纠正我）

我现在得到这个页面：

我认为它看起来不错，但我想知道无论分辨率如何，如何让它保持这样，所以如果我裁剪浏览器 window，我希望徽标位于居中的两个按钮之上。

我的代码是：

<img src='../../iScrape.png' style="margin-top:25%;margin-left:35%;" />
            <br />
            <input id="Button1" type="button" value="LEARN MORE"style="
        margin-top:2%;
        margin-left:34%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:transparent;
        border-color:white;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("About", "Home")'" />
            <input id="Button2" type="button" value="TESTING1 TWO" style="
        margin-left:2%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:#ED5B53;
        border-color:transparent;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("Testing1two", "Home")'" />

( 都在 ASP.Net 项目的基本模板中。

我想知道是否有一种简单的方法来做我想做的事，我确定有，因为裁剪和获取:

不太好

Answer 1

使用包管理器将 Bootstrap 安装到 VS 中。然后只需添加自定义 CSS class.

然后您可以这样添加按钮：

<div class="container">
    <div class="row">
        <div class="center-block">
            <!-- add buttons here -->
        </div>
    </div>
</div>

您可以在自定义 CSS 中将背景图像添加到正文 class。

文档：http://getbootstrap.com/css/#helper-classes-center

ASP.Net 调整布局，调整图像和按钮以适应分辨率（响应式布局）

ASP.Net Adapting layout, Adapt Image and buttons to resolution ( Responsive layout )

html

css

asp.net

styles

responsive-design