8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlan

Size: px

Start display at page:

Download "8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlan"

たつぞうふじした
5 years ago
Views:

1 8 Bootstrap 8.1 PicoPlanner responsive web design PC plan_items#index app/views/plan_items/index.html.erb 1 - <div> 1 + <div class='container-fluid'> 2 do item %> 3 - <div> 3 + <div class='row'> 4 - <div> 4 + <div class='col-12 col-md-4'> 5 <%= item.name %> 6 </div> 7 - <div> 75

2 8 7 + <div class='col-12 col-md-8'> 8 <%= item.description %> 9 </div> 10 </div> 11 <% end %> 12 </div> class container container-fluid PicoPlanner http//localhost3000/plan_items px 8.1 PC 76

3 8.2 Chrome grid system grid Bootstrap <div class='col-12 col-md-4'> class 12 4 div class col-12 col-md-4 col column md 77

4 8 responsive breakpoint breakpoint Bootstrap Bootstrap Small sm 576px Medium md 768px Large lg 992px Extra Large xl 1,200px Bootstrap 3 xs sm md lg 4 Bootstrap 4 xs xl Bootstrap alpha.5 xs class col-12 col-md-4 md 768px 12 md 768px 4 col col-md-4 md 768px 4 lg xl 4 col-12 78

5 <div class='col-12 col-md-8'> md 768px div <div class='container-fluid'> <div class='row'> <div class='col-12 col-md-4'>a</div> <div class='col-12 col-md-8'>b</div> </div> </div> 8.3 md 768px md 768px

6 8 8.4 Bootstrap container row column grid class container container-fluid fluid container container-fluid max-width max-width sm 576px md 768px md 768px lg 992px lg 992px xl 1,200px xl 1,200px 540px 720px 960px 1,140px max-width 8.5 HTML row class row 80

7 8.5-15px 15px 15px CSS class plan-items app/views/plan_items/index.html.erb 1 - <div class='container-fluid'> 1 + <div class='container-fluid plan-items'> SCSS plan_items.scss app/assets/stylesheets/plan_items.scss (New) 1 div.plan-items { 2 div.row { 3 margin-bottom 0.5rem; 4 background-color #ddd; 5 } 6 div.rowlast-child { 7 margin-bottom 0; 8 } 9 } 81

8 8 0.5rem 8px #ddd 6 CSS div.rowlast-child last-child pseudo-class 0.5rem 0 PC PC 82

8.6 8.5 8.5 8.6 0.5rem app/assets/stylesheets/plan_items.scss 1 div.

9 rem app/assets/stylesheets/plan_items.scss 1 div.plan-items { 2 div.row { 3 + padding-top 0.5rem; 4 + padding-bottom 0.5rem; 5 margin-bottom 0.5rem; 83

10 8 PC PC

11 span class span HTML app/views/plan_items/index.html.erb 4 <div class='col-12 col-md-4'> 5 - <%= item.name %> 5 + <span class='plan-item-name'><%= item.name %></span> 6 </div> 7 <div class='col-12 col-md-8'> 8 - <%= item.description %> 8 + <span class='plan-item-description'><%= item.description %></span> 9 </div> plan_items.scss app/assets/stylesheets/plan_items.scss 5 margin-bottom 0.5rem; 6 background-color #ddd; 7 + span.plan-item-name { 8 + font-weight bold; 9 + } 10 + span.plan-item-description { 11 + font-size 0.75rem; 12 + } 13 } font-weight CSS bold 85

12 8 font-weight PC PC 86

13 PicoPlanner db/seeds.rb 17 item = PlanItem.new 18 item.name = ' ' 19 - item.description = ' ' 19 + item.description = " \n " 20 item.save! \ n Ctrl-C PicoPlanner 87

14 8 $ rails dbreset rails s PicoPlanner PC HTML <br> plan_items#index app/views/plan_items/index.html.erb 7 <div class='col-12 col-md-8'> 8 - <span class='plan-item-description'><%= item.description %></span> 8 + <span class='plan-item-description'> 9 + <% item.description.split("\n").each do line %> 10 + <%= line %><br> 88

$a = s.split(';') a [ 'abc', 'def', 'ghi' ] "\n" <br> 8.11 8.$

15 <% end %> 12 + </span> 13 </div> split s = 'abc;def;ghi' a = s.split(';') a [ 'abc', 'def', 'ghi' ] "\n" <br> PC 89

16 (2) 23 - <div class="col-12 col-md-4"> </div> 23 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> HTML bg-info #17

16 (2) 23 - <div class=col-12 col-md-4> </div> 23 + <div class=col-12 col-md-4 bg-info text-white text-md-right> </div> HTML bg-info #17 16 (2) Elixir/Phoenix 16.1 web/templates/plan_items/show.html.eex 3 - 3 + 7 -