More than 5 years have passed since last update.

bootstrap

作業ログ

Posted at 2018-11-18

基本構成


container 箱
 row　　　　　　　　　　　　列
   col　　　　　　　　一要素

例）


<div caonatiner ="container">
  <div class="row">
    <div class="col">1行目</div>
    <div class="col">2行目</div>
    <div class="col">3行目</div>
  </div>
  <div class="row">
    <dvi class="col">4行目</dvi>
    <dvi class="col">5行目</dvi>
    <dvi class="col">4行目</dvi>
  </div>
</div>

レスポンシブ


col-sm →　スマホ
col-md　→　タブレット
col-lg　→　PC

動作
　横列が縦列になる

<div caonatiner ="container">
  <div class="row">
    <div class="col-sm">1行目</div>
    <div class="col-sm">2行目</div>
    <div class="col-sm">3行目</div>
  </div>
  <div class="row">
    <dvi class="col">4行目</dvi>
    <dvi class="col">5行目</dvi>
    <dvi class="col">4行目</dvi>
  </div>
</div>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up