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