bootstrap-honoka-rails 3.3.7.5 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +23 -94
- data/Rakefile +17 -39
- data/assets/stylesheets/_honoka.scss +5 -0
- data/assets/stylesheets/_nico.scss +5 -0
- data/assets/stylesheets/_umi.scss +5 -0
- data/assets/stylesheets/honoka/_honoka.scss +25 -36
- data/assets/stylesheets/honoka/_mixins.scss +1 -60
- data/assets/stylesheets/honoka/_override.scss +35 -63
- data/assets/stylesheets/honoka/_variables.scss +729 -710
- data/assets/stylesheets/nico/_honoka.scss +25 -36
- data/assets/stylesheets/nico/_mixins.scss +1 -60
- data/assets/stylesheets/nico/_override.scss +66 -68
- data/assets/stylesheets/nico/_variables.scss +730 -710
- data/assets/stylesheets/umi/_bootswatch.scss +193 -0
- data/assets/stylesheets/umi/_honoka.scss +28 -36
- data/assets/stylesheets/umi/_mixins.scss +1 -60
- data/assets/stylesheets/umi/_override.scss +35 -63
- data/assets/stylesheets/umi/_variables.scss +730 -710
- data/lib/bootstrap/honoka/rails.rb +0 -5
- data/lib/bootstrap/honoka/rails/engine.rb +4 -2
- data/lib/bootstrap/honoka/rails/version.rb +1 -5
- data/test/dummy/app/assets/javascripts/application.js +2 -2
- data/test/dummy/app/assets/stylesheets/application.css +1 -0
- data/test/dummy/app/assets/stylesheets/honoka.css +0 -1
- data/test/dummy/app/assets/stylesheets/nico.css +0 -1
- data/test/dummy/app/assets/stylesheets/umi.css +0 -1
- data/test/dummy/app/controllers/pages_controller.rb +6 -4
- data/test/dummy/app/views/layouts/application.html.erb +1 -1
- data/test/dummy/app/views/pages/honoka.html.erb +1108 -682
- data/test/dummy/app/views/pages/nico.html.erb +994 -685
- data/test/dummy/app/views/pages/umi.html.erb +993 -684
- data/test/dummy/config/application.rb +4 -1
- data/test/dummy/config/environments/development.rb +24 -0
- data/test/dummy/config/environments/production.rb +8 -4
- data/test/dummy/config/initializers/assets.rb +1 -17
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/routes.rb +3 -3
- data/test/honoka_test.rb +4 -41
- data/test/test_helper.rb +5 -49
- metadata +16 -117
- data/VERSIONS.md +0 -10
- data/assets/stylesheets/_rin.scss +0 -3
- data/assets/stylesheets/honoka/_font.scss +0 -58
- data/assets/stylesheets/nico/_font.scss +0 -58
- data/assets/stylesheets/rin/_font.scss +0 -58
- data/assets/stylesheets/rin/_honoka.scss +0 -60
- data/assets/stylesheets/rin/_mixins.scss +0 -60
- data/assets/stylesheets/rin/_override.scss +0 -372
- data/assets/stylesheets/rin/_variables.scss +0 -877
- data/assets/stylesheets/umi/_font.scss +0 -58
- data/test/dummy/app/assets/stylesheets/rin.css +0 -4
- data/test/dummy/app/views/pages/rin.html.erb +0 -1278
- data/test/dummy/bin/rails +0 -4
- data/test/dummy/production_key_generate.sh +0 -4
- data/test/dummy/public/favicon.ico +0 -0
- data/test/support/dummy_integration.rb +0 -57
- data/test/support/dummy_reporters.rb +0 -61
@@ -1,18 +1,14 @@
|
|
1
1
|
<!-- テスト用サイト:動作が一致しているか確認する為に下記サイトを完全コピー
|
2
|
-
コピー元 : https://
|
3
|
-
下記テスト用のサイトの著作権は https://
|
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
|
-
|
7
|
-
|
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
|
-
<
|
58
|
+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
57
59
|
<div class="container">
|
58
|
-
<
|
59
|
-
<
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
</
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
<li class="
|
70
|
-
<a
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
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
|
-
</
|
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-
|
90
|
-
<h1>Nico</h1>
|
91
|
-
<p class="lead"
|
92
|
-
|
93
|
-
|
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><body></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
|
-
<
|
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="
|
115
|
+
<h1 id="navbars">Navbars</h1>
|
115
116
|
</div>
|
116
117
|
|
117
118
|
<div class="bs-component">
|
118
|
-
<nav class="navbar navbar-
|
119
|
-
<
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
<
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
<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
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
</
|
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-
|
169
|
-
<
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
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
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
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
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
</
|
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
|
233
|
+
</div>
|
216
234
|
|
217
235
|
</div>
|
218
236
|
</div>
|
219
|
-
</
|
237
|
+
</section>
|
220
238
|
|
221
239
|
|
222
240
|
<!-- Buttons
|
223
241
|
================================================== -->
|
224
|
-
<
|
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-
|
252
|
+
<div class="col-lg-7">
|
235
253
|
|
236
254
|
<p class="bs-component">
|
237
|
-
<
|
238
|
-
<
|
239
|
-
<
|
240
|
-
<
|
241
|
-
<
|
242
|
-
<
|
243
|
-
<
|
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
|
-
<
|
248
|
-
<
|
249
|
-
<
|
250
|
-
<
|
251
|
-
<
|
252
|
-
<
|
253
|
-
<
|
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
|
258
|
-
<div class="btn-
|
259
|
-
<
|
260
|
-
|
261
|
-
<
|
262
|
-
|
263
|
-
|
264
|
-
<
|
265
|
-
<
|
266
|
-
|
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
|
-
|
284
|
-
|
285
|
-
|
286
|
-
<
|
287
|
-
|
288
|
-
|
289
|
-
<
|
290
|
-
<
|
291
|
-
|
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
|
-
|
296
|
-
|
297
|
-
|
298
|
-
<
|
299
|
-
|
300
|
-
|
301
|
-
<
|
302
|
-
<
|
303
|
-
|
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
|
-
|
308
|
-
|
309
|
-
|
310
|
-
<
|
311
|
-
|
312
|
-
|
313
|
-
<
|
314
|
-
<
|
315
|
-
|
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
|
-
<
|
322
|
-
<
|
323
|
-
<
|
324
|
-
<
|
325
|
-
|
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-
|
340
|
+
<div class="col-lg-5">
|
330
341
|
|
331
342
|
<p class="bs-component">
|
332
|
-
<
|
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-
|
338
|
-
<
|
339
|
-
|
340
|
-
|
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-
|
346
|
-
<
|
347
|
-
<
|
348
|
-
|
349
|
-
|
350
|
-
<
|
351
|
-
</
|
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
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
</
|
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
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
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-
|
378
|
-
<
|
379
|
-
|
380
|
-
|
381
|
-
|
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
|
-
</
|
414
|
+
</section>
|
388
415
|
|
389
416
|
<!-- Typography
|
390
417
|
================================================== -->
|
391
|
-
<
|
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="
|
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
|
447
|
+
<h2>本文サンプル</h2>
|
417
448
|
<p>グスコーブドリは、<a
|
418
449
|
href="#">イーハトーヴ</a>の大きな森のなかに生まれました。おとうさんは、グスコーナドリという名高い木こりで、どんな大きな木でも、まるで赤ん坊を寝かしつけるようにわけなく切ってしまう人でした。</p>
|
419
450
|
<p><small>テキストのこの行は、細字として扱われることを意味します。</small></p>
|
420
|
-
<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-
|
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
|
-
<
|
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-
|
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="
|
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
|
-
<
|
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
|
-
</
|
513
|
+
</section>
|
470
514
|
|
471
515
|
<!-- Tables
|
472
516
|
================================================== -->
|
473
|
-
<
|
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-
|
526
|
+
<table class="table table-hover">
|
483
527
|
<thead>
|
484
528
|
<tr>
|
485
|
-
<th
|
486
|
-
<th
|
487
|
-
<th
|
488
|
-
<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
|
-
<
|
494
|
-
<td
|
495
|
-
<td
|
496
|
-
<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
|
-
<
|
500
|
-
<td
|
501
|
-
<td
|
502
|
-
<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="
|
505
|
-
<
|
506
|
-
<td
|
507
|
-
<td
|
508
|
-
<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
|
-
<
|
512
|
-
<td
|
513
|
-
<td
|
514
|
-
<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
|
-
<
|
518
|
-
<td
|
519
|
-
<td
|
520
|
-
<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
|
-
<
|
524
|
-
<td
|
525
|
-
<td
|
526
|
-
<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="
|
529
|
-
<
|
530
|
-
<td
|
531
|
-
<td
|
532
|
-
<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
|
-
</
|
601
|
+
</section>
|
540
602
|
|
541
603
|
<!-- Forms
|
542
604
|
================================================== -->
|
543
|
-
<
|
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="
|
555
|
-
<form
|
616
|
+
<div class="bs-component">
|
617
|
+
<form>
|
556
618
|
<fieldset>
|
557
|
-
<legend
|
558
|
-
<div class="form-group">
|
559
|
-
<label for="
|
560
|
-
<div class="col-
|
561
|
-
<input type="text" class="form-control" id="
|
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="
|
566
|
-
<
|
567
|
-
|
568
|
-
|
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="
|
577
|
-
<
|
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
|
584
|
-
<
|
585
|
-
<
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
<
|
592
|
-
|
593
|
-
|
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="
|
601
|
-
<
|
602
|
-
<
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
<
|
610
|
-
<
|
611
|
-
|
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
|
-
<
|
621
|
-
|
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
|
718
|
+
<div class="col-lg-4 offset-lg-1">
|
630
719
|
|
631
720
|
<form class="bs-component">
|
632
721
|
<div class="form-group">
|
633
|
-
<
|
634
|
-
|
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
|
-
<
|
639
|
-
|
640
|
-
|
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-
|
648
|
-
<label class="control-label" for="
|
649
|
-
<input type="text" class="form-control" id="
|
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-
|
653
|
-
<label class="control-label" for="
|
654
|
-
<input type="text" class="form-control" id="
|
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="
|
659
|
-
<input class="form-control
|
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="
|
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="
|
669
|
-
<input class="form-control
|
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="
|
675
|
-
<
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
764
|
+
<div class="form-group">
|
765
|
+
<div class="input-group mb-3">
|
766
|
+
<div class="input-group-prepend">
|
767
|
+
<span class="input-group-text">¥</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
|
-
</
|
824
|
+
</section>
|
687
825
|
|
688
826
|
<!-- Navs
|
689
827
|
================================================== -->
|
690
|
-
<
|
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="
|
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-
|
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="
|
706
|
-
|
707
|
-
|
708
|
-
<li class="
|
709
|
-
<a class="
|
710
|
-
|
711
|
-
|
712
|
-
<
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
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
|
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
|
-
|
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="
|
746
|
-
|
747
|
-
|
748
|
-
<li class="dropdown">
|
749
|
-
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
<
|
754
|
-
<
|
755
|
-
<
|
756
|
-
<
|
757
|
-
|
758
|
-
|
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
|
765
|
-
<li class="
|
766
|
-
|
767
|
-
|
768
|
-
<li class="dropdown">
|
769
|
-
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
|
770
|
-
|
771
|
-
|
772
|
-
|
773
|
-
<
|
774
|
-
<
|
775
|
-
<
|
776
|
-
<
|
777
|
-
|
778
|
-
|
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
|
-
|
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
|
-
<
|
787
|
-
<li class="active">Home</li>
|
788
|
-
</
|
789
|
-
|
790
|
-
|
791
|
-
<li
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
<li
|
797
|
-
|
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
|
-
<
|
811
|
-
<
|
812
|
-
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
817
|
-
|
818
|
-
|
977
|
+
<div>
|
978
|
+
<ul class="pagination">
|
979
|
+
<li class="page-item disabled">
|
980
|
+
<a class="page-link" href="#">«</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="#">»</a>
|
999
|
+
</li>
|
1000
|
+
</ul>
|
1001
|
+
</div>
|
819
1002
|
|
820
|
-
<
|
821
|
-
<
|
822
|
-
|
823
|
-
|
824
|
-
|
825
|
-
|
826
|
-
|
1003
|
+
<div>
|
1004
|
+
<ul class="pagination pagination-lg">
|
1005
|
+
<li class="page-item disabled">
|
1006
|
+
<a class="page-link" href="#">«</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="#">»</a>
|
1025
|
+
</li>
|
1026
|
+
</ul>
|
1027
|
+
</div>
|
827
1028
|
|
828
|
-
<
|
829
|
-
<
|
830
|
-
|
831
|
-
|
832
|
-
|
833
|
-
|
834
|
-
|
835
|
-
|
836
|
-
|
837
|
-
|
838
|
-
|
839
|
-
|
840
|
-
|
841
|
-
|
842
|
-
|
843
|
-
|
844
|
-
|
845
|
-
|
1029
|
+
<div>
|
1030
|
+
<ul class="pagination pagination-sm">
|
1031
|
+
<li class="page-item disabled">
|
1032
|
+
<a class="page-link" href="#">«</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="#">»</a>
|
1051
|
+
</li>
|
1052
|
+
</ul>
|
1053
|
+
</div>
|
846
1054
|
|
847
|
-
<ul class="pager">
|
848
|
-
<li class="previous disabled"><a href="#">← Older</a></li>
|
849
|
-
<li class="next"><a href="#">Newer →</a></li>
|
850
|
-
</ul>
|
851
1055
|
</div>
|
852
1056
|
</div>
|
853
|
-
<div class="col-lg-4">
|
854
|
-
|
855
|
-
</div>
|
856
1057
|
</div>
|
857
|
-
</
|
1058
|
+
</section>
|
858
1059
|
|
859
1060
|
<!-- Indicators
|
860
1061
|
================================================== -->
|
861
|
-
<
|
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">×</button>
|
877
|
-
<h4>Warning!</h4>
|
878
|
-
<p>要求された処理は正常に完了できませんでした。このエラーについての詳細は<a href="#" class="alert-link">こちらのドキュメントを参照してください</a
|
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">×</button>
|
888
|
-
<strong>エラー</strong> <a href="#" class="alert-link"
|
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">×</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">×</button>
|
904
|
-
<strong>Tips</strong>
|
1106
|
+
<strong>Tips</strong> 生徒手帳には<a href="#" class="alert-link">講堂の使用には許可が必要</a>と書いてあります
|
905
1107
|
</div>
|
906
1108
|
</div>
|
907
1109
|
</div>
|
908
1110
|
</div>
|
909
|
-
<div
|
910
|
-
<
|
911
|
-
|
912
|
-
<
|
913
|
-
|
914
|
-
|
915
|
-
|
916
|
-
|
917
|
-
|
918
|
-
|
919
|
-
</
|
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="
|
922
|
-
<
|
923
|
-
<
|
924
|
-
|
925
|
-
|
926
|
-
|
927
|
-
|
928
|
-
|
929
|
-
</
|
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
|
-
</
|
1134
|
+
</section>
|
933
1135
|
|
934
1136
|
<!-- Progress bars
|
935
1137
|
================================================== -->
|
936
|
-
<
|
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
|
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:
|
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
|
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
|
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
|
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
|
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
|
973
|
-
<div class="progress-bar progress-bar-
|
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
|
-
|
977
|
-
|
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
|
-
|
981
|
-
|
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
|
-
|
985
|
-
|
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
|
-
|
988
|
-
|
989
|
-
|
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-
|
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-
|
1000
|
-
|
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
|
-
</
|
1219
|
+
</section>
|
1007
1220
|
|
1008
1221
|
<!-- Containers
|
1009
1222
|
================================================== -->
|
1010
|
-
<
|
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="
|
1228
|
+
<h1 id="containers">Containers</h1>
|
1016
1229
|
</div>
|
1017
1230
|
<div class="bs-component">
|
1018
1231
|
<div class="jumbotron">
|
1019
|
-
<h1
|
1020
|
-
<p
|
1021
|
-
<
|
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
|
+
にこぷり♥女子道
|
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
|
-
<
|
1070
|
-
|
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
|
-
<
|
1074
|
-
|
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>
|
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="
|
1091
|
-
<div class="
|
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
|
-
|
1097
|
-
<div class="
|
1098
|
-
|
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
|
-
|
1104
|
-
<div class="
|
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
|
-
|
1110
|
-
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
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
|
-
|
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
|
-
|
1123
|
-
<div class="
|
1124
|
-
<
|
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
|
-
|
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
|
-
|
1132
|
-
<div class="
|
1133
|
-
<
|
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
|
-
|
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="
|
1144
|
-
<div class="
|
1145
|
-
|
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
|
-
|
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
|
-
|
1153
|
-
<div class="
|
1154
|
-
<
|
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
|
-
|
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
|
-
|
1161
|
-
|
1162
|
-
|
1163
|
-
|
1164
|
-
|
1165
|
-
|
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
|
-
|
1176
|
-
|
1177
|
-
|
1178
|
-
|
1179
|
-
|
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="
|
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&controls=0&showinfo=0"
|
1467
|
+
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
1468
|
+
</div>
|
1469
|
+
<div class="card-body">
|
1470
|
+
<p class="card-text">日本国内で注目されている「スクールアイドル」が米国でも注目され、米国のテレビ番組に前回ラブライブ!優勝チームであるμ’sが出演しました。</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
|
-
|
1497
|
+
|
1498
|
+
</section>
|
1193
1499
|
|
1194
1500
|
<!-- Dialogs
|
1195
1501
|
================================================== -->
|
1196
|
-
<
|
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
|
-
<
|
1214
|
-
<
|
1519
|
+
<h5 class="modal-title">タイトル</h5>
|
1520
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1521
|
+
<span aria-hidden="true">×</span>
|
1522
|
+
</button>
|
1215
1523
|
</div>
|
1216
1524
|
<div class="modal-body">
|
1217
|
-
<p
|
1525
|
+
<p>サンプルテキストサンプルテキストサンプルテキスト</p>
|
1218
1526
|
</div>
|
1219
1527
|
<div class="modal-footer">
|
1220
|
-
<button type="button" class="btn btn-
|
1221
|
-
<button type="button" class="btn btn-
|
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-
|
1232
|
-
data-placement="left" data-content="
|
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-
|
1235
|
-
data-content="
|
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-
|
1238
|
-
data-placement="bottom" data-content="
|
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-
|
1241
|
-
data-placement="right" data-content="
|
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-
|
1246
|
-
|
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-
|
1249
|
-
|
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-
|
1252
|
-
|
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-
|
1255
|
-
|
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
|
-
</
|
1567
|
+
</section>
|
1568
|
+
|
1260
1569
|
</div>
|
1261
1570
|
|
1262
1571
|
<script type="text/javascript">
|