ドットインストールでBootstrapもやってみた

ドットインストールでBootstrapもやってみたBootStrapは既に使っているわけだが、一通り手を動かしてもっと簡単にいじれるようにやってみました。ドットインストール 気になったところをメモしていきます。

フォーム

<form action="">
  <div class="form-group has-error">
    <label for="email" class="control-label">Email</label>
    <input type="text" class="form-control" id="email" placeholder="email">
    <span class="help-block">Error!</span>
  </div>
  <div class="form-group">
    <input class="btn btn-primary" type="submit" value="submit">
  </div>
</form>

labelsr-onlyクラスをつけると、画面上には表示しない(が読み上げはされる)という設定ができる。

ボタンをグループ化

Bg


<div class="btn-group">
  <button class="btn btn-primary">Push Me!</button>
  <button class="btn btn-success">Push Me!</button>
  <button class="btn btn-info">Push Me!</button>
</div>

レスポンシブに対応したナビゲーションバー

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target=".target">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="">Dotinstall</a>
    </div>

    <div class="collapse navbar-collapse target">
      <ul class="nav navbar-nav">
        <li class="active" ><a href="">Link1</a></li>
        <li><a href="">Link2</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Link3</a></li>
      </ul>
    </div>
  </nav>

モーダル表示

    <a href="#myModal" data-toggle="modal" class="btn btn-primary">Show me!</a>

    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          <button class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">My Modal</h4>
          </div>
          <div class="modal-body">
          こんにちは
          </div>
          <div class="modal-footer">
          <button class="btn btn-primary">OK!</button>
          </div>
        </div>
      </div>
    </div>

その他メモ

  • hidden-xs: 画面が小さくなった時(<768)には画面から消す。

参考

Pocket
LINEで送る

You may also like...