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