3分でBootstrapを使ってみた - takayucky’s tech blog

先日Angular JSで作ったtodoListにBootstrapを使ってみました。
先日作ったtodoListはこんな感じです。
f:id:takayucky:20160424163217p:plain

下部のテキストエリアと追加ボタンに対してBootstrapを適用しようと思います。
Bootstrapを適用したtodoListはこんな感じです。
f:id:takayucky:20160501203159p:plain

テキストエリアと追加ボタンに対してだけなのでこのくらいの変化しかないですが。
とはいえBootstrapを使えば、
簡単に、統一感のある、レスポンシブな、
画面を作成できます。
コードは以下の通りです。

<!DOCTYPE html>
<html ng-app="todoApp">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
    <title>todoList</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Todo</h1>
      <div ng-controller="TodoListController as todoList">
        <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
        [<a href="" ng-click="todoList.archive()">archive</a>]
        <ul>
          <li ng-repeat="todo in todoList.todos">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done}}">{{todo.text}}</span>
              </label>
            </div>
          </li>
        </ul>
        <form ng-submit="todoList.addTodo()" class="form-inline">
          <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here" class="form-control">
          <input type="submit" value="add" class="btn btn-primary">
        </form>
      </div>
    </div>
  </body>
</html>

formタグに対してclassに値を設定しているだけで簡単に使用できます。以下の通りです。

        <form ng-submit="todoList.addTodo()" class="form-inline">
          <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here" class="form-control">
          <input type="submit" value="add" class="btn btn-primary">
        </form>

Bootstrapは公式を見れば大体の使い方はわかるかなあと思います。
英語ですがガンガン読んでいきましょう。
getbootstrap.com

英語に関連して話は変わるのですが、以下のリンクを読んでみて考えました。
d.hatena.ne.jp
やはりプログラミングをやるには英語できた方がいいかなと思います。
もちろん単純に「英語ができればプログラミングできるようになる」とは思いませんが、
できるようになる可能性は大きくなると思います。
ドキュメントの量がどれくらい違うとかはデータがないのでわかりませんが、
公式が英語で書かれているのでそこにダイレクトにアクセスできるかは違いが生まれると思います。
プログラミングに限らず一次情報に接することは一番大事です。

というわけで今回はBootstrapを使ってみました。
まだまだ使いこなしてはいませんがとりあえずアウトプット、
ということでこれくらいの感じでどんどん記事を書いていきたいです。