ASP.Netレイアウトを適応させ、画像とボタンを解像度に適応させる（レスポンシブなレイアウト）

Question

私はHTMLとCSSの新機能ですが、私はそれについて知っていますが、全く設計するのはあまりよくありません。私が欲しいものは可能ですが、私が好きなものを探しているときには良い結果や検索が得られません。だからあなたは私を助けてくれるかもしれません。私は今、このページを得た

（？私は私が間違っているなら、私を修正して、それが応答レイアウトと呼ばれていると思います）：私は考えて

はかなりよさそうだが、私はどのように知りたいですどのような解像度になってもこのままにしておきましょう。ブラウザウィンドウをトリミングすると、2つのボタンの上にロゴを配置したいと思っています。

このための私のコードはちょうどです：。

<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

パッケージマネージャを使用して、ブートストラップをVSにインストールします。その後、カスタムCSSクラスを追加するだけです。

それからので、ボタンを追加することができます。

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

あなたのカスタムCSSで体クラスに背景画像を追加することができます。

ドキュメント：あなたはすべてのインラインCSSを除去することにより、ブートストラップを活用して起動する必要がありhttp://getbootstrap.com/css/#helper-classes-center