BootStrapでレスポンシブなformを作る

さて、Go言語とRevelでWebアプリ開発:複利計算機の続きです。

やっとIndexページのform部分をそれなりの状態にするところまでやりました。

いろいろと理想的な動きを追い求めていたら時間がかかってしまいました。しかも妥協しました。

まずは作り終えないとどうにもならないことに気づいたので最低限で我慢しましょうね。

とはいえレスポンシブは外せませんよね。というわけで頑張ってそれなりにレスポンシブになったのを見てくれ。

ね、レスポンシブしてますね。頑張りました。

コード

#

このfomの部分はこんな感じになりました。コピーしたら多分動きます。

<div class="container-fluid">
  <form id="mainForm" action="App/Result/" method="GET">

    <div class="row justify-content-center">

      <div class="form-group col-11 col-sm-5">
        <label for="inputStartValue" class="control-label form-control-static">初期投資</label>
        <div class="input-group">
          <input type="number" id="inputStartValue" name="start" class="form-control" aria-label="">
          <span class="input-group-addon">万円</span>
        </div>
      </div>

      <div class="form-group col-11 col-sm-5">
        <label for="inputInterest" class="control-label form-control-static">利率</label>
        <div class="input-group">
          <select name="interestFrequency"  id="interestFrequency" class="form-control　col-1"><option selected="selected" value="1">毎年</option>
            <option value="2">毎月</option>
            <option value="3">毎日</option>
          </select>
          <input type="number" id="inputInterest" class="form-control" aria-label="">
          <span class="input-group-addon">%</span>
        </div>
      </div>


    </div>


    <div class="row justify-content-center">

      <div class="form-group col-11 col-sm-5">
        <label for="inputInvestment" class="control-label form-control-static">定期投資</label>
        <div class="input-group">
          <select name="investmentFrequency" id="investmentFrequency" class="form-control　col-1"><option selected="selected" value="1">毎年</option>
            <option value="2">毎月</option>
            <option value="3">毎日</option>
          </select>
          <input type="number" id="inputInvestment" class="form-control" aria-label="">
          <span class="input-group-addon">万円</span>
        </div>
      </div>

      <div class="form-group col-11 col-sm-5">
        <label for="inputPeriod" class="control-label form-control-static">期間</label>
        <div class="input-group">
          <input type="number" id="inputPeriod" name="period" class="form-control" aria-label="">
          <span class="input-group-addon">年</span>
        </div>
      </div>


    </div>


    <p>
    <div class="row justify-content-center">
      <div class="form-group col-12 col-sm-6"></div>
      <div class="form-group col-11 col-sm-4">
          <input type="submit" class="col" value="計算！" /> 
      </div>
    </div>
    </p>

    <div id="result">aa</div>


  </form>

</div>

container-fluidを使うとcontainerより滑らかに動きます。
justify-content-centerで真ん中によります。

あとボタンを右に寄せたいがために空白のcolを置いてます。これもっといい方法あるんですかね。知っていたら教えてください。

はーそんな感じです。改めて見ると本当にたいしたことしてませんでした。やれやれ。

次回はボタンを押した後の処理。

せっかくなのでシングルページにしようということでJqueryとajaxを使ってみちゃう気持ちです。

実はボタンを押してajaxでjson受け取ってくるとこまでやってあるんですけどね。へっへっへ。

ではまた。