bootstrap-honoka-rails 3.3.7.5 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +23 -94
  3. data/Rakefile +17 -39
  4. data/assets/stylesheets/_honoka.scss +5 -0
  5. data/assets/stylesheets/_nico.scss +5 -0
  6. data/assets/stylesheets/_umi.scss +5 -0
  7. data/assets/stylesheets/honoka/_honoka.scss +25 -36
  8. data/assets/stylesheets/honoka/_mixins.scss +1 -60
  9. data/assets/stylesheets/honoka/_override.scss +35 -63
  10. data/assets/stylesheets/honoka/_variables.scss +729 -710
  11. data/assets/stylesheets/nico/_honoka.scss +25 -36
  12. data/assets/stylesheets/nico/_mixins.scss +1 -60
  13. data/assets/stylesheets/nico/_override.scss +66 -68
  14. data/assets/stylesheets/nico/_variables.scss +730 -710
  15. data/assets/stylesheets/umi/_bootswatch.scss +193 -0
  16. data/assets/stylesheets/umi/_honoka.scss +28 -36
  17. data/assets/stylesheets/umi/_mixins.scss +1 -60
  18. data/assets/stylesheets/umi/_override.scss +35 -63
  19. data/assets/stylesheets/umi/_variables.scss +730 -710
  20. data/lib/bootstrap/honoka/rails.rb +0 -5
  21. data/lib/bootstrap/honoka/rails/engine.rb +4 -2
  22. data/lib/bootstrap/honoka/rails/version.rb +1 -5
  23. data/test/dummy/app/assets/javascripts/application.js +2 -2
  24. data/test/dummy/app/assets/stylesheets/application.css +1 -0
  25. data/test/dummy/app/assets/stylesheets/honoka.css +0 -1
  26. data/test/dummy/app/assets/stylesheets/nico.css +0 -1
  27. data/test/dummy/app/assets/stylesheets/umi.css +0 -1
  28. data/test/dummy/app/controllers/pages_controller.rb +6 -4
  29. data/test/dummy/app/views/layouts/application.html.erb +1 -1
  30. data/test/dummy/app/views/pages/honoka.html.erb +1108 -682
  31. data/test/dummy/app/views/pages/nico.html.erb +994 -685
  32. data/test/dummy/app/views/pages/umi.html.erb +993 -684
  33. data/test/dummy/config/application.rb +4 -1
  34. data/test/dummy/config/environments/development.rb +24 -0
  35. data/test/dummy/config/environments/production.rb +8 -4
  36. data/test/dummy/config/initializers/assets.rb +1 -17
  37. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  38. data/test/dummy/config/initializers/inflections.rb +16 -0
  39. data/test/dummy/config/initializers/mime_types.rb +4 -0
  40. data/test/dummy/config/routes.rb +3 -3
  41. data/test/honoka_test.rb +4 -41
  42. data/test/test_helper.rb +5 -49
  43. metadata +16 -117
  44. data/VERSIONS.md +0 -10
  45. data/assets/stylesheets/_rin.scss +0 -3
  46. data/assets/stylesheets/honoka/_font.scss +0 -58
  47. data/assets/stylesheets/nico/_font.scss +0 -58
  48. data/assets/stylesheets/rin/_font.scss +0 -58
  49. data/assets/stylesheets/rin/_honoka.scss +0 -60
  50. data/assets/stylesheets/rin/_mixins.scss +0 -60
  51. data/assets/stylesheets/rin/_override.scss +0 -372
  52. data/assets/stylesheets/rin/_variables.scss +0 -877
  53. data/assets/stylesheets/umi/_font.scss +0 -58
  54. data/test/dummy/app/assets/stylesheets/rin.css +0 -4
  55. data/test/dummy/app/views/pages/rin.html.erb +0 -1278
  56. data/test/dummy/bin/rails +0 -4
  57. data/test/dummy/production_key_generate.sh +0 -4
  58. data/test/dummy/public/favicon.ico +0 -0
  59. data/test/support/dummy_integration.rb +0 -57
  60. data/test/support/dummy_reporters.rb +0 -61
data/test/dummy/app/views/pages/umi.html.erb CHANGED
@@ -1,18 +1,13 @@
1
1
  <!-- テスト用サイト:動作が一致しているか確認する為に下記サイトを完全コピー
2
- コピー元 : https://github.com/ysakasin/Umi/blob/v3/docs/bootstrap-ja.html
3
- 下記テスト用のサイトの著作権は https://github.com/ysakasin/Umi/blob/v3/docs/bootstrap-ja.html に帰属します。
2
+ コピー元 : https://ysakasin.github.io/Umi/bootstrap-ja.html
3
+ 下記テスト用のサイトの著作権は https://ysakasin.github.io/Umi/bootstrap-ja.html に帰属します。
4
4
  -->
5
5
  <style type="text/css">
6
- body {
7
- padding-top: 80px;
6
+ .bs-component+.bs-component {
7
+ margin-top: 1rem;
8
8
  }
9
9
 
10
10
  @media (min-width: 768px) {
11
- #banner {
12
- min-height: 300px;
13
- border-bottom: none;
14
- }
15
-
16
11
  .bs-docs-section {
17
12
  margin-top: 8em;
18
13
  }
@@ -21,12 +16,18 @@
21
16
  position: relative;
22
17
  }
23
18
 
19
+ .bs-docs-section .page-header h1 {
20
+ padding: .5rem 0;
21
+ margin-bottom: 2rem;
22
+ border-bottom: 1px solid #eee;
23
+ }
24
+
24
25
  .bs-component .modal {
25
26
  position: relative;
26
27
  top: auto;
27
28
  right: auto;
28
- left: auto;
29
29
  bottom: auto;
30
+ left: auto;
30
31
  z-index: 1;
31
32
  display: block;
32
33
  }
@@ -53,175 +54,191 @@
53
54
  </style>
54
55
 
55
56
  <header>
56
- <div class="navbar navbar-default navbar-fixed-top">
57
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
57
58
  <div class="container">
58
- <div class="navbar-header">
59
- <a href="https://nkmr6194.github.io/Umi/" class="navbar-brand">Umi</a>
60
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
61
- <span class="icon-bar"></span>
62
- <span class="icon-bar"></span>
63
- <span class="icon-bar"></span>
64
- </button>
65
- </div>
66
- <div class="navbar-collapse collapse" id="navbar-main">
67
- <ul class="nav navbar-nav">
68
- <li><a href="https://nkmr6194.github.io/Umi/">Top</a></li>
69
- <li class="dropdown active">
70
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Demo <span
71
- class="caret"></span></a>
72
- <ul class="dropdown-menu" role="menu">
73
- <li><a href="./bootstrap-ja.html">Japanese Page</a></li>
74
- <li><a href="./bootstrap.html">English Page</a></li>
75
- </ul>
59
+ <a class="navbar-brand" href="./">
60
+ <img src="assets/img/brand.png" width="30" height="30" class="d-inline-block align-top mr-1" alt="Umi">
61
+ Umi
62
+ </a>
63
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
64
+ aria-expanded="false" aria-label="Toggle navigation">
65
+ <span class="navbar-toggler-icon"></span>
66
+ </button>
67
+
68
+ <div class="collapse navbar-collapse" id="navbar">
69
+ <ul class="navbar-nav mr-auto">
70
+ <li class="nav-item">
71
+ <a class="nav-link" href="./">Top <span class="sr-only">(current)</span></a>
72
+ </li>
73
+ <li class="nav-item dropdown active">
74
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
75
+ aria-haspopup="true" aria-expanded="false">
76
+ Live demo
77
+ </a>
78
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
79
+ <a class="dropdown-item" href="./bootstrap-ja.html">Japanese Page</a>
80
+ <a class="dropdown-item" href="./bootstrap.html">English Page</a>
81
+ </div>
82
+ </li>
83
+ <li class="nav-item">
84
+ <a class="nav-link" href="http://github.com/ysakasin/Umi/releases">Download</a>
85
+ </li>
86
+ <li class="nav-item">
87
+ <a class="nav-link" href="http://github.com/windyakin/Honoka/wiki">Wiki</a>
76
88
  </li>
77
- <li><a href="//github.com/NKMR6194/Umi/releases">Download</a></li>
78
- <li><a href="//github.com/windyakin/Honoka/wiki">Wiki</a></li>
79
89
  </ul>
80
90
  </div>
81
91
  </div>
82
- </div>
92
+ </nav>
83
93
  </header>
84
94
 
85
95
  <div class="container">
86
96
 
87
97
  <div class="page-header" id="banner">
88
- <div class="row">
89
- <div class="col-lg-8 col-md-7 col-sm-6">
90
- <h1>Umi</h1>
98
+ <div class="row my-4">
99
+ <div class="col-12">
100
+ <h1 class="display-3">Umi</h1>
91
101
  <p class="lead">日本語も美しく表示できるBootstrapテーマ</p>
92
- </div>
93
- <div class="col-lg-4 col-md-5 col-sm-6">
94
- <aside class="panel panel-default">
95
- <div class="panel-heading">
96
- <h4 class="panel-title">游ゴシックの有効・無効切り替え</h4>
97
- </div>
98
- <div class="panel-body">
99
- <p>v3.3.5から<code>&lt;body&gt;</code>に<code>.no-thank-yu</code>を指定することで游ゴシックを使わないようにすることができるようになりました。</p>
100
- <p id="anti-yu-gothic-message">現在デモページは游ゴシックの指定が<span class="text-primary">有効</span>になっています。</p>
101
- <div><button id="anti-yu-gothic-button" class="btn btn-danger btn-block">游ゴシックを無効にする</button></div>
102
- </div>
103
- </aside>
102
+ <hr>
103
+ <p>このページでは Bootstrap テーマ Umi のサンプルを見ることができます。</p>
104
104
  </div>
105
105
  </div>
106
106
  </div>
107
107
 
108
108
  <!-- Navbar
109
109
  ================================================== -->
110
- <div class="bs-docs-section clearfix">
110
+ <section class="bs-docs-section clearfix">
111
111
  <div class="row">
112
112
  <div class="col-lg-12">
113
113
  <div class="page-header">
114
- <h1 id="navbar">Navbar</h1>
114
+ <h1 id="navbars">Navbars</h1>
115
115
  </div>
116
116
 
117
117
  <div class="bs-component">
118
- <nav class="navbar navbar-default">
119
- <div class="container-fluid">
120
- <div class="navbar-header">
121
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
122
- data-target="#bs-example-navbar-collapse-1">
123
- <span class="sr-only">Toggle navigation</span>
124
- <span class="icon-bar"></span>
125
- <span class="icon-bar"></span>
126
- <span class="icon-bar"></span>
127
- </button>
128
- <a class="navbar-brand" href="#">Brand</a>
129
- </div>
130
-
131
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
132
- <ul class="nav navbar-nav">
133
- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
134
- <li><a href="#">Link</a></li>
135
- <li class="dropdown">
136
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
137
- aria-expanded="false">Dropdown <span class="caret"></span></a>
138
- <ul class="dropdown-menu" role="menu">
139
- <li><a href="#">高坂 穂乃果</a></li>
140
- <li><a href="#">南 ことり</a></li>
141
- <li><a href="#">園田 海未</a></li>
142
- <li class="divider"></li>
143
- <li><a href="#">小泉 花陽</a></li>
144
- <li><a href="#">星空 凛</a></li>
145
- <li><a href="#">西木野 真姫</a></li>
146
- <li class="divider"></li>
147
- <li><a href="#">矢澤 にこ</a></li>
148
- <li><a href="#">絢瀬 絵里</a></li>
149
- <li><a href="#">東條 希</a></li>
150
- </ul>
151
- </li>
152
- </ul>
153
- <form class="navbar-form navbar-left" role="search">
154
- <div class="form-group">
155
- <input type="text" class="form-control" placeholder="Search">
118
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
119
+ <a class="navbar-brand" href="#">サイト</a>
120
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
121
+ aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
122
+ <span class="navbar-toggler-icon"></span>
123
+ </button>
124
+
125
+ <div class="collapse navbar-collapse" id="navbarColor01">
126
+ <ul class="navbar-nav mr-auto">
127
+ <li class="nav-item active">
128
+ <a class="nav-link" href="#">トップ <span class="sr-only">(current)</span></a>
129
+ </li>
130
+ <li class="nav-item">
131
+ <a class="nav-link" href="#">リンク</a>
132
+ </li>
133
+ <li class="nav-item">
134
+ <a class="nav-link" href="#">リンク</a>
135
+ </li>
136
+ <li class="nav-item dropdown">
137
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
138
+ aria-haspopup="true" aria-expanded="false">
139
+ サブメニュー
140
+ </a>
141
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
142
+ <a class="dropdown-item" href="#">高坂穂乃果</a>
143
+ <a class="dropdown-item" href="#">南ことり</a>
144
+ <a class="dropdown-item" href="#">園田海未</a>
156
145
  </div>
157
- <button type="submit" class="btn btn-default">検索</button>
158
- </form>
159
- <ul class="nav navbar-nav navbar-right">
160
- <li><a href="#">Link</a></li>
161
- </ul>
162
- </div>
146
+ </li>
147
+ </ul>
148
+ <form class="form-inline my-2 my-lg-0">
149
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
150
+ <button class="btn btn-secondary my-2 my-sm-0" type="submit">検索</button>
151
+ </form>
163
152
  </div>
164
153
  </nav>
165
154
  </div>
166
155
 
167
156
  <div class="bs-component">
168
- <nav class="navbar navbar-inverse">
169
- <div class="container-fluid">
170
- <div class="navbar-header">
171
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
172
- data-target="#bs-example-navbar-collapse-2">
173
- <span class="sr-only">Toggle navigation</span>
174
- <span class="icon-bar"></span>
175
- <span class="icon-bar"></span>
176
- <span class="icon-bar"></span>
177
- </button>
178
- <a class="navbar-brand" href="#">Brand</a>
179
- </div>
157
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
158
+ <a class="navbar-brand" href="#">サイト</a>
159
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02"
160
+ aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
161
+ <span class="navbar-toggler-icon"></span>
162
+ </button>
163
+
164
+ <div class="collapse navbar-collapse" id="navbarColor02">
165
+ <ul class="navbar-nav mr-auto">
166
+ <li class="nav-item active">
167
+ <a class="nav-link" href="#">トップ <span class="sr-only">(current)</span></a>
168
+ </li>
169
+ <li class="nav-item">
170
+ <a class="nav-link" href="#">リンク</a>
171
+ </li>
172
+ <li class="nav-item">
173
+ <a class="nav-link" href="#">リンク</a>
174
+ </li>
175
+ <li class="nav-item dropdown">
176
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
177
+ aria-haspopup="true" aria-expanded="false">
178
+ サブメニュー
179
+ </a>
180
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
181
+ <a class="dropdown-item" href="#">小泉花陽</a>
182
+ <a class="dropdown-item" href="#">星空凛</a>
183
+ <a class="dropdown-item" href="#">西木野真姫</a>
184
+ </div>
185
+ </li>
186
+ </ul>
187
+ <form class="form-inline my-2 my-lg-0">
188
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
189
+ <button class="btn btn-secondary my-2 my-sm-0" type="submit">検索</button>
190
+ </form>
191
+ </div>
192
+ </nav>
193
+ </div>
180
194
 
181
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
182
- <ul class="nav navbar-nav">
183
- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
184
- <li><a href="#">Link</a></li>
185
- <li class="dropdown">
186
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
187
- aria-expanded="false">Dropdown <span class="caret"></span></a>
188
- <ul class="dropdown-menu" role="menu">
189
- <li><a href="#">高坂 穂乃果</a></li>
190
- <li><a href="#">南 ことり</a></li>
191
- <li><a href="#">園田 海未</a></li>
192
- <li class="divider"></li>
193
- <li><a href="#">小泉 花陽</a></li>
194
- <li><a href="#">星空 凛</a></li>
195
- <li><a href="#">西木野 真姫</a></li>
196
- <li class="divider"></li>
197
- <li><a href="#">矢澤 にこ</a></li>
198
- <li><a href="#">絢瀬 絵里</a></li>
199
- <li><a href="#">東條 希</a></li>
200
- </ul>
201
- </li>
202
- </ul>
203
- <form class="navbar-form navbar-left" role="search">
204
- <div class="form-group">
205
- <input type="text" class="form-control" placeholder="Search">
195
+ <div class="bs-component">
196
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
197
+ <a class="navbar-brand" href="#">サイト</a>
198
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03"
199
+ aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
200
+ <span class="navbar-toggler-icon"></span>
201
+ </button>
202
+
203
+ <div class="collapse navbar-collapse" id="navbarColor03">
204
+ <ul class="navbar-nav mr-auto">
205
+ <li class="nav-item active">
206
+ <a class="nav-link" href="#">トップ <span class="sr-only">(current)</span></a>
207
+ </li>
208
+ <li class="nav-item">
209
+ <a class="nav-link" href="#">リンク</a>
210
+ </li>
211
+ <li class="nav-item">
212
+ <a class="nav-link" href="#">リンク</a>
213
+ </li>
214
+ <li class="nav-item dropdown">
215
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
216
+ aria-haspopup="true" aria-expanded="false">
217
+ サブメニュー
218
+ </a>
219
+ <div class="dropdown-menu" aria-labelledby="navbarDropdown">
220
+ <a class="dropdown-item" href="#">矢澤にこ</a>
221
+ <a class="dropdown-item" href="#">東條希</a>
222
+ <a class="dropdown-item" href="#">絢瀬絵里</a>
206
223
  </div>
207
- <button type="submit" class="btn btn-default">検索</button>
208
- </form>
209
- <ul class="nav navbar-nav navbar-right">
210
- <li><a href="#">Link</a></li>
211
- </ul>
212
- </div>
224
+ </li>
225
+ </ul>
226
+ <form class="form-inline my-2 my-lg-0">
227
+ <input class="form-control mr-sm-2" type="text" placeholder="Search">
228
+ <button class="btn btn-secondary my-2 my-sm-0" type="submit">検索</button>
229
+ </form>
213
230
  </div>
214
231
  </nav>
215
- </div><!-- /example -->
232
+ </div>
216
233
 
217
234
  </div>
218
235
  </div>
219
- </div>
236
+ </section>
220
237
 
221
238
 
222
239
  <!-- Buttons
223
240
  ================================================== -->
224
- <div class="bs-docs-section">
241
+ <section class="bs-docs-section">
225
242
  <div class="page-header">
226
243
  <div class="row">
227
244
  <div class="col-lg-12">
@@ -231,168 +248,177 @@
231
248
  </div>
232
249
 
233
250
  <div class="row">
234
- <div class="col-lg-6">
251
+ <div class="col-lg-7">
235
252
 
236
253
  <p class="bs-component">
237
- <a href="#" class="btn btn-default">Default</a>
238
- <a href="#" class="btn btn-primary">Primary</a>
239
- <a href="#" class="btn btn-success">Success</a>
240
- <a href="#" class="btn btn-info">Info</a>
241
- <a href="#" class="btn btn-warning">Warning</a>
242
- <a href="#" class="btn btn-danger">Danger</a>
243
- <a href="#" class="btn btn-link">Link</a>
254
+ <button type="button" class="btn btn-primary">Primary</button>
255
+ <button type="button" class="btn btn-secondary">Secondary</button>
256
+ <button type="button" class="btn btn-success">Success</button>
257
+ <button type="button" class="btn btn-info">Info</button>
258
+ <button type="button" class="btn btn-warning">Warning</button>
259
+ <button type="button" class="btn btn-danger">Danger</button>
260
+ <button type="button" class="btn btn-link">Link</button>
244
261
  </p>
245
262
 
246
263
  <p class="bs-component">
247
- <a href="#" class="btn btn-default disabled">Default</a>
248
- <a href="#" class="btn btn-primary disabled">Primary</a>
249
- <a href="#" class="btn btn-success disabled">Success</a>
250
- <a href="#" class="btn btn-info disabled">Info</a>
251
- <a href="#" class="btn btn-warning disabled">Warning</a>
252
- <a href="#" class="btn btn-danger disabled">Danger</a>
253
- <a href="#" class="btn btn-link disabled">Link</a>
264
+ <button type="button" class="btn btn-primary disabled">Primary</button>
265
+ <button type="button" class="btn btn-secondary disabled">Secondary</button>
266
+ <button type="button" class="btn btn-success disabled">Success</button>
267
+ <button type="button" class="btn btn-info disabled">Info</button>
268
+ <button type="button" class="btn btn-warning disabled">Warning</button>
269
+ <button type="button" class="btn btn-danger disabled">Danger</button>
270
+ <button type="button" class="btn btn-link disabled">Link</button>
254
271
  </p>
255
272
 
273
+ <p class="bs-component">
274
+ <button type="button" class="btn btn-outline-primary">Primary</button>
275
+ <button type="button" class="btn btn-outline-secondary">Secondary</button>
276
+ <button type="button" class="btn btn-outline-success">Success</button>
277
+ <button type="button" class="btn btn-outline-info">Info</button>
278
+ <button type="button" class="btn btn-outline-warning">Warning</button>
279
+ <button type="button" class="btn btn-outline-danger">Danger</button>
280
+ </p>
256
281
 
257
- <div style="margin-bottom: 15px;">
258
- <div class="btn-toolbar bs-component" style="margin: 0;">
259
- <div class="btn-group">
260
- <a href="#" class="btn btn-default">Default</a>
261
- <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
262
- <ul class="dropdown-menu">
263
- <li><a href="#">Action</a></li>
264
- <li><a href="#">Another action</a></li>
265
- <li><a href="#">Something else here</a></li>
266
- <li class="divider"></li>
267
- <li><a href="#">Separated link</a></li>
268
- </ul>
269
- </div>
270
-
271
- <div class="btn-group">
272
- <a href="#" class="btn btn-primary">Primary</a>
273
- <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
274
- <ul class="dropdown-menu">
275
- <li><a href="#">Action</a></li>
276
- <li><a href="#">Another action</a></li>
277
- <li><a href="#">Something else here</a></li>
278
- <li class="divider"></li>
279
- <li><a href="#">Separated link</a></li>
280
- </ul>
282
+ <div class="bs-component">
283
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
284
+ <button type="button" class="btn btn-primary">Primary</button>
285
+ <div class="btn-group" role="group">
286
+ <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
287
+ aria-haspopup="true" aria-expanded="false"></button>
288
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
289
+ <a class="dropdown-item" href="#">Dropdown link</a>
290
+ <a class="dropdown-item" href="#">Dropdown link</a>
291
+ </div>
281
292
  </div>
293
+ </div>
282
294
 
283
- <div class="btn-group">
284
- <a href="#" class="btn btn-success">Success</a>
285
- <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
286
- <ul class="dropdown-menu">
287
- <li><a href="#">Action</a></li>
288
- <li><a href="#">Another action</a></li>
289
- <li><a href="#">Something else here</a></li>
290
- <li class="divider"></li>
291
- <li><a href="#">Separated link</a></li>
292
- </ul>
295
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
296
+ <button type="button" class="btn btn-success">Success</button>
297
+ <div class="btn-group" role="group">
298
+ <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
299
+ aria-haspopup="true" aria-expanded="false"></button>
300
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
301
+ <a class="dropdown-item" href="#">Dropdown link</a>
302
+ <a class="dropdown-item" href="#">Dropdown link</a>
303
+ </div>
293
304
  </div>
305
+ </div>
294
306
 
295
- <div class="btn-group">
296
- <a href="#" class="btn btn-info">Info</a>
297
- <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
298
- <ul class="dropdown-menu">
299
- <li><a href="#">Action</a></li>
300
- <li><a href="#">Another action</a></li>
301
- <li><a href="#">Something else here</a></li>
302
- <li class="divider"></li>
303
- <li><a href="#">Separated link</a></li>
304
- </ul>
307
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
308
+ <button type="button" class="btn btn-info">Info</button>
309
+ <div class="btn-group" role="group">
310
+ <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
311
+ aria-haspopup="true" aria-expanded="false"></button>
312
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
313
+ <a class="dropdown-item" href="#">Dropdown link</a>
314
+ <a class="dropdown-item" href="#">Dropdown link</a>
315
+ </div>
305
316
  </div>
317
+ </div>
306
318
 
307
- <div class="btn-group">
308
- <a href="#" class="btn btn-warning">Warning</a>
309
- <a href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
310
- <ul class="dropdown-menu">
311
- <li><a href="#">Action</a></li>
312
- <li><a href="#">Another action</a></li>
313
- <li><a href="#">Something else here</a></li>
314
- <li class="divider"></li>
315
- <li><a href="#">Separated link</a></li>
316
- </ul>
319
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
320
+ <button type="button" class="btn btn-danger">Danger</button>
321
+ <div class="btn-group" role="group">
322
+ <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
323
+ aria-haspopup="true" aria-expanded="false"></button>
324
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
325
+ <a class="dropdown-item" href="#">Dropdown link</a>
326
+ <a class="dropdown-item" href="#">Dropdown link</a>
327
+ </div>
317
328
  </div>
318
329
  </div>
319
330
  </div>
320
331
 
321
- <p class="bs-component">
322
- <a href="#" class="btn btn-primary btn-lg">Large button</a>
323
- <a href="#" class="btn btn-primary">Default button</a>
324
- <a href="#" class="btn btn-primary btn-sm">Small button</a>
325
- <a href="#" class="btn btn-primary btn-xs">Mini button</a>
326
- </p>
332
+ <div class="bs-component">
333
+ <button type="button" class="btn btn-primary btn-lg">Large button</button>
334
+ <button type="button" class="btn btn-primary">Default button</button>
335
+ <button type="button" class="btn btn-primary btn-sm">Small button</button>
336
+ </div>
327
337
 
328
338
  </div>
329
- <div class="col-lg-6">
339
+ <div class="col-lg-5">
330
340
 
331
341
  <p class="bs-component">
332
- <a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>
342
+ <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
333
343
  </p>
334
344
 
335
-
336
345
  <div class="bs-component" style="margin-bottom: 15px;">
337
- <div class="btn-group btn-group-justified">
338
- <a href="#" class="btn btn-default">Left</a>
339
- <a href="#" class="btn btn-default">Middle</a>
340
- <a href="#" class="btn btn-default">Right</a>
346
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
347
+ <label class="btn btn-primary active">
348
+ <input type="checkbox" checked autocomplete="off"> Active
349
+ </label>
350
+ <label class="btn btn-primary">
351
+ <input type="checkbox" autocomplete="off"> Check
352
+ </label>
353
+ <label class="btn btn-primary">
354
+ <input type="checkbox" autocomplete="off"> Check
355
+ </label>
341
356
  </div>
342
357
  </div>
343
358
 
344
359
  <div class="bs-component" style="margin-bottom: 15px;">
345
- <div class="btn-toolbar">
346
- <div class="btn-group">
347
- <a href="#" class="btn btn-default">1</a>
348
- <a href="#" class="btn btn-default">2</a>
349
- <a href="#" class="btn btn-default">3</a>
350
- <a href="#" class="btn btn-default">4</a>
351
- </div>
360
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
361
+ <label class="btn btn-primary active">
362
+ <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
363
+ </label>
364
+ <label class="btn btn-primary">
365
+ <input type="radio" name="options" id="option2" autocomplete="off"> Radio
366
+ </label>
367
+ <label class="btn btn-primary">
368
+ <input type="radio" name="options" id="option3" autocomplete="off"> Radio
369
+ </label>
370
+ </div>
371
+ </div>
352
372
 
353
- <div class="btn-group">
354
- <a href="#" class="btn btn-default">5</a>
355
- <a href="#" class="btn btn-default">6</a>
356
- <a href="#" class="btn btn-default">7</a>
357
- </div>
373
+ <div class="bs-component">
374
+ <div class="btn-group-vertical" data-toggle="buttons">
375
+ <button type="button" class="btn btn-primary">Button</button>
376
+ <button type="button" class="btn btn-primary">Button</button>
377
+ <button type="button" class="btn btn-primary">Button</button>
378
+ <button type="button" class="btn btn-primary">Button</button>
379
+ <button type="button" class="btn btn-primary">Button</button>
380
+ <button type="button" class="btn btn-primary">Button</button>
381
+ </div>
382
+ </div>
358
383
 
359
- <div class="btn-group">
360
- <a href="#" class="btn btn-default">8</a>
361
- <div class="btn-group">
362
- <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
363
- Dropdown
364
- <span class="caret"></span>
365
- </a>
366
- <ul class="dropdown-menu">
367
- <li><a href="#">Dropdown link</a></li>
368
- <li><a href="#">Dropdown link</a></li>
369
- <li><a href="#">Dropdown link</a></li>
370
- </ul>
371
- </div>
372
- </div>
384
+ <div class="bs-component" style="margin-bottom: 15px;">
385
+ <div class="btn-group" role="group" aria-label="Basic example">
386
+ <button type="button" class="btn btn-secondary">Left</button>
387
+ <button type="button" class="btn btn-secondary">Middle</button>
388
+ <button type="button" class="btn btn-secondary">Right</button>
373
389
  </div>
374
390
  </div>
375
391
 
376
- <div class="bs-component">
377
- <div class="btn-group-vertical">
378
- <a href="#" class="btn btn-default">Button</a>
379
- <a href="#" class="btn btn-default">Button</a>
380
- <a href="#" class="btn btn-default">Button</a>
381
- <a href="#" class="btn btn-default">Button</a>
392
+ <div class="bs-component" style="margin-bottom: 15px;">
393
+ <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
394
+ <div class="btn-group mr-2" role="group" aria-label="First group">
395
+ <button type="button" class="btn btn-secondary">1</button>
396
+ <button type="button" class="btn btn-secondary">2</button>
397
+ <button type="button" class="btn btn-secondary">3</button>
398
+ <button type="button" class="btn btn-secondary">4</button>
399
+ </div>
400
+ <div class="btn-group mr-2" role="group" aria-label="Second group">
401
+ <button type="button" class="btn btn-secondary">5</button>
402
+ <button type="button" class="btn btn-secondary">6</button>
403
+ <button type="button" class="btn btn-secondary">7</button>
404
+ </div>
405
+ <div class="btn-group" role="group" aria-label="Third group">
406
+ <button type="button" class="btn btn-secondary">8</button>
407
+ </div>
382
408
  </div>
383
409
  </div>
384
410
 
385
411
  </div>
386
412
  </div>
387
- </div>
413
+ </section>
388
414
 
389
415
  <!-- Typography
390
416
  ================================================== -->
391
- <div class="bs-docs-section">
417
+ <section class="bs-docs-section">
392
418
  <div class="row">
393
419
  <div class="col-lg-12">
394
420
  <div class="page-header">
395
- <h1 id="type">Typography</h1>
421
+ <h1 id="typography">Typography</h1>
396
422
  </div>
397
423
  </div>
398
424
  </div>
@@ -402,22 +428,26 @@
402
428
  <div class="row">
403
429
  <div class="col-lg-4">
404
430
  <div class="bs-component">
405
- <h1>見出し 1</h1>
406
- <h2>見出し 2</h2>
407
- <h3>見出し 3</h3>
408
- <h4>見出し 4</h4>
409
- <h5>見出し 5</h5>
410
- <h6>見出し 6</h6>
431
+ <h1>見出しTitle 1</h1>
432
+ <h2>見出しTitle 2</h2>
433
+ <h3>見出しTitle 3</h3>
434
+ <h4>見出しTitle 4</h4>
435
+ <h5>見出しTitle 5</h5>
436
+ <h6>見出しTitle 6</h6>
437
+ <h3>
438
+ 見出し
439
+ <small class="text-muted">サブテキスト</small>
440
+ </h3>
411
441
  <p class="lead">色は匂へど散りぬるを 我が世誰そ常ならむ。</p>
412
442
  </div>
413
443
  </div>
414
444
  <div class="col-lg-4">
415
445
  <div class="bs-component">
416
- <h2>Example body text</h2>
446
+ <h2>本文サンプル</h2>
417
447
  <p>グスコーブドリは、<a
418
448
  href="#">イーハトーヴ</a>の大きな森のなかに生まれました。おとうさんは、グスコーナドリという名高い木こりで、どんな大きな木でも、まるで赤ん坊を寝かしつけるようにわけなく切ってしまう人でした。</p>
419
449
  <p><small>テキストのこの行は、細字として扱われることを意味します。</small></p>
420
- <p>テキストの次のコードは、 <strong>太字のテキストとしてレンダリングされます</strong>。</p>
450
+ <p>テキストの次のコードは、<strong>太字のテキストとしてレンダリングされます</strong>。</p>
421
451
  <p>テキストの次のコードは、 <em>斜体のテキストとしてレンダリングされます</em>。</p>
422
452
  <p><abbr title="Nippon Telegraph and Telephone Corporation">NTT</abbr>の日本語名称は「日本電信電話」です。</p>
423
453
  </div>
@@ -445,32 +475,45 @@
445
475
  </div>
446
476
  </div>
447
477
  <div class="row">
448
- <div class="col-lg-6">
478
+ <div class="col-lg-4">
449
479
  <div class="bs-component">
450
- <blockquote>
451
- <p>
480
+ <blockquote class="blockquote">
481
+ <p class="mb-0">
452
482
  BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
453
483
  </p>
454
- <small>出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite></small>
484
+ <footer class="blockquote-footer">出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite>
485
+ </footer>
455
486
  </blockquote>
456
487
  </div>
457
488
  </div>
458
- <div class="col-lg-6">
489
+ <div class="col-lg-4">
490
+ <div class="bs-component">
491
+ <blockquote class="blockquote text-center">
492
+ <p class="mb-0">
493
+ BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
494
+ </p>
495
+ <footer class="blockquote-footer">出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite>
496
+ </footer>
497
+ </blockquote>
498
+ </div>
499
+ </div>
500
+ <div class="col-lg-4">
459
501
  <div class="bs-component">
460
- <blockquote class="pull-right">
461
- <p>
502
+ <blockquote class="blockquote text-right">
503
+ <p class="mb-0">
462
504
  BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
463
505
  </p>
464
- <small>出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite></small>
506
+ <footer class="blockquote-footer">出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite>
507
+ </footer>
465
508
  </blockquote>
466
509
  </div>
467
510
  </div>
468
511
  </div>
469
- </div>
512
+ </section>
470
513
 
471
514
  <!-- Tables
472
515
  ================================================== -->
473
- <div class="bs-docs-section">
516
+ <section class="bs-docs-section">
474
517
 
475
518
  <div class="row">
476
519
  <div class="col-lg-12">
@@ -479,68 +522,86 @@
479
522
  </div>
480
523
 
481
524
  <div class="bs-component">
482
- <table class="table table-striped table-hover ">
525
+ <table class="table table-hover">
483
526
  <thead>
484
527
  <tr>
485
- <th>#</th>
486
- <th>カラムのタイトル</th>
487
- <th>カラムのタイトル</th>
488
- <th>カラムのタイトル</th>
528
+ <th scope="col">Type</th>
529
+ <th scope="col">名前</th>
530
+ <th scope="col">誕生日</th>
531
+ <th scope="col">血液型</th>
489
532
  </tr>
490
533
  </thead>
491
534
  <tbody>
492
- <tr>
493
- <td>1</td>
494
- <td>カラムの内容</td>
495
- <td>カラムの内容</td>
496
- <td>カラムの内容</td>
535
+ <tr class="table-active">
536
+ <th scope="row">Active</th>
537
+ <td>高坂穂乃果</td>
538
+ <td>8月3日(獅子座)</td>
539
+ <td>O型</td>
497
540
  </tr>
498
541
  <tr>
499
- <td>2</td>
500
- <td>カラムの内容</td>
501
- <td>カラムの内容</td>
502
- <td>カラムの内容</td>
542
+ <th scope="row">Default</th>
543
+ <td>東條希</td>
544
+ <td>6月9日(双子座)</td>
545
+ <td>O型</td>
546
+ </tr>
547
+ <tr class="table-primary">
548
+ <th scope="row">Primary</th>
549
+ <td>園田海未</td>
550
+ <td>3月15日(魚座)</td>
551
+ <td>A型</td>
552
+ </tr>
553
+ <tr class="table-secondary">
554
+ <th scope="row">Secondary</th>
555
+ <td>南ことり</td>
556
+ <td>9月12日(乙女座)</td>
557
+ <td>O型</td>
503
558
  </tr>
504
- <tr class="info">
505
- <td>3</td>
506
- <td>カラムの内容</td>
507
- <td>カラムの内容</td>
508
- <td>カラムの内容</td>
559
+ <tr class="table-success">
560
+ <th scope="row">Success</th>
561
+ <td>小泉花陽</td>
562
+ <td>1月17日(山羊座)</td>
563
+ <td>B型</td>
509
564
  </tr>
510
- <tr class="success">
511
- <td>4</td>
512
- <td>カラムの内容</td>
513
- <td>カラムの内容</td>
514
- <td>カラムの内容</td>
565
+ <tr class="table-danger">
566
+ <th scope="row">Danger</th>
567
+ <td>西木野真姫</td>
568
+ <td>4月19日(牡羊座)</td>
569
+ <td>AB型</td>
515
570
  </tr>
516
- <tr class="danger">
517
- <td>5</td>
518
- <td>カラムの内容</td>
519
- <td>カラムの内容</td>
520
- <td>カラムの内容</td>
571
+ <tr class="table-warning">
572
+ <th scope="row">Warning</th>
573
+ <td>星空凛</td>
574
+ <td>11月1日(蠍座)</td>
575
+ <td>A型</td>
521
576
  </tr>
522
- <tr class="warning">
523
- <td>6</td>
524
- <td>カラムの内容</td>
525
- <td>カラムの内容</td>
526
- <td>カラムの内容</td>
577
+ <tr class="table-info">
578
+ <th scope="row">Info</th>
579
+ <td>絢瀬絵里</td>
580
+ <td>10月21日(天秤座)</td>
581
+ <td>B型</td>
527
582
  </tr>
528
- <tr class="active">
529
- <td>7</td>
530
- <td>カラムの内容</td>
531
- <td>カラムの内容</td>
532
- <td>カラムの内容</td>
583
+ <tr class="table-light">
584
+ <th scope="row">Light</th>
585
+ <td>矢澤にこ</td>
586
+ <td>7月22日(蟹座)</td>
587
+ <td>A型</td>
588
+ </tr>
589
+ <tr class="table-dark">
590
+ <th scope="row">Dark</th>
591
+ <td>アルパカ</td>
592
+ <td>?月?日(？座)</td>
593
+ <td>?型</td>
533
594
  </tr>
534
595
  </tbody>
535
596
  </table>
536
597
  </div><!-- /example -->
537
598
  </div>
538
599
  </div>
539
- </div>
600
+ </section>
540
601
 
541
602
  <!-- Forms
542
603
  ================================================== -->
543
- <div class="bs-docs-section">
604
+ <section class="bs-docs-section">
544
605
  <div class="row">
545
606
  <div class="col-lg-12">
546
607
  <div class="page-header">
@@ -551,173 +612,256 @@
551
612
 
552
613
  <div class="row">
553
614
  <div class="col-lg-6">
554
- <div class="well bs-component">
555
- <form class="form-horizontal">
615
+ <div class="bs-component">
616
+ <form>
556
617
  <fieldset>
557
- <legend>説明</legend>
558
- <div class="form-group">
559
- <label for="inputEmail" class="col-lg-2 control-label">Email</label>
560
- <div class="col-lg-10">
561
- <input type="text" class="form-control" id="inputEmail" placeholder="Email">
618
+ <legend>Legend</legend>
619
+ <div class="form-group row">
620
+ <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
621
+ <div class="col-sm-10">
622
+ <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
562
623
  </div>
563
624
  </div>
564
625
  <div class="form-group">
565
- <label for="inputPassword" class="col-lg-2 control-label">Password</label>
566
- <div class="col-lg-10">
567
- <input type="password" class="form-control" id="inputPassword" placeholder="Password">
568
- <div class="checkbox">
569
- <label>
570
- <input type="checkbox"> Checkbox
571
- </label>
572
- </div>
573
- </div>
626
+ <label for="exampleInputEmail1">メールアドレス</label>
627
+ <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
628
+ placeholder="Enter email">
629
+ <small id="emailHelp" class="form-text text-muted">ここで入力したメールアドレスは公開されません</small>
574
630
  </div>
575
631
  <div class="form-group">
576
- <label for="textArea" class="col-lg-2 control-label">Textarea</label>
577
- <div class="col-lg-10">
578
- <textarea class="form-control" rows="3" id="textArea"></textarea>
579
- <span class="help-block">ヘルプテキストは長くすることで1行を超えて分割されるようになります。</span>
580
- </div>
632
+ <label for="exampleInputPassword1">パスワード</label>
633
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
581
634
  </div>
582
635
  <div class="form-group">
583
- <label class="col-lg-2 control-label">Radios</label>
584
- <div class="col-lg-10">
585
- <div class="radio">
586
- <label>
587
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
588
- こっち
589
- </label>
590
- </div>
591
- <div class="radio">
592
- <label>
593
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
594
- あっち
595
- </label>
596
- </div>
597
- </div>
636
+ <label for="exampleSelect1">選択</label>
637
+ <select class="form-control" id="exampleSelect1">
638
+ <option>高坂穂乃果</option>
639
+ <option>絢瀬絵里</option>
640
+ <option>南ことり</option>
641
+ <option>園田海未</option>
642
+ <option>星空凛</option>
643
+ <option>西木野真姫</option>
644
+ <option>東條希</option>
645
+ <option>小泉花陽</option>
646
+ <option>矢澤にこ</option>
647
+ </select>
598
648
  </div>
599
649
  <div class="form-group">
600
- <label for="select" class="col-lg-2 control-label">Selects</label>
601
- <div class="col-lg-10">
602
- <select class="form-control" id="select">
603
- <option>1</option>
604
- <option>2</option>
605
- <option>3</option>
606
- <option>4</option>
607
- <option>5</option>
608
- </select>
609
- <br>
610
- <select multiple="" class="form-control">
611
- <option>1</option>
612
- <option>2</option>
613
- <option>3</option>
614
- <option>4</option>
615
- <option>5</option>
616
- </select>
617
- </div>
650
+ <label for="exampleSelect2">複数選択</label>
651
+ <select multiple class="form-control" id="exampleSelect2">
652
+ <option>高坂穂乃果</option>
653
+ <option>絢瀬絵里</option>
654
+ <option>南ことり</option>
655
+ <option>園田海未</option>
656
+ <option>星空凛</option>
657
+ <option>西木野真姫</option>
658
+ <option>東條希</option>
659
+ <option>小泉花陽</option>
660
+ <option>矢澤にこ</option>
661
+ </select>
618
662
  </div>
619
663
  <div class="form-group">
620
- <div class="col-lg-10 col-lg-offset-2">
621
- <button type="reset" class="btn btn-default">キャンセル</button>
622
- <button type="submit" class="btn btn-primary">送信</button>
623
- </div>
664
+ <label for="exampleTextarea">テキストエリア</label>
665
+ <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
666
+ </div>
667
+ <div class="form-group">
668
+ <label for="exampleInputFile">ファイル選択</label>
669
+ <input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
670
+ <small id="fileHelp"
671
+ class="form-text text-muted">上にある入力欄に関するブロックレベルのヘルプテキストです。少し薄い文字色で表示されて、1行に収まらない場合は折り返して表示されます。</small>
624
672
  </div>
673
+ <fieldset class="form-group">
674
+ <legend>ラジオボタン</legend>
675
+ <div class="form-check">
676
+ <label class="form-check-label">
677
+ <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1"
678
+ value="option1" checked>
679
+ オプション1
680
+ </label>
681
+ </div>
682
+ <div class="form-check">
683
+ <label class="form-check-label">
684
+ <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2"
685
+ value="option2">
686
+ オプション2
687
+ </label>
688
+ </div>
689
+ <div class="form-check disabled">
690
+ <label class="form-check-label">
691
+ <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3"
692
+ value="option3" disabled>
693
+ オプション3 (Disable)
694
+ </label>
695
+ </div>
696
+ </fieldset>
697
+ <fieldset class="form-group">
698
+ <legend>チェックボックス</legend>
699
+ <div class="form-check">
700
+ <label class="form-check-label">
701
+ <input class="form-check-input" type="checkbox" value="" checked>
702
+ オプション1
703
+ </label>
704
+ </div>
705
+ <div class="form-check disabled">
706
+ <label class="form-check-label">
707
+ <input class="form-check-input" type="checkbox" value="" disabled>
708
+ オプション2 (Disable)
709
+ </label>
710
+ </div>
711
+ </fieldset>
712
+ <button type="submit" class="btn btn-primary">送信</button>
625
713
  </fieldset>
626
714
  </form>
627
715
  </div>
628
716
  </div>
629
- <div class="col-lg-4 col-lg-offset-1">
717
+ <div class="col-lg-4 offset-lg-1">
630
718
 
631
719
  <form class="bs-component">
632
720
  <div class="form-group">
633
- <label class="control-label" for="focusedInput">Focused input</label>
634
- <input class="form-control" id="focusedInput" type="text" value="This is focused...">
721
+ <fieldset disabled>
722
+ <label class="control-label" for="disabledInput">Disabled 入力欄</label>
723
+ <input class="form-control" id="disabledInput" type="text" placeholder="Disabled の入力欄です" disabled="">
724
+ </fieldset>
635
725
  </div>
636
726
 
637
727
  <div class="form-group">
638
- <label class="control-label" for="disabledInput">Disabled input</label>
639
- <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
640
- </div>
641
-
642
- <div class="form-group has-warning">
643
- <label class="control-label" for="inputWarning">Input warning</label>
644
- <input type="text" class="form-control" id="inputWarning">
728
+ <fieldset>
729
+ <label class="control-label" for="readOnlyInput">Readonly 入力欄</label>
730
+ <input class="form-control" id="readOnlyInput" type="text" placeholder="Readonly の入力欄です" readonly>
731
+ </fieldset>
645
732
  </div>
646
733
 
647
- <div class="form-group has-error">
648
- <label class="control-label" for="inputError">Input error</label>
649
- <input type="text" class="form-control" id="inputError">
734
+ <div class="form-group has-success">
735
+ <label class="form-control-label" for="inputSuccess1">Valid input</label>
736
+ <input type="text" value="elichica" class="form-control is-valid" id="inputValid">
737
+ <div class="valid-feedback">入力したIDは使用可能です</div>
650
738
  </div>
651
739
 
652
- <div class="form-group has-success">
653
- <label class="control-label" for="inputSuccess">Input success</label>
654
- <input type="text" class="form-control" id="inputSuccess">
740
+ <div class="form-group has-danger">
741
+ <label class="form-control-label" for="inputDanger1">Invalid input</label>
742
+ <input type="text" value="elichica" class="form-control is-invalid" id="inputInvalid">
743
+ <div class="invalid-feedback">入力したIDは既に使用済みです</div>
655
744
  </div>
656
745
 
657
746
  <div class="form-group">
658
- <label class="control-label" for="inputLarge">Large input</label>
659
- <input class="form-control input-lg" type="text" id="inputLarge">
747
+ <label class="col-form-label col-form-label-lg" for="inputLarge">大きい入力欄</label>
748
+ <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" id="inputLarge">
660
749
  </div>
661
750
 
662
751
  <div class="form-group">
663
- <label class="control-label" for="inputDefault">Default input</label>
664
- <input type="text" class="form-control" id="inputDefault">
752
+ <label class="col-form-label" for="inputDefault">通常の入力欄</label>
753
+ <input type="text" class="form-control" placeholder="Default input" id="inputDefault">
665
754
  </div>
666
755
 
667
756
  <div class="form-group">
668
- <label class="control-label" for="inputSmall">Small input</label>
669
- <input class="form-control input-sm" type="text" id="inputSmall">
757
+ <label class="col-form-label col-form-label-sm" for="inputSmall">小さい入力欄</label>
758
+ <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" id="inputSmall">
670
759
  </div>
671
760
 
672
761
  <div class="form-group">
673
762
  <label class="control-label">Input addons</label>
674
- <div class="input-group">
675
- <span class="input-group-addon">$</span>
676
- <input type="text" class="form-control">
677
- <span class="input-group-btn">
678
- <button class="btn btn-default" type="button">Button</button>
679
- </span>
763
+ <div class="form-group">
764
+ <div class="input-group mb-3">
765
+ <div class="input-group-prepend">
766
+ <span class="input-group-text">&yen;</span>
767
+ </div>
768
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
769
+ <div class="input-group-append">
770
+ <span class="input-group-text">百万円</span>
771
+ </div>
772
+ </div>
680
773
  </div>
681
774
  </div>
682
775
  </form>
683
776
 
777
+ <div class="bs-component">
778
+ <fieldset>
779
+ <legend>Custom forms</legend>
780
+ <div class="form-group">
781
+ <div class="custom-control custom-radio">
782
+ <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
783
+ <label class="custom-control-label" for="customRadio1">Custom forms を利用すると</label>
784
+ </div>
785
+ <div class="custom-control custom-radio">
786
+ <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
787
+ <label class="custom-control-label" for="customRadio2">全OSで共通のデザインになります</label>
788
+ </div>
789
+ <div class="custom-control custom-radio">
790
+ <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
791
+ <label class="custom-control-label" for="customRadio3">選択できない選択肢</label>
792
+ </div>
793
+ </div>
794
+ <div class="form-group">
795
+ <div class="custom-control custom-checkbox">
796
+ <input type="checkbox" class="custom-control-input" id="customCheck1" checked>
797
+ <label class="custom-control-label" for="customCheck1">チェックボックスも同様です</label>
798
+ </div>
799
+ <div class="custom-control custom-checkbox">
800
+ <input type="checkbox" class="custom-control-input" id="customCheck2" disabled>
801
+ <label class="custom-control-label" for="customCheck2">選択できない選択肢</label>
802
+ </div>
803
+ </div>
804
+ <div class="form-group">
805
+ <select class="custom-select">
806
+ <option selected>選択してください</option>
807
+ <option value="1">Pritemps</option>
808
+ <option value="2">BiBi</option>
809
+ <option value="3">lily white</option>
810
+ </select>
811
+ </div>
812
+ <div class="form-group">
813
+ <label class="custom-file">
814
+ <input type="file" id="file2" class="custom-file-input">
815
+ <span class="custom-file-control"></span>
816
+ </label>
817
+ </div>
818
+ </fieldset>
819
+ </div>
820
+
684
821
  </div>
685
822
  </div>
686
- </div>
823
+ </section>
687
824
 
688
825
  <!-- Navs
689
826
  ================================================== -->
690
- <div class="bs-docs-section">
827
+ <section class="bs-docs-section">
691
828
 
692
829
  <div class="row">
693
830
  <div class="col-lg-12">
694
831
  <div class="page-header">
695
- <h1 id="nav">Navs</h1>
832
+ <h1 id="navs">Navs</h1>
696
833
  </div>
697
834
  </div>
698
835
  </div>
699
836
 
700
- <div class="row">
701
- <div class="col-lg-4">
837
+ <div class="row" style="margin-bottom: 2rem;">
838
+ <div class="col-lg-6">
702
839
  <h2 id="nav-tabs">Tabs</h2>
703
840
  <div class="bs-component">
704
841
  <ul class="nav nav-tabs">
705
- <li class="active"><a href="#home" data-toggle="tab">坊っちゃん</a></li>
706
- <li><a href="#profile" data-toggle="tab">愚見数則</a></li>
707
- <li class="disabled"><a>Disabled</a></li>
708
- <li class="dropdown">
709
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
710
- 宮沢賢治 <span class="caret"></span>
711
- </a>
712
- <ul class="dropdown-menu">
713
- <li><a href="#dropdown1" data-toggle="tab">雨ニモマケズ</a></li>
714
- <li class="divider"></li>
715
- <li><a href="#dropdown2" data-toggle="tab">春と修羅(序)</a></li>
716
- </ul>
842
+ <li class="nav-item">
843
+ <a class="nav-link active" data-toggle="tab" href="#home">坊っちゃん</a>
844
+ </li>
845
+ <li class="nav-item">
846
+ <a class="nav-link" data-toggle="tab" href="#profile">愚見数則</a>
847
+ </li>
848
+ <li class="nav-item">
849
+ <a class="nav-link disabled" href="#">人間失格</a>
850
+ </li>
851
+ <li class="nav-item dropdown">
852
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
853
+ aria-expanded="false">宮沢賢治</a>
854
+ <div class="dropdown-menu">
855
+ <a class="dropdown-item" data-toggle="tab" href="#dropdown1">雨ニモマケズ</a>
856
+ <a class="dropdown-item" data-toggle="tab" href="#dropdown2">春と修羅(序)</a>
857
+ <a class="dropdown-item" data-toggle="tab" href="#dropdown3">銀河鉄道の夜</a>
858
+ <div class="dropdown-divider"></div>
859
+ <a class="dropdown-item" data-toggle="tab" href="#dropdown4">よだかの星</a>
860
+ </div>
717
861
  </li>
718
862
  </ul>
719
863
  <div id="myTabContent" class="tab-content">
720
- <div class="tab-pane fade active in" id="home">
864
+ <div class="tab-pane fade show active" id="home">
721
865
  <p>
722
866
  親讓りの無鐵砲で小供の時から損ばかりして居る。小學校に居る時分學校の二階から飛び降りて一週間程腰を拔かした事がある。なぜそんな無闇（むやみ）をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出して居たら、同級生の一人が冗談に、いくら威張つても、そこから飛び降りる事は出來まい。弱虫やーい。と囃（はや）したからである。小使（こづかひ）に負ぶさつて歸つて來た時、おやぢが大きな眼をして二階位（にかいぐらゐ）から飛び降りて腰を拔かす奴があるかと云つたから、此次（このつぎ）は拔かさずに飛んで見せますと答へた。
723
867
  </p>
@@ -735,130 +879,186 @@
735
879
  <p>わたくしといふ現象は 假定された有機交流電燈の ひとつの青い照明です （あらゆる透明な幽霊の複合体） 風景やみんなといっしょに せはしくせはしく明滅しながら いかにもたしかにともりつづける 因果交流電燈の
736
880
  ひとつの青い照明です （ひかりはたもち、その電燈は失はれ）</p>
737
881
  </div>
882
+ <div class="tab-pane fade" id="dropdown3">
883
+ <p>
884
+ 「ではみなさんは、さういふふうに川だと云はれたり、乳の流れたあとだと云はれたりしてゐたこのぼんやりと白いものがほんたうは何かご承知ですか。」先生は、黒板に吊した大きな黒い星座の図の、上から下へ白くけぶった銀河帯のやうなところを指しながら、みんなに問をかけました。
885
+ </p>
886
+ <p>
887
+ カムパネルラが手をあげました。それから四五人手をあげました。ジョバンニも手をあげやうとして、急いでそのまゝやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないといふ気持ちがするのでした。
888
+ </p>
889
+ </div>
890
+ <div class="tab-pane fade" id="dropdown4">
891
+ <p>よだかは、実にみにくい鳥です。</p>
892
+ <p>顔は、ところどころ、味噌をつけたようにまだらで、くちばしは、ひらたくて、耳までさけています。</p>
893
+ <p>足は、まるでよぼよぼで、一間とも歩けません。</p>
894
+ <p>ほかの鳥は、もう、よだかの顔を見ただけでも、いやになってしまうという工合でした。</p>
895
+ </div>
738
896
  </div>
739
897
  </div>
740
898
  </div>
741
- <div class="col-lg-4">
899
+
900
+ <div class="col-lg-6">
742
901
  <h2 id="nav-pills">Pills</h2>
743
902
  <div class="bs-component">
744
903
  <ul class="nav nav-pills">
745
- <li class="active"><a href="#">Home</a></li>
746
- <li><a href="#">Profile</a></li>
747
- <li class="disabled"><a href="#">Disabled</a></li>
748
- <li class="dropdown">
749
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
750
- Dropdown <span class="caret"></span>
751
- </a>
752
- <ul class="dropdown-menu">
753
- <li><a href="#">Action</a></li>
754
- <li><a href="#">Another action</a></li>
755
- <li><a href="#">Something else here</a></li>
756
- <li class="divider"></li>
757
- <li><a href="#">Separated link</a></li>
758
- </ul>
904
+ <li class="nav-item">
905
+ <a class="nav-link active" href="#">Active</a>
906
+ </li>
907
+ <li class="nav-item dropdown">
908
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
909
+ aria-expanded="false">Dropdown</a>
910
+ <div class="dropdown-menu">
911
+ <a class="dropdown-item" href="#">Action</a>
912
+ <a class="dropdown-item" href="#">Another action</a>
913
+ <a class="dropdown-item" href="#">Something else here</a>
914
+ <div class="dropdown-divider"></div>
915
+ <a class="dropdown-item" href="#">Separated link</a>
916
+ </div>
917
+ </li>
918
+ <li class="nav-item">
919
+ <a class="nav-link" href="#">Link</a>
920
+ </li>
921
+ <li class="nav-item">
922
+ <a class="nav-link disabled" href="#">Disabled</a>
759
923
  </li>
760
924
  </ul>
761
925
  </div>
762
926
  <br>
763
927
  <div class="bs-component">
764
- <ul class="nav nav-pills nav-stacked">
765
- <li class="active"><a href="#">Home</a></li>
766
- <li><a href="#">Profile</a></li>
767
- <li class="disabled"><a href="#">Disabled</a></li>
768
- <li class="dropdown">
769
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
770
- Dropdown <span class="caret"></span>
771
- </a>
772
- <ul class="dropdown-menu">
773
- <li><a href="#">Action</a></li>
774
- <li><a href="#">Another action</a></li>
775
- <li><a href="#">Something else here</a></li>
776
- <li class="divider"></li>
777
- <li><a href="#">Separated link</a></li>
778
- </ul>
928
+ <ul class="nav nav-pills flex-column">
929
+ <li class="nav-item">
930
+ <a class="nav-link active" href="#">Active</a>
931
+ </li>
932
+ <li class="nav-item dropdown">
933
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
934
+ aria-expanded="false">Dropdown</a>
935
+ <div class="dropdown-menu">
936
+ <a class="dropdown-item" href="#">Action</a>
937
+ <a class="dropdown-item" href="#">Another action</a>
938
+ <a class="dropdown-item" href="#">Something else here</a>
939
+ <div class="dropdown-divider"></div>
940
+ <a class="dropdown-item" href="#">Separated link</a>
941
+ </div>
942
+ </li>
943
+ <li class="nav-item">
944
+ <a class="nav-link" href="#">Link</a>
945
+ </li>
946
+ <li class="nav-item">
947
+ <a class="nav-link disabled" href="#">Disabled</a>
779
948
  </li>
780
949
  </ul>
781
950
  </div>
782
951
  </div>
783
- <div class="col-lg-4">
952
+ </div>
953
+
954
+ <div class="row">
955
+ <div class="col-lg-6">
784
956
  <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
785
957
  <div class="bs-component">
786
- <ul class="breadcrumb">
787
- <li class="active">Home</li>
788
- </ul>
789
-
790
- <ul class="breadcrumb">
791
- <li><a href="#">Home</a></li>
792
- <li class="active">Library</li>
793
- </ul>
794
-
795
- <ul class="breadcrumb">
796
- <li><a href="#">Home</a></li>
797
- <li><a href="#">Library</a></li>
798
- <li class="active">Data</li>
799
- </ul>
958
+ <ol class="breadcrumb">
959
+ <li class="breadcrumb-item active">Home</li>
960
+ </ol>
961
+ <ol class="breadcrumb">
962
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
963
+ <li class="breadcrumb-item active">Library</li>
964
+ </ol>
965
+ <ol class="breadcrumb">
966
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
967
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
968
+ <li class="breadcrumb-item active">Data</li>
969
+ </ol>
800
970
  </div>
801
-
802
971
  </div>
803
- </div>
804
-
805
972
 
806
- <div class="row">
807
- <div class="col-lg-4">
973
+ <div class="col-lg-6">
808
974
  <h2 id="pagination">Pagination</h2>
809
975
  <div class="bs-component">
810
- <ul class="pagination">
811
- <li class="disabled"><a href="#">&laquo;</a></li>
812
- <li class="active"><a href="#">1</a></li>
813
- <li><a href="#">2</a></li>
814
- <li><a href="#">3</a></li>
815
- <li><a href="#">4</a></li>
816
- <li><a href="#">5</a></li>
817
- <li><a href="#">&raquo;</a></li>
818
- </ul>
976
+ <div>
977
+ <ul class="pagination">
978
+ <li class="page-item disabled">
979
+ <a class="page-link" href="#">&laquo;</a>
980
+ </li>
981
+ <li class="page-item active">
982
+ <a class="page-link" href="#">1</a>
983
+ </li>
984
+ <li class="page-item">
985
+ <a class="page-link" href="#">2</a>
986
+ </li>
987
+ <li class="page-item">
988
+ <a class="page-link" href="#">3</a>
989
+ </li>
990
+ <li class="page-item">
991
+ <a class="page-link" href="#">4</a>
992
+ </li>
993
+ <li class="page-item">
994
+ <a class="page-link" href="#">5</a>
995
+ </li>
996
+ <li class="page-item">
997
+ <a class="page-link" href="#">&raquo;</a>
998
+ </li>
999
+ </ul>
1000
+ </div>
819
1001
 
820
- <ul class="pagination pagination-lg">
821
- <li class="disabled"><a href="#">&laquo;</a></li>
822
- <li class="active"><a href="#">1</a></li>
823
- <li><a href="#">2</a></li>
824
- <li><a href="#">3</a></li>
825
- <li><a href="#">&raquo;</a></li>
826
- </ul>
1002
+ <div>
1003
+ <ul class="pagination pagination-lg">
1004
+ <li class="page-item disabled">
1005
+ <a class="page-link" href="#">&laquo;</a>
1006
+ </li>
1007
+ <li class="page-item active">
1008
+ <a class="page-link" href="#">1</a>
1009
+ </li>
1010
+ <li class="page-item">
1011
+ <a class="page-link" href="#">2</a>
1012
+ </li>
1013
+ <li class="page-item">
1014
+ <a class="page-link" href="#">3</a>
1015
+ </li>
1016
+ <li class="page-item">
1017
+ <a class="page-link" href="#">4</a>
1018
+ </li>
1019
+ <li class="page-item">
1020
+ <a class="page-link" href="#">5</a>
1021
+ </li>
1022
+ <li class="page-item">
1023
+ <a class="page-link" href="#">&raquo;</a>
1024
+ </li>
1025
+ </ul>
1026
+ </div>
827
1027
 
828
- <ul class="pagination pagination-sm">
829
- <li class="disabled"><a href="#">&laquo;</a></li>
830
- <li class="active"><a href="#">1</a></li>
831
- <li><a href="#">2</a></li>
832
- <li><a href="#">3</a></li>
833
- <li><a href="#">4</a></li>
834
- <li><a href="#">5</a></li>
835
- <li><a href="#">&raquo;</a></li>
836
- </ul>
837
- </div>
838
- </div>
839
- <div class="col-lg-4">
840
- <h2 id="pager">Pager</h2>
841
- <div class="bs-component">
842
- <ul class="pager">
843
- <li><a href="#">Previous</a></li>
844
- <li><a href="#">Next</a></li>
845
- </ul>
1028
+ <div>
1029
+ <ul class="pagination pagination-sm">
1030
+ <li class="page-item disabled">
1031
+ <a class="page-link" href="#">&laquo;</a>
1032
+ </li>
1033
+ <li class="page-item active">
1034
+ <a class="page-link" href="#">1</a>
1035
+ </li>
1036
+ <li class="page-item">
1037
+ <a class="page-link" href="#">2</a>
1038
+ </li>
1039
+ <li class="page-item">
1040
+ <a class="page-link" href="#">3</a>
1041
+ </li>
1042
+ <li class="page-item">
1043
+ <a class="page-link" href="#">4</a>
1044
+ </li>
1045
+ <li class="page-item">
1046
+ <a class="page-link" href="#">5</a>
1047
+ </li>
1048
+ <li class="page-item">
1049
+ <a class="page-link" href="#">&raquo;</a>
1050
+ </li>
1051
+ </ul>
1052
+ </div>
846
1053
 
847
- <ul class="pager">
848
- <li class="previous disabled"><a href="#">&larr; Older</a></li>
849
- <li class="next"><a href="#">Newer &rarr;</a></li>
850
- </ul>
851
1054
  </div>
852
1055
  </div>
853
- <div class="col-lg-4">
854
-
855
- </div>
856
1056
  </div>
857
- </div>
1057
+ </section>
858
1058
 
859
1059
  <!-- Indicators
860
1060
  ================================================== -->
861
- <div class="bs-docs-section">
1061
+ <section class="bs-docs-section">
862
1062
 
863
1063
  <div class="row">
864
1064
  <div class="col-lg-12">
@@ -874,8 +1074,9 @@
874
1074
  <div class="bs-component">
875
1075
  <div class="alert alert-dismissible alert-warning">
876
1076
  <button type="button" class="close" data-dismiss="alert">&times;</button>
877
- <h4>Warning!</h4>
878
- <p>要求された処理は正常に完了できませんでした。このエラーについての詳細は<a href="#" class="alert-link">こちらのドキュメントを参照してください</a>.</p>
1077
+ <h4 class="alert-heading">Warning!</h4>
1078
+ <p class="mb-0">要求された処理は正常に完了できませんでした。このエラーについての詳細は<a href="#" class="alert-link">こちらのドキュメントを参照してください</a>。
1079
+ </p>
879
1080
  </div>
880
1081
  </div>
881
1082
  </div>
@@ -885,7 +1086,7 @@
885
1086
  <div class="bs-component">
886
1087
  <div class="alert alert-dismissible alert-danger">
887
1088
  <button type="button" class="close" data-dismiss="alert">&times;</button>
888
- <strong>エラー</strong> <a href="#" class="alert-link">タイトルを入力し</a>，再度投稿を行って下さい。
1089
+ <strong>エラー</strong> <a href="#" class="alert-link">いくつかの項目を見直して</a> 再度投稿してください
889
1090
  </div>
890
1091
  </div>
891
1092
  </div>
@@ -893,7 +1094,7 @@
893
1094
  <div class="bs-component">
894
1095
  <div class="alert alert-dismissible alert-success">
895
1096
  <button type="button" class="close" data-dismiss="alert">&times;</button>
896
- <strong>完了</strong> 記事「<a href="#" class="alert-link">国立音ノ木坂学院について</a>」を公開しました。
1097
+ <strong>完了</strong> 記事「<a href="#" class="alert-link">国立音ノ木坂学院について</a>」を公開しました
897
1098
  </div>
898
1099
  </div>
899
1100
  </div>
@@ -901,124 +1102,139 @@
901
1102
  <div class="bs-component">
902
1103
  <div class="alert alert-dismissible alert-info">
903
1104
  <button type="button" class="close" data-dismiss="alert">&times;</button>
904
- <strong>Tips</strong> この<a href="#" class="alert-link">アラートは気にする必要がありますが</a>, そんなに重要ではありません。
1105
+ <strong>Tips</strong> 生徒手帳には<a href="#" class="alert-link">講堂の使用には許可が必要</a>と書いてあります
905
1106
  </div>
906
1107
  </div>
907
1108
  </div>
908
1109
  </div>
909
- <div class="row">
910
- <div class="col-lg-4">
911
- <h2>Labels</h2>
912
- <div class="bs-component" style="margin-bottom: 40px;">
913
- <span class="label label-default">Default</span>
914
- <span class="label label-primary">Primary</span>
915
- <span class="label label-success">Success</span>
916
- <span class="label label-warning">Warning</span>
917
- <span class="label label-danger">Danger</span>
918
- <span class="label label-info">Info</span>
919
- </div>
1110
+ <div>
1111
+ <h2>Badges</h2>
1112
+ <div class="bs-component" style="margin-bottom: 40px;">
1113
+ <span class="badge badge-primary">Primary</span>
1114
+ <span class="badge badge-secondary">Secondary</span>
1115
+ <span class="badge badge-success">Success</span>
1116
+ <span class="badge badge-danger">Danger</span>
1117
+ <span class="badge badge-warning">Warning</span>
1118
+ <span class="badge badge-info">Info</span>
1119
+ <span class="badge badge-light">Light</span>
1120
+ <span class="badge badge-dark">Dark</span>
920
1121
  </div>
921
- <div class="col-lg-4">
922
- <h2>Badges</h2>
923
- <div class="bs-component">
924
- <ul class="nav nav-pills">
925
- <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
926
- <li><a href="#">Profile <span class="badge"></span></a></li>
927
- <li><a href="#">Messages <span class="badge">3</span></a></li>
928
- </ul>
929
- </div>
1122
+ <div class="bs-component">
1123
+ <span class="badge badge-pill badge-primary">Primary</span>
1124
+ <span class="badge badge-pill badge-secondary">Secondary</span>
1125
+ <span class="badge badge-pill badge-success">Success</span>
1126
+ <span class="badge badge-pill badge-danger">Danger</span>
1127
+ <span class="badge badge-pill badge-warning">Warning</span>
1128
+ <span class="badge badge-pill badge-info">Info</span>
1129
+ <span class="badge badge-pill badge-light">Light</span>
1130
+ <span class="badge badge-pill badge-dark">Dark</span>
930
1131
  </div>
931
1132
  </div>
932
- </div>
1133
+ </section>
933
1134
 
934
1135
  <!-- Progress bars
935
1136
  ================================================== -->
936
- <div class="bs-docs-section">
1137
+ <section class="bs-docs-section">
937
1138
 
938
1139
  <div class="row">
939
1140
  <div class="col-lg-12">
940
1141
  <div class="page-header">
941
- <h1 id="progress">Progress bars</h1>
1142
+ <h1 id="progress">Progress</h1>
942
1143
  </div>
943
1144
 
944
1145
  <h3 id="progress-basic">Basic</h3>
945
1146
  <div class="bs-component">
946
1147
  <div class="progress">
947
- <div class="progress-bar" style="width: 60%;"></div>
1148
+ <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
1149
+ aria-valuemax="100"></div>
948
1150
  </div>
949
1151
  </div>
950
1152
 
951
1153
  <h3 id="progress-alternatives">Contextual alternatives</h3>
952
1154
  <div class="bs-component">
953
1155
  <div class="progress">
954
- <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1156
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
1157
+ aria-valuemin="0" aria-valuemax="100"></div>
955
1158
  </div>
956
-
957
1159
  <div class="progress">
958
- <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1160
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50"
1161
+ aria-valuemin="0" aria-valuemax="100"></div>
1162
+ </div>
1163
+ <div class="progress">
1164
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75"
1165
+ aria-valuemin="0" aria-valuemax="100"></div>
959
1166
  </div>
960
-
961
1167
  <div class="progress">
962
- <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1168
+ <div class="progress-bar bg-danger" role="progressbar" style="width: 100%;" aria-valuenow="100"
1169
+ aria-valuemin="0" aria-valuemax="100"></div>
963
1170
  </div>
1171
+ </div>
964
1172
 
1173
+ <h3 id="progress-multiple">Multiple bars</h3>
1174
+ <div class="bs-component">
965
1175
  <div class="progress">
966
- <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
1176
+ <div class="progress-bar" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0"
1177
+ aria-valuemax="100"></div>
1178
+ <div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30"
1179
+ aria-valuemin="0" aria-valuemax="100"></div>
1180
+ <div class="progress-bar bg-info" role="progressbar" style="width: 20%;" aria-valuenow="20"
1181
+ aria-valuemin="0" aria-valuemax="100"></div>
967
1182
  </div>
968
1183
  </div>
969
1184
 
970
1185
  <h3 id="progress-striped">Striped</h3>
971
1186
  <div class="bs-component">
972
- <div class="progress progress-striped">
973
- <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1187
+ <div class="progress">
1188
+ <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%;" aria-valuenow="10"
1189
+ aria-valuemin="0" aria-valuemax="100"></div>
974
1190
  </div>
975
-
976
- <div class="progress progress-striped">
977
- <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1191
+ <div class="progress">
1192
+ <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%;"
1193
+ aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
978
1194
  </div>
979
-
980
- <div class="progress progress-striped">
981
- <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1195
+ <div class="progress">
1196
+ <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%;"
1197
+ aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
982
1198
  </div>
983
-
984
- <div class="progress progress-striped">
985
- <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
1199
+ <div class="progress">
1200
+ <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%;"
1201
+ aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
986
1202
  </div>
987
- </div>
988
-
989
- <h3 id="progress-animated">Animated</h3>
990
- <div class="bs-component">
991
- <div class="progress progress-striped active">
992
- <div class="progress-bar" style="width: 45%"></div>
1203
+ <div class="progress">
1204
+ <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%;"
1205
+ aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
993
1206
  </div>
994
1207
  </div>
995
1208
 
996
- <h3 id="progress-stacked">Stacked</h3>
1209
+ <h3 id="progress-animated">Animated</h3>
997
1210
  <div class="bs-component">
998
1211
  <div class="progress">
999
- <div class="progress-bar progress-bar-success" style="width: 35%"></div>
1000
- <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
1001
- <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
1212
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
1213
+ aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
1002
1214
  </div>
1003
1215
  </div>
1004
1216
  </div>
1005
1217
  </div>
1006
- </div>
1218
+ </section>
1007
1219
 
1008
1220
  <!-- Containers
1009
1221
  ================================================== -->
1010
- <div class="bs-docs-section">
1222
+ <section class="bs-docs-section">
1011
1223
 
1012
1224
  <div class="row">
1013
1225
  <div class="col-lg-12">
1014
1226
  <div class="page-header">
1015
- <h1 id="container">Containers</h1>
1227
+ <h1 id="containers">Containers</h1>
1016
1228
  </div>
1017
1229
  <div class="bs-component">
1018
1230
  <div class="jumbotron">
1019
- <h1>方丈記</h1>
1020
- <p>行く川のながれは絶えずして、しかも本の水にあらず。よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。世の中にある人とすみかと、またかくの如し。</p>
1021
- <p><a class="btn btn-primary btn-lg">方丈記について</a></p>
1231
+ <h1 class="display-3">音ノ木坂学院へようこそ</h1>
1232
+ <p class="lead">音ノ木坂学院は秋葉原と神田と神保町の3つの街の中心部にある国立高校です。</p>
1233
+ <hr class="my-4">
1234
+ <p>創立は明治期、100年をかぞえる伝統校でありながらも、創立者の目指した自由な校風により常に新しさも兼ね揃えてきました。</p>
1235
+ <p class="lead">
1236
+ <a class="btn btn-primary btn-lg" href="#" role="button">もっと詳しく</a>
1237
+ </p>
1022
1238
  </div>
1023
1239
  </div>
1024
1240
  </div>
@@ -1030,21 +1246,22 @@
1030
1246
  <h2>List groups</h2>
1031
1247
  </div>
1032
1248
  </div>
1249
+
1033
1250
  <div class="row">
1034
1251
  <div class="col-lg-4">
1035
1252
  <div class="bs-component">
1036
1253
  <ul class="list-group">
1037
- <li class="list-group-item">
1038
- <span class="badge">14</span>
1254
+ <li class="list-group-item d-flex justify-content-between align-items-center">
1039
1255
  夢なき夢は夢じゃない
1256
+ <span class="badge badge-primary badge-pill">14</span>
1040
1257
  </li>
1041
- <li class="list-group-item">
1042
- <span class="badge">2</span>
1258
+ <li class="list-group-item d-flex justify-content-between align-items-center">
1043
1259
  Anemone heart
1260
+ <span class="badge badge-primary badge-pill">2</span>
1044
1261
  </li>
1045
- <li class="list-group-item">
1046
- <span class="badge">1</span>
1262
+ <li class="list-group-item d-flex justify-content-between align-items-center">
1047
1263
  なわとび
1264
+ <span class="badge badge-primary badge-pill">1</span>
1048
1265
  </li>
1049
1266
  </ul>
1050
1267
  </div>
@@ -1052,12 +1269,14 @@
1052
1269
  <div class="col-lg-4">
1053
1270
  <div class="bs-component">
1054
1271
  <div class="list-group">
1055
- <a href="#" class="list-group-item active">
1272
+ <a href="#" class="list-group-item list-group-item-action active">
1056
1273
  Beat in Angel
1057
1274
  </a>
1058
- <a href="#" class="list-group-item">にこぷり♡女子道
1275
+ <a href="#" class="list-group-item list-group-item-action">
1276
+ にこぷり&hearts;女子道
1059
1277
  </a>
1060
- <a href="#" class="list-group-item">硝子の花園
1278
+ <a href="#" class="list-group-item list-group-item-action disabled">
1279
+ 硝子の花園
1061
1280
  </a>
1062
1281
  </div>
1063
1282
  </div>
@@ -1065,135 +1284,221 @@
1065
1284
  <div class="col-lg-4">
1066
1285
  <div class="bs-component">
1067
1286
  <div class="list-group">
1068
- <a href="#" class="list-group-item">
1069
- <h4 class="list-group-item-heading">高坂 穂乃果</h4>
1070
- <p class="list-group-item-text">μ'sの発起人。いつも笑顔で、行動力に満ちている。</p>
1287
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
1288
+ <div class="d-flex w-100 justify-content-between">
1289
+ <h5 class="mb-1">音ノ木坂学院</h5>
1290
+ <small>3 days ago</small>
1291
+ </div>
1292
+ <p class="mb-1">通称「音ノ木坂学院」「オトノキ」。高坂穂乃果などが通う、秋葉原、神田、神保町という3つの街のはざまにある伝統校。女子高校であり、現在入学希望者は少なく廃校の検討が発表されている。
1293
+ </p>
1294
+ <small>スクールアイドルグループ「μ's」</small>
1071
1295
  </a>
1072
- <a href="#" class="list-group-item">
1073
- <h4 class="list-group-item-heading">絢瀬 絵里</h4>
1074
- <p class="list-group-item-text">生徒会長。才色兼備のロシア系クォーター。</p>
1296
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
1297
+ <div class="d-flex w-100 justify-content-between">
1298
+ <h5 class="mb-1">UTX学園</h5>
1299
+ <small class="text-muted">3 days ago</small>
1300
+ </div>
1301
+ <p class="mb-1">秋葉原に在する、周辺地域で一番人気のエスカレーター式の高校。現在も生徒をたくさん集めている。その校舎は秋葉原UDXビルをモデルにしている。</p>
1302
+ <small class="text-muted">スクールアイドルグループ「A-RISE」</small>
1075
1303
  </a>
1076
1304
  </div>
1077
1305
  </div>
1078
1306
  </div>
1079
1307
  </div>
1080
1308
 
1081
-
1082
1309
  <div class="row">
1083
1310
  <div class="col-lg-12">
1084
- <h2>Panels</h2>
1311
+ <h2>Cards</h2>
1085
1312
  </div>
1086
1313
  </div>
1314
+
1087
1315
  <div class="row">
1088
1316
  <div class="col-lg-4">
1089
1317
  <div class="bs-component">
1090
- <div class="panel panel-default">
1091
- <div class="panel-body">
1092
- 普通のパネル
1318
+ <div class="card mb-3">
1319
+ <div class="card-header">Default card</div>
1320
+ <div class="card-body">
1321
+ <h4 class="card-title">高坂穂乃果</h4>
1322
+ <p class="card-text">
1323
+ 『ラブライブ！』の主人公。16歳の高校2年生。一人称は「私」、「穂乃果」。左側の髪の一部を黄色のリボンで結んでいるセミロングヘア。好きな食べ物はいちご、嫌いな食べ物はピーマン。</p>
1093
1324
  </div>
1094
1325
  </div>
1095
-
1096
- <div class="panel panel-default">
1097
- <div class="panel-heading">パネルの見出し</div>
1098
- <div class="panel-body">
1099
- パネルの内容
1326
+ <div class="card text-white bg-primary mb-3">
1327
+ <div class="card-header">Primary card</div>
1328
+ <div class="card-body">
1329
+ <h4 class="card-title">園田海未</h4>
1330
+ <p class="card-text">16歳の高校2年生。一人称は「私」。腰まで伸ばした、青みがかかった黒のロングヘア。好きな食べ物は穂乃果の家のまんじゅう、嫌いな食べ物は炭酸飲料。</p>
1100
1331
  </div>
1101
1332
  </div>
1102
-
1103
- <div class="panel panel-default">
1104
- <div class="panel-body">
1105
- パネルの内容
1333
+ <div class="card text-white bg-secondary mb-3">
1334
+ <div class="card-header">Secondary card</div>
1335
+ <div class="card-body">
1336
+ <h4 class="card-title">南ことり</h4>
1337
+ <p class="card-text">
1338
+ 16歳の高校2年生。一人称は「私」、「ことり」。ロングヘアを向かって左側の髪の一部の根元を輪にして緑のリボンで結んでいる。好きな食べ物はチーズケーキ、嫌いな食べ物はにんにく。</p>
1106
1339
  </div>
1107
- <div class="panel-footer">パネルのフッター</div>
1108
1340
  </div>
1109
- </div>
1110
- </div>
1111
- <div class="col-lg-4">
1112
- <div class="bs-component">
1113
- <div class="panel panel-primary">
1114
- <div class="panel-heading">
1115
- <h3 class="panel-title">パネルの見出し(Primary)</h3>
1341
+ <div class="card text-white bg-success mb-3">
1342
+ <div class="card-header">Success card</div>
1343
+ <div class="card-body">
1344
+ <h4 class="card-title">小泉花陽</h4>
1345
+ <p class="card-text">15歳の高校1年生。一人称は「花陽」、「私」。セミショートヘア。好きな食べ物は白いごはん、嫌いな食べ物はなし。</p>
1116
1346
  </div>
1117
- <div class="panel-body">
1118
- パネルの内容
1347
+ </div>
1348
+ <div class="card text-white bg-danger mb-3">
1349
+ <div class="card-header">Danger card</div>
1350
+ <div class="card-body">
1351
+ <h4 class="card-title">西木野真姫</h4>
1352
+ <p class="card-text">15歳の高校1年生。一人称は「私」。セミロングヘア。好きな食べ物はトマト、嫌いな食べ物はみかん。</p>
1119
1353
  </div>
1120
1354
  </div>
1121
-
1122
- <div class="panel panel-success">
1123
- <div class="panel-heading">
1124
- <h3 class="panel-title">パネルの見出し(Success)</h3>
1355
+ <div class="card text-white bg-warning mb-3">
1356
+ <div class="card-header">Warning card</div>
1357
+ <div class="card-body">
1358
+ <h4 class="card-title">星空凛</h4>
1359
+ <p class="card-text">15歳の高校1年生。一人称は「凛」。ショートヘア。好きな食べ物はラーメン、嫌いな食べ物はお魚。</p>
1125
1360
  </div>
1126
- <div class="panel-body">
1127
- パネルの内容
1361
+ </div>
1362
+ <div class="card text-white bg-info mb-3">
1363
+ <div class="card-header">Info card</div>
1364
+ <div class="card-body">
1365
+ <h4 class="card-title">絢瀬絵里</h4>
1366
+ <p class="card-text">17歳の高校3年生。一人称は「私」、「エリチカ」。ロングヘアをシュシュで結んでポニーテールにしている。好きな食べ物はチョコレート、嫌いな食べ物は梅干とのり。</p>
1128
1367
  </div>
1129
1368
  </div>
1130
-
1131
- <div class="panel panel-warning">
1132
- <div class="panel-heading">
1133
- <h3 class="panel-title">パネルの見出し(Warning)</h3>
1369
+ <div class="card bg-light mb-3">
1370
+ <div class="card-header">Light card</div>
1371
+ <div class="card-body">
1372
+ <h4 class="card-title">矢澤にこ</h4>
1373
+ <p class="card-text">17歳の高校3年生。一人称は「にこ」、「私」。好きな食べ物はお菓子、嫌いな食べ物は辛いもの。</p>
1134
1374
  </div>
1135
- <div class="panel-body">
1136
- パネルの内容
1375
+ </div>
1376
+ <div class="card text-white bg-dark mb-3">
1377
+ <div class="card-header">Dark card</div>
1378
+ <div class="card-body">
1379
+ <h4 class="card-title">東條希</h4>
1380
+ <p class="card-text">17歳の高校3年生。一人称は「ウチ」。ロングヘアを左右に分けてシュシュで結んでいる。好きな食べ物は焼肉、嫌いな食べ物はキャラメル。</p>
1137
1381
  </div>
1138
1382
  </div>
1139
1383
  </div>
1140
1384
  </div>
1141
1385
  <div class="col-lg-4">
1142
1386
  <div class="bs-component">
1143
- <div class="panel panel-danger">
1144
- <div class="panel-heading">
1145
- <h3 class="panel-title">パネルの見出し(Danger)</h3>
1387
+ <div class="card mb-3">
1388
+ <div class="card-header">Default card</div>
1389
+ <div class="card-body">
1390
+ <h4 class="card-title">高坂穂乃果</h4>
1391
+ <p class="card-text">
1392
+ 『ラブライブ！』の主人公。16歳の高校2年生。一人称は「私」、「穂乃果」。左側の髪の一部を黄色のリボンで結んでいるセミロングヘア。好きな食べ物はいちご、嫌いな食べ物はピーマン。</p>
1146
1393
  </div>
1147
- <div class="panel-body">
1148
- パネルの内容
1394
+ </div>
1395
+ <div class="card border-primary mb-3">
1396
+ <div class="card-header">Primary card</div>
1397
+ <div class="card-body">
1398
+ <h4 class="card-title">園田海未</h4>
1399
+ <p class="card-text">16歳の高校2年生。一人称は「私」。腰まで伸ばした、青みがかかった黒のロングヘア。好きな食べ物は穂乃果の家のまんじゅう、嫌いな食べ物は炭酸飲料。</p>
1149
1400
  </div>
1150
1401
  </div>
1151
-
1152
- <div class="panel panel-info">
1153
- <div class="panel-heading">
1154
- <h3 class="panel-title">パネルの見出し(Info)</h3>
1402
+ <div class="card border-secondary mb-3">
1403
+ <div class="card-header">Secondary card</div>
1404
+ <div class="card-body">
1405
+ <h4 class="card-title">南ことり</h4>
1406
+ <p class="card-text">
1407
+ 16歳の高校2年生。一人称は「私」、「ことり」。ロングヘアを向かって左側の髪の一部の根元を輪にして緑のリボンで結んでいる。好きな食べ物はチーズケーキ、嫌いな食べ物はにんにく。</p>
1155
1408
  </div>
1156
- <div class="panel-body">
1157
- パネルの内容
1409
+ </div>
1410
+ <div class="card border-success mb-3">
1411
+ <div class="card-header">Success card</div>
1412
+ <div class="card-body">
1413
+ <h4 class="card-title">小泉花陽</h4>
1414
+ <p class="card-text">15歳の高校1年生。一人称は「花陽」、「私」。セミショートヘア。好きな食べ物は白いごはん、嫌いな食べ物はなし。</p>
1158
1415
  </div>
1159
1416
  </div>
1160
- </div>
1161
- </div>
1162
- </div>
1163
-
1164
- <div class="row">
1165
- <div class="col-lg-12">
1166
- <h2>Wells</h2>
1167
- </div>
1168
- </div>
1169
- <div class="row">
1170
- <div class="col-lg-4">
1171
- <div class="bs-component">
1172
- <div class="well">
1173
- いい感じの枠
1417
+ <div class="card border-danger mb-3">
1418
+ <div class="card-header">Danger card</div>
1419
+ <div class="card-body">
1420
+ <h4 class="card-title">西木野真姫</h4>
1421
+ <p class="card-text">15歳の高校1年生。一人称は「私」。セミロングヘア。好きな食べ物はトマト、嫌いな食べ物はみかん。</p>
1422
+ </div>
1174
1423
  </div>
1175
- </div>
1176
- </div>
1177
- <div class="col-lg-4">
1178
- <div class="bs-component">
1179
- <div class="well well-sm">
1180
- いい感じの枠(小さめ)
1424
+ <div class="card border-warning mb-3">
1425
+ <div class="card-header">Warning card</div>
1426
+ <div class="card-body">
1427
+ <h4 class="card-title">星空凛</h4>
1428
+ <p class="card-text">15歳の高校1年生。一人称は「凛」。ショートヘア。好きな食べ物はラーメン、嫌いな食べ物はお魚。</p>
1429
+ </div>
1430
+ </div>
1431
+ <div class="card border-info mb-3">
1432
+ <div class="card-header">Info card</div>
1433
+ <div class="card-body">
1434
+ <h4 class="card-title">絢瀬絵里</h4>
1435
+ <p class="card-text">17歳の高校3年生。一人称は「私」、「エリチカ」。ロングヘアをシュシュで結んでポニーテールにしている。好きな食べ物はチョコレート、嫌いな食べ物は梅干とのり。</p>
1436
+ </div>
1437
+ </div>
1438
+ <div class="card border-light mb-3">
1439
+ <div class="card-header">Light card</div>
1440
+ <div class="card-body">
1441
+ <h4 class="card-title">矢澤にこ</h4>
1442
+ <p class="card-text">17歳の高校3年生。一人称は「にこ」、「私」。好きな食べ物はお菓子、嫌いな食べ物は辛いもの。</p>
1443
+ </div>
1444
+ </div>
1445
+ <div class="card border-dark mb-3">
1446
+ <div class="card-header">Dark card</div>
1447
+ <div class="card-body">
1448
+ <h4 class="card-title">東條希</h4>
1449
+ <p class="card-text">17歳の高校3年生。一人称は「ウチ」。ロングヘアを左右に分けてシュシュで結んでいる。好きな食べ物は焼肉、嫌いな食べ物はキャラメル。</p>
1450
+ </div>
1181
1451
  </div>
1182
1452
  </div>
1183
1453
  </div>
1454
+
1184
1455
  <div class="col-lg-4">
1185
1456
  <div class="bs-component">
1186
- <div class="well well-lg">
1187
- いい感じの枠(大きめ)
1457
+ <div class="card mb-3">
1458
+ <h3 class="card-header">News</h3>
1459
+ <div class="card-body">
1460
+ <h5 class="card-title">アイドル研究部(μ's)の海外ライブが放映されました</h5>
1461
+ <h6 class="card-subtitle text-muted">米・ニューヨーク ブロードウェイにてパフォーマンスを披露</h6>
1462
+ </div>
1463
+ <div class="embed-responsive embed-responsive-16by9">
1464
+ <iframe class="embed-responsive-item"
1465
+ src="https://www.youtube-nocookie.com/embed/oWIE7GwJu3c?rel=0&amp;controls=0&amp;showinfo=0"
1466
+ frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
1467
+ </div>
1468
+ <div class="card-body">
1469
+ <p class="card-text">日本国内で注目されている「スクールアイドル」が米国でも注目され、米国のテレビ番組に前回ラブライブ！優勝チームであるμ’ｓが出演しました。</p>
1470
+ </div>
1471
+ <ul class="list-group list-group-flush">
1472
+ <li class="list-group-item">Angelic Angel</li>
1473
+ <li class="list-group-item">SUNNY DAY SONG</li>
1474
+ <li class="list-group-item">僕たちはひとつの光</li>
1475
+ </ul>
1476
+ <div class="card-body">
1477
+ <a href="#" class="card-link">ラブライブ！公式</a>
1478
+ <a href="#" class="card-link">音ノ木坂学院</a>
1479
+ </div>
1480
+ <div class="card-footer text-muted">
1481
+ 2日前
1482
+ </div>
1483
+ </div>
1484
+ <div class="card">
1485
+ <div class="card-body">
1486
+ <h4 class="card-title">タイトル</h4>
1487
+ <h6 class="card-subtitle mb-2 text-muted">サブタイトル</h6>
1488
+ <p class="card-text">ここに本文が入ります。カードはヘッダー・フッターがないスタイルもつくることができます。</p>
1489
+ <a href="#" class="card-link">リンク1</a>
1490
+ <a href="#" class="card-link">リンク2</a>
1491
+ </div>
1188
1492
  </div>
1189
1493
  </div>
1190
1494
  </div>
1191
1495
  </div>
1192
- </div>
1496
+
1497
+ </section>
1193
1498
 
1194
1499
  <!-- Dialogs
1195
1500
  ================================================== -->
1196
- <div class="bs-docs-section">
1501
+ <section class="bs-docs-section">
1197
1502
 
1198
1503
  <div class="row">
1199
1504
  <div class="col-lg-12">
@@ -1207,18 +1512,20 @@
1207
1512
  <h2>Modals</h2>
1208
1513
  <div class="bs-component">
1209
1514
  <div class="modal">
1210
- <div class="modal-dialog">
1515
+ <div class="modal-dialog" role="document">
1211
1516
  <div class="modal-content">
1212
1517
  <div class="modal-header">
1213
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1214
- <h4 class="modal-title">タイトル</h4>
1518
+ <h5 class="modal-title">タイトル</h5>
1519
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1520
+ <span aria-hidden="true">&times;</span>
1521
+ </button>
1215
1522
  </div>
1216
1523
  <div class="modal-body">
1217
- <p>サンプルテキスト</p>
1524
+ <p>サンプルテキストサンプルテキストサンプルテキスト</p>
1218
1525
  </div>
1219
1526
  <div class="modal-footer">
1220
- <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
1221
- <button type="button" class="btn btn-primary">保存</button>
1527
+ <button type="button" class="btn btn-primary">変更を保存</button>
1528
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
1222
1529
  </div>
1223
1530
  </div>
1224
1531
  </div>
@@ -1227,38 +1534,40 @@
1227
1534
  </div>
1228
1535
  <div class="col-lg-6">
1229
1536
  <h2>Popovers</h2>
1230
- <div class="bs-component">
1231
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
1232
- data-placement="left" data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Left</button>
1537
+ <div class="bs-component" style="margin-bottom: 3em;">
1538
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1539
+ data-placement="left" data-content="本文サンプル本文サンプル本文サンプル">Left</button>
1233
1540
 
1234
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top"
1235
- data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Top</button>
1541
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1542
+ data-placement="top" data-content="本文サンプル本文サンプル本文サンプル">Top</button>
1236
1543
 
1237
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
1238
- data-placement="bottom" data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Bottom</button>
1544
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1545
+ data-placement="bottom" data-content="本文サンプル本文サンプル本文サンプル">Bottom</button>
1239
1546
 
1240
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
1241
- data-placement="right" data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Right</button>
1547
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1548
+ data-placement="right" data-content="本文サンプル本文サンプル本文サンプル">Right</button>
1242
1549
  </div>
1243
1550
  <h2>Tooltips</h2>
1244
1551
  <div class="bs-component">
1245
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title=""
1246
- data-original-title="ツールチップだよ left">Left</button>
1552
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
1553
+ title="左方向にでるTooltip">Left</button>
1247
1554
 
1248
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title=""
1249
- data-original-title="ツールチップだよ top">Top</button>
1555
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
1556
+ title="上方向にでるTooltip">Top</button>
1250
1557
 
1251
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title=""
1252
- data-original-title="ツールチップだよ bottom">Bottom</button>
1558
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
1559
+ title="下方向にでるTooltip">Bottom</button>
1253
1560
 
1254
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title=""
1255
- data-original-title="ツールチップだよ right">Right</button>
1561
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
1562
+ title="右方向にでるTooltip">Right</button>
1256
1563
  </div>
1257
1564
  </div>
1258
1565
  </div>
1259
- </div>
1566
+ </section>
1567
+
1260
1568
  </div>
1261
1569
 
1570
+
1262
1571
  <script type="text/javascript">
1263
1572
  $('.bs-component [data-toggle="popover"]').popover();
1264
1573
  $('.bs-component [data-toggle="tooltip"]').tooltip();