bootstrap-demo/responsive.html at master · joniburn/bootstrap-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap入門</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/jquery-1.11.1.min.js" defer></script>
  <script src="js/bootstrap.min.js" defer></script>

  <style>
    pre {
      font-size: large;
    }
  </style>
</head>
<!-- <body> -->
<body style="padding-top: 50px;">

  <!-- ページ上部のナビゲーション -->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">

        <!-- ページ幅が狭い場合の折りたたみメニューボタン -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <!-- 一番左上のタイトル文字列 -->
        <a href="#" class="navbar-brand">Bootstrap入門</a>
      </div>

      <!-- ナビゲーション -->
      <div class="collapse navbar-collapse" id="collapse-navbar">
        <ul class="nav navbar-nav">
          <li class=""      ><a href="index.html"        >Overview</a></li>
          <li class=""      ><a href="style.html"        >Style</a></li>
          <li class=""      ><a href="ui-components.html">UI Components</a></li>
          <li class="active"><a href="#"                 >Responsive</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- タイトル -->
  <div id="title" class="jumbotron">
    <div class="container">
      <div class="col-xs-12">
        <h1>Responsive</h1>
        <h3>レスポンシブデザイン</h3>
      </div>
    </div>
  </div>
  <div>&nbsp;</div><div>&nbsp;</div>

  <div class="container">
  <div class="row">
  <div class="col-xs-12">

  <div id="what-is-responsive">
    <h2>レスポンシブデザインとは</h2>
    <h3>
    <ul>
      <li>画面の大きさに応じてレイアウトを変える<br>&nbsp;
      <li>モバイルの場合はリダイレクトする、ではなく&hellip;<br>単一のHTMLで実現する。
    </ul>
    </h3>
  </div>
  <div>&nbsp;</div><div>&nbsp;</div>

  <div id="by-bootstrap">
    <h2>Bootstrapを使うと</h2>
    <h3>
    <ul>
      <li>レスポンシブにするためのクラス<br>&nbsp;
      <li>CSSを複数用意しなくても、HTMLだけでレスポンシブにできる。
    </ul>
    </h3>
  </div>
  <div>&nbsp;</div><div>&nbsp;</div>

  <div id="grid">
    <h2>段組み</h2>
    <h3>
    <ul>
      <li>Bootstrapでは、段組みを基本としたレイアウトを行う<br>&nbsp;
      <li>画面サイズを4種類に分け、それぞれ段組みを指定
    </ul>
    </h3>

    <table class="table table-bordered">
      <tr>
        <th>
        <th>xs (Extra Small)
        <th>sm (Small)
        <th>md (Medium)
        <th>lg (Large)
      </tr>
      <tr>
        <th>画面幅
        <td>～767px
        <td>768px ～ 991px
        <td>992px ～ 1199px
        <td>1200px ～
      </tr>
    </table>

    <h3>
    <ul>
      <li>段組みは、画面幅を12とした相対サイズで指定 (例: 3:9の2段組、4:4:4の3段組)
    </ul>
    </h3>
  <div>&nbsp;</div><div>&nbsp;</div>

    <h3>例1: xsでは縦に並べる。それより大きい場合は横に並べる。</h3>
    <pre>&lt;div class="row"&gt;
  <span class="text-info">&lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
    &hellip;
  &lt;/div&gt;</span>
  <span class="text-warning">&lt;div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
    &hellip;
  &lt;/div&gt;</span>
&lt;/div&gt;</pre>
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bg-info text-center">
        <br><br><br>1<br><br><br>&nbsp;
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bg-warning text-center">
        <br><br><br>2<br><br><br>&nbsp;
      </div>
    </div>

    <h3>例2: sm以上の場合、目次を表示する</h3>
    <pre>&lt;div class="row"&gt;
  <span class="text-info">&lt;div class="col-xs-12 col-sm-5 col-md-5 col-lg-5"&gt;
    &hellip;
  &lt;/div&gt;</span>
  <span class="text-warning">&lt;div class="col-xs-12 col-sm-5 col-md-5 col-lg-5"&gt;
    &hellip;
  &lt;/div&gt;</span>
  <span class="text-success">&lt;div class="hidden-xs col-sm-2 col-md-2 col-lg-2"&gt;
    目次
    &hellip;
  &lt;/div&gt;</span>
&lt;/div&gt;</pre>
    <div class="row">
      <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 bg-info text-center">
        <br><br><br>1<br><br><br>&nbsp;
      </div>
      <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 bg-warning text-center">
        <br><br><br>2<br><br><br>&nbsp;
      </div>
      <div class="hidden-xs col-sm-2 col-md-2 col-lg-2 bg-success">
        目次
        <ul>
          <li>aaa
          <li>bbb
          <li>&hellip;
        </ul>
      </div>
    </div>

  </div>
  <div>&nbsp;</div><div>&nbsp;</div>

  <div id="end">
    <h2>まとめ</h2>
    <h3>
    Bootstrapでは、
    <ul>
      <li>CSSをゴリゴリ書かなくてもカッコいいデザインができる<br>&nbsp;
      <li>単一のHTMLで様々な画面サイズに対応するレスポンシブデザインができる
    </ul>
    </h3>
  <div>&nbsp;</div><div>&nbsp;</div>

  <h2 class="pull-right">ご清聴ありがとうございました</h2>

  </div> <!-- .col-xs-12 -->
  </div> <!-- .row -->
  </div> <!-- .container -->
</body>
</html>
<!-- Local variables: -->
<!--   indent-tabs-mode: nil -->
<!-- End:-->