AngularJS1.5に再挑戦 その14 Bootstrap & CSS
概要
AngularJS1.5に再挑戦 その14 Bootstrap & CSS
参考動画・参考サイト
AngularJS — Superheroic JavaScript MVW Framework
Bootstrap & CSS
- BootstrapのCDNバージョンを利用する。index.htmlに読み込ませる。
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
以下のサイト参照
angularJSを使う場合は、CSS部分だけを読み込めばOK。javascript部分は、customjQueryを使っており、挙動がうまくいかないことがあるため。
最終的には以下のように作成。
<div class='row'> <div class='col-sm-8 col-sm-offset-2'> <div class="page-header"> <h1>{{ post.title }}<small> {{ post.description }}</small></h1> </div> <h1></h1> <p></p> <p>{{ post.description }}</p> <hr/> <h3>Comments</h3> <div class='row'> <div class='col-sm-6'> <input class='form-control' type='text' ng-model='query' placeholder='filter comments' /> </div> </div> <ul> <li ng-repeat='comment in post.comments | filter: query'> {{ comment.text }} <a href='#' confirm-click='削除してもよろしいですか?' confirmed-click='deleteComment(comment)'>Confirm</a> <a href='#' ng-click='deleteComment(comment)'>Delete</a> </li> </ul> <hr/> <div class='row'> <div class='col-sm-6'> <p style='color:red;' ng-if='reply.text'>Preview: {{ reply.text }}</p> <form ng-submit='addReply()'> <input type='hidden' ng-model='reply.id' value='5'> <textarea class='form-control' ng-model='reply.text'></textarea> <input class='btn btn-default' type='submit'/> </form> </div> </div> </div> </div>