Bootstrapで見た目を整える

yinm · yinm · commit 9a5cb57ea761 · 2016-10-17T14:42:25.000+09:00
diff --git a/app/assets/javascripts/Task.js b/app/assets/javascripts/Task.js
@@ -13,7 +13,7 @@ export default class Task extends React.Component {
           {this.props.content}
         </td>
         <td>
-          <select defaultValue={this.props.status} onChange={this.handleUpdate.bind(this)} >
+          <select className="form-control" defaultValue={this.props.status} onChange={this.handleUpdate.bind(this)} >
             <option value="todo" key="todo">todo</option>
             <option value="doing" key="doing">doing</option>
             <option value="done" key="done">done</option>
diff --git a/app/assets/javascripts/TaskApp.js b/app/assets/javascripts/TaskApp.js
@@ -68,7 +68,7 @@ export default class TaskApp extends React.Component {
       <div className="TaskApp">
         <TaskForm
           onTaskSubmit={this.handleTaskSubmit.bind(this)} />
-        <table>
+        <table className="table table-striped">
           <thead>
             <tr>
               <th>Content</th>
diff --git a/app/assets/javascripts/TaskForm.js b/app/assets/javascripts/TaskForm.js
@@ -16,8 +16,12 @@ export default class TaskForm extends React.Component {
   render() {
     return (
       <form className="todoForm" onSubmit={this.handleSubmit.bind(this)}>
-        <input type="text" placeholder="ToDo" ref="content" />
-        <input type="submit" value="登録" />
+        <div className="input-group">
+          <input type="text" className="form-control" placeholder="ToDo" ref="content" />
+          <span className="input-group-btn">
+            <input type="submit" className="btn btn-primary" value="登録" />
+          </span>
+        </div>
       </form>
     );
   }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Todo</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
     <%= csrf_meta_tags %>
 
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
@@ -1,3 +1,4 @@
-<h1>Listing Tasks</h1>
 <div id="container">
+  <h1 class="page-header">Listing Tasks</h1>
+  <div id="container"></div>
 </div>
