Bootstrapを使って、簡単にデザイン
デザインの微調整はよく手こずるので、
Bootstrapで簡単に済ます。
ドキュメントを見ながら適当にやるだけで、
普段よりかなりマシになった（普段のデザインがダメすぎる…）。
containerやら、tableやらalertのクラスを使った。
あまり理解していなくても、
ドキュメントを見つつ実験すれば一応何とかなる感じ。
まだ問題はあるが、見た目にこだわって作り込むのは
自分はやりたくないので、今後もこれで済まそう。
Last active
December 16, 2017 12:21
-
-
Save PhilOwen/66b442cd3d5171b205a43a21c80fa4b6 to your computer and use it in GitHub Desktop.
Bootstrap 4で手軽なデザイン
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.min.js" | |
| integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
| <script type="text/javascript" src="main.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="alert alert-secondary">Items</h1> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th scope="col">ID</th> | |
| <th scope="col">Data</th> | |
| <th scope="col">Time</th> | |
| </tr> | |
| </thead> | |
| <tbody id="table-body"> | |
| </tbody> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| $(() => { | |
| $.getJSON( | |
| "/records.json", | |
| records => { | |
| let trs = _.map(records, record => { | |
| let tr = $('<tr>'), | |
| id = $('<td>', { scope: "row"}).text(record.id), | |
| data = $('<td>').text(record.data), | |
| timestamp = $('<td>').text(record.timestamp); | |
| return tr.append(id, data, timestamp); | |
| }); | |
| $("#table-body").append(trs); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "id": "1", | |
| "data": "foo", | |
| "timestamp": "Sat Dec 16 2017 21:18:58 GMT+0900 (JST)" | |
| }, | |
| { | |
| "id": "2", | |
| "data": "bar", | |
| "timestamp": "Sat Dec 16 2017 21:19:00 GMT+0900 (JST)" | |
| }, | |
| { | |
| "id": "3", | |
| "data": "baz", | |
| "timestamp": "Sat Dec 16 2017 21:19:02 GMT+0900 (JST)" | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment