Bootstrap Example - KAEDE Hack blog

why

FirebaseのDBの使用に，デザインコストをかけない手段として

Bootstrap4のTable-resonsiveとFormを検討した．

導入

cdnのlinkをstyleに記述する

Reactではnpm i で入る．cdnよりも組み込んだ方が動作が速い

blog.logrocket.com

Reactではこれの通りにindex.jsでimportしたら使えた．

form `form-control`

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Item Name</label>
    <input type="email" class="form-control" id="nameForm" 
    placeholder="Enter Name">
  </div>
</form>

f:id:kei_s_lifehack:20200314035940p:plain

divにform-group, label forにexmaple Input Email1,

classにform-control．

labelはあった方が間がつまらない

ただこのままだと一番右まで伸びていく．

<form>
  <div class="form-row">
      <div class="col-7">
        <input type="text" class="form-control" id="nameForm" 
        placeholder="Name">
      </div>
      <div class="col">
        <input type="text" class="form-control" id="nameForm" 
        placeholder="Purpose">
      </div>
      <div class="col">
        <input type="text" class="form-control" id='price'
        placeholder="Price">
      </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

col7, col, col,

で　7:1:1で並べられる

Align Center

f:id:kei_s_lifehack:20200314041254p:plain

Bootstrap実装前の状態がこれだが

f:id:kei_s_lifehack:20200402050025p:plain

単にこれにform-controlを入れると長くなってしまう

f:id:kei_s_lifehack:20200402050108p:plain

containerにcol-lg-1を入れると狭くできるが，

input がcenterに寄らない

もちろん3だともう少し広くなるだけ．

f:id:kei_s_lifehack:20200402052057p:plain

mx-autoをつけるとFormも中央に寄った

f:id:kei_s_lifehack:20200402052223p:plain

btn

btn btn-primaryをつけると綺麗になる

btnで丸く, primaryでいい色に

幅をformのように広くするやり方はわからん btn-group, btn-group-justifiedは効果なし

btn-lgで大きくはできる．広くfitはできない

table

<div class="table-responsive">
  <table class="table" id='table'>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">name</th>
      <th scope="col">price</th>
      <th scope="col">purpuse</th>
    </tr>
    </thead>
    <thead id="usercol">
    <tr>
      <th scope="row">num</th>
      <td>Larry</td>
      <td>500</td>
      <td>@twitter</td>
    </tr>
    </thead>

  </table>
</div>