bootstrap-honoka-rails 3.3.7.5 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +23 -94
  3. data/Rakefile +17 -39
  4. data/assets/stylesheets/_honoka.scss +5 -0
  5. data/assets/stylesheets/_nico.scss +5 -0
  6. data/assets/stylesheets/_umi.scss +5 -0
  7. data/assets/stylesheets/honoka/_honoka.scss +25 -36
  8. data/assets/stylesheets/honoka/_mixins.scss +1 -60
  9. data/assets/stylesheets/honoka/_override.scss +35 -63
  10. data/assets/stylesheets/honoka/_variables.scss +729 -710
  11. data/assets/stylesheets/nico/_honoka.scss +25 -36
  12. data/assets/stylesheets/nico/_mixins.scss +1 -60
  13. data/assets/stylesheets/nico/_override.scss +66 -68
  14. data/assets/stylesheets/nico/_variables.scss +730 -710
  15. data/assets/stylesheets/umi/_bootswatch.scss +193 -0
  16. data/assets/stylesheets/umi/_honoka.scss +28 -36
  17. data/assets/stylesheets/umi/_mixins.scss +1 -60
  18. data/assets/stylesheets/umi/_override.scss +35 -63
  19. data/assets/stylesheets/umi/_variables.scss +730 -710
  20. data/lib/bootstrap/honoka/rails.rb +0 -5
  21. data/lib/bootstrap/honoka/rails/engine.rb +4 -2
  22. data/lib/bootstrap/honoka/rails/version.rb +1 -5
  23. data/test/dummy/app/assets/javascripts/application.js +2 -2
  24. data/test/dummy/app/assets/stylesheets/application.css +1 -0
  25. data/test/dummy/app/assets/stylesheets/honoka.css +0 -1
  26. data/test/dummy/app/assets/stylesheets/nico.css +0 -1
  27. data/test/dummy/app/assets/stylesheets/umi.css +0 -1
  28. data/test/dummy/app/controllers/pages_controller.rb +6 -4
  29. data/test/dummy/app/views/layouts/application.html.erb +1 -1
  30. data/test/dummy/app/views/pages/honoka.html.erb +1108 -682
  31. data/test/dummy/app/views/pages/nico.html.erb +994 -685
  32. data/test/dummy/app/views/pages/umi.html.erb +993 -684
  33. data/test/dummy/config/application.rb +4 -1
  34. data/test/dummy/config/environments/development.rb +24 -0
  35. data/test/dummy/config/environments/production.rb +8 -4
  36. data/test/dummy/config/initializers/assets.rb +1 -17
  37. data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
  38. data/test/dummy/config/initializers/inflections.rb +16 -0
  39. data/test/dummy/config/initializers/mime_types.rb +4 -0
  40. data/test/dummy/config/routes.rb +3 -3
  41. data/test/honoka_test.rb +4 -41
  42. data/test/test_helper.rb +5 -49
  43. metadata +16 -117
  44. data/VERSIONS.md +0 -10
  45. data/assets/stylesheets/_rin.scss +0 -3
  46. data/assets/stylesheets/honoka/_font.scss +0 -58
  47. data/assets/stylesheets/nico/_font.scss +0 -58
  48. data/assets/stylesheets/rin/_font.scss +0 -58
  49. data/assets/stylesheets/rin/_honoka.scss +0 -60
  50. data/assets/stylesheets/rin/_mixins.scss +0 -60
  51. data/assets/stylesheets/rin/_override.scss +0 -372
  52. data/assets/stylesheets/rin/_variables.scss +0 -877
  53. data/assets/stylesheets/umi/_font.scss +0 -58
  54. data/test/dummy/app/assets/stylesheets/rin.css +0 -4
  55. data/test/dummy/app/views/pages/rin.html.erb +0 -1278
  56. data/test/dummy/bin/rails +0 -4
  57. data/test/dummy/production_key_generate.sh +0 -4
  58. data/test/dummy/public/favicon.ico +0 -0
  59. data/test/support/dummy_integration.rb +0 -57
  60. data/test/support/dummy_reporters.rb +0 -61
data/lib/bootstrap/honoka/rails.rb CHANGED
@@ -3,11 +3,6 @@ require 'bootstrap/honoka/rails/engine'
3
3
  module Bootstrap
4
4
  module Honoka
5
5
  module Rails
6
- # サポートしているスタイルシート一覧
7
- STYLE_SHEETS =
8
- Dir.glob("#{File.join(File.expand_path('../../..', __dir__), 'assets', 'stylesheets')}/*.scss")
9
- .map { |f| f.match(%r{.+/_([^/]+?)\.scss})[1].to_sym.freeze }
10
- .freeze
11
6
  end
12
7
  end
13
8
  end
data/lib/bootstrap/honoka/rails/engine.rb CHANGED
@@ -1,4 +1,4 @@
1
- require_relative 'version'
1
+ require_relative 'engine'
2
2
 
3
3
  case Bootstrap::Honoka::Rails.major_ver
4
4
  when 4 then require 'bootstrap'
@@ -13,7 +13,9 @@ module Bootstrap
13
13
 
14
14
  # initializer
15
15
  initializer 'bootstrap-honoka-rails.assets' do |app|
16
- app.config.assets.paths << root.join('assets', 'stylesheets').to_s
16
+ %w[stylesheets].each do |sub|
17
+ app.config.assets.paths << root.join('assets', sub).to_s
18
+ end
17
19
  end
18
20
  end
19
21
  end
data/lib/bootstrap/honoka/rails/version.rb CHANGED
@@ -1,14 +1,10 @@
1
1
  module Bootstrap
2
2
  module Honoka
3
3
  module Rails
4
- VERSION = '3.3.7.5'.freeze
4
+ VERSION = '4.0.0'.freeze
5
5
  def self.major_ver
6
6
  VERSION.split('.').first.to_i
7
7
  end
8
-
9
- def self.dependency_ver
10
- VERSION.split('.')[0..2].join('.')
11
- end
12
8
  end
13
9
  end
14
10
  end
data/test/dummy/app/assets/javascripts/application.js CHANGED
@@ -10,8 +10,8 @@
10
10
  // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11
11
  // about supported directives.
12
12
  //
13
- //= require jquery2
14
13
  //= require rails-ujs
14
+ //= require jquery
15
15
  //= require bootstrap-sprockets
16
- //= require turbolinks
16
+ //= require bootstrap.min
17
17
  //= require_tree .
data/test/dummy/app/assets/stylesheets/application.css CHANGED
@@ -10,5 +10,6 @@
10
10
  * files in this directory. Styles in this file should be added after the last require_* statement.
11
11
  * It is generally better to create a new file per style scope.
12
12
  *
13
+ *= require_tree .
13
14
  *= require_self
14
15
  */
data/test/dummy/app/assets/stylesheets/honoka.css CHANGED
@@ -1,4 +1,3 @@
1
1
  /*
2
- *= require _bootstrap-sprockets
3
2
  *= require _honoka
4
3
  */
data/test/dummy/app/assets/stylesheets/nico.css CHANGED
@@ -1,4 +1,3 @@
1
1
  /*
2
- *= require _bootstrap-sprockets
3
2
  *= require _nico
4
3
  */
data/test/dummy/app/assets/stylesheets/umi.css CHANGED
@@ -1,4 +1,3 @@
1
1
  /*
2
- *= require _bootstrap-sprockets
3
2
  *= require _umi
4
3
  */
data/test/dummy/app/controllers/pages_controller.rb CHANGED
@@ -1,6 +1,8 @@
1
1
  class PagesController < ApplicationController
2
- # action定義
3
- ::Bootstrap::Honoka::Rails::STYLE_SHEETS.each do |s|
4
- define_method(s) {}
2
+ def honoka
5
3
  end
6
- end
4
+ def umi
5
+ end
6
+ def nico
7
+ end
8
+ end
data/test/dummy/app/views/layouts/application.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html code="<%= response.try(:code) if defined?(response) %>">
2
+ <html>
3
3
 
4
4
  <head>
5
5
  <title>Dummy</title>
data/test/dummy/app/views/pages/honoka.html.erb CHANGED
@@ -1,18 +1,13 @@
1
1
  <!-- テスト用サイト:動作が一致しているか確認する為に下記サイトを完全コピー
2
- コピー元 : https://github.com/windyakin/Honoka/blob/master/docs/v3/bootstrap-ja.html
3
- 下記テスト用のサイトの著作権は https://github.com/windyakin/Honoka/blob/master/docs/v3/bootstrap-ja.html に帰属します。
2
+ コピー元 : https://honokak.osaka/bootstrap-ja.html
3
+ 下記テスト用のサイトの著作権は https://honokak.osaka/bootstrap-ja.html に帰属します。
4
4
  -->
5
5
  <style type="text/css">
6
- body {
7
- padding-top: 80px;
6
+ .bs-component+.bs-component {
7
+ margin-top: 1rem;
8
8
  }
9
9
 
10
10
  @media (min-width: 768px) {
11
- #banner {
12
- min-height: 300px;
13
- border-bottom: none;
14
- }
15
-
16
11
  .bs-docs-section {
17
12
  margin-top: 8em;
18
13
  }
@@ -21,12 +16,18 @@
21
16
  position: relative;
22
17
  }
23
18
 
19
+ .bs-docs-section .page-header h1 {
20
+ padding: .5rem 0;
21
+ margin-bottom: 2rem;
22
+ border-bottom: 1px solid #eee;
23
+ }
24
+
24
25
  .bs-component .modal {
25
26
  position: relative;
26
27
  top: auto;
27
28
  right: auto;
28
- left: auto;
29
29
  bottom: auto;
30
+ left: auto;
30
31
  z-index: 1;
31
32
  display: block;
32
33
  }
@@ -53,175 +54,193 @@
53
54
  </style>
54
55
 
55
56
  <header>
56
- <div class="navbar navbar-default navbar-fixed-top">
57
+ <nav class="navbar navbar-expand-lg navbar-light bg-light">
57
58
  <div class="container">
58
- <div class="navbar-header">
59
- <a href="/" class="navbar-brand">Honoka</a>
60
- <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
61
- <span class="icon-bar"></span>
62
- <span class="icon-bar"></span>
63
- <span class="icon-bar"></span>
64
- </button>
65
- </div>
66
- <div class="navbar-collapse collapse" id="navbar-main">
67
- <ul class="nav navbar-nav">
68
- <li><a href="/">Top</a></li>
69
- <li class="dropdown active">
70
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Demo <span
71
- class="caret"></span></a>
72
- <ul class="dropdown-menu" role="menu">
73
- <li><a href="./bootstrap-ja.html">Japanese Page</a></li>
74
- <li><a href="./bootstrap.html">English Page</a></li>
75
- </ul>
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>
76
90
  </li>
77
- <li><a href="//github.com/windyakin/Honoka/releases">Download</a></li>
78
- <li><a href="//github.com/windyakin/Honoka/wiki">Wiki</a></li>
79
91
  </ul>
80
92
  </div>
81
93
  </div>
82
- </div>
94
+ </nav>
83
95
  </header>
84
96
 
85
97
  <div class="container">
86
98
 
87
99
  <div class="page-header" id="banner">
88
- <div class="row">
89
- <div class="col-lg-8 col-md-7 col-sm-6">
90
- <h1>Honoka</h1>
100
+ <div class="row my-4">
101
+ <div class="col-12">
102
+ <h1 class="display-3">Honoka</h1>
91
103
  <p class="lead">日本語も美しく表示できるBootstrapテーマ</p>
92
- </div>
93
- <div class="col-lg-4 col-md-5 col-sm-6">
94
- <aside class="panel panel-default">
95
- <div class="panel-heading">
96
- <h4 class="panel-title">游ゴシックの有効・無効切り替え</h4>
97
- </div>
98
- <div class="panel-body">
99
- <p>v3.3.5から<code>&lt;body&gt;</code>に<code>.no-thank-yu</code>を指定することで游ゴシックを使わないようにすることができるようになりました。</p>
100
- <p id="anti-yu-gothic-message">現在デモページは游ゴシックの指定が<span class="text-primary">有効</span>になっています。</p>
101
- <div><button id="anti-yu-gothic-button" class="btn btn-danger btn-block">游ゴシックを無効にする</button></div>
102
- </div>
103
- </aside>
104
+ <hr>
105
+ <p>このページでは Bootstrap テーマ Honoka のサンプルを見ることができます。</p>
104
106
  </div>
105
107
  </div>
106
108
  </div>
107
109
 
108
110
  <!-- Navbar
109
111
  ================================================== -->
110
- <div class="bs-docs-section clearfix">
112
+ <section class="bs-docs-section clearfix">
111
113
  <div class="row">
112
114
  <div class="col-lg-12">
113
115
  <div class="page-header">
114
- <h1 id="navbar">Navbar</h1>
116
+ <h1 id="navbars">Navbars</h1>
115
117
  </div>
116
118
 
117
119
  <div class="bs-component">
118
- <nav class="navbar navbar-default">
119
- <div class="container-fluid">
120
- <div class="navbar-header">
121
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
122
- data-target="#bs-example-navbar-collapse-1">
123
- <span class="sr-only">Toggle navigation</span>
124
- <span class="icon-bar"></span>
125
- <span class="icon-bar"></span>
126
- <span class="icon-bar"></span>
127
- </button>
128
- <a class="navbar-brand" href="#">Brand</a>
129
- </div>
130
-
131
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
132
- <ul class="nav navbar-nav">
133
- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
134
- <li><a href="#">Link</a></li>
135
- <li class="dropdown">
136
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
137
- aria-expanded="false">Dropdown <span class="caret"></span></a>
138
- <ul class="dropdown-menu" role="menu">
139
- <li><a href="#">高坂 穂乃果</a></li>
140
- <li><a href="#">南 ことり</a></li>
141
- <li><a href="#">園田 海未</a></li>
142
- <li class="divider"></li>
143
- <li><a href="#">小泉 花陽</a></li>
144
- <li><a href="#">星空 凛</a></li>
145
- <li><a href="#">西木野 真姫</a></li>
146
- <li class="divider"></li>
147
- <li><a href="#">矢澤 にこ</a></li>
148
- <li><a href="#">絢瀬 絵里</a></li>
149
- <li><a href="#">東條 希</a></li>
150
- </ul>
151
- </li>
152
- </ul>
153
- <form class="navbar-form navbar-left" role="search">
154
- <div class="form-group">
155
- <input type="text" class="form-control" placeholder="Search">
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>
156
147
  </div>
157
- <button type="submit" class="btn btn-default">検索</button>
158
- </form>
159
- <ul class="nav navbar-nav navbar-right">
160
- <li><a href="#">Link</a></li>
161
- </ul>
162
- </div>
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>
163
154
  </div>
164
155
  </nav>
165
156
  </div>
166
157
 
167
158
  <div class="bs-component">
168
- <nav class="navbar navbar-inverse">
169
- <div class="container-fluid">
170
- <div class="navbar-header">
171
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
172
- data-target="#bs-example-navbar-collapse-2">
173
- <span class="sr-only">Toggle navigation</span>
174
- <span class="icon-bar"></span>
175
- <span class="icon-bar"></span>
176
- <span class="icon-bar"></span>
177
- </button>
178
- <a class="navbar-brand" href="#">Brand</a>
179
- </div>
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>
180
196
 
181
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
182
- <ul class="nav navbar-nav">
183
- <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
184
- <li><a href="#">Link</a></li>
185
- <li class="dropdown">
186
- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
187
- aria-expanded="false">Dropdown <span class="caret"></span></a>
188
- <ul class="dropdown-menu" role="menu">
189
- <li><a href="#">高坂 穂乃果</a></li>
190
- <li><a href="#">南 ことり</a></li>
191
- <li><a href="#">園田 海未</a></li>
192
- <li class="divider"></li>
193
- <li><a href="#">小泉 花陽</a></li>
194
- <li><a href="#">星空 凛</a></li>
195
- <li><a href="#">西木野 真姫</a></li>
196
- <li class="divider"></li>
197
- <li><a href="#">矢澤 にこ</a></li>
198
- <li><a href="#">絢瀬 絵里</a></li>
199
- <li><a href="#">東條 希</a></li>
200
- </ul>
201
- </li>
202
- </ul>
203
- <form class="navbar-form navbar-left" role="search">
204
- <div class="form-group">
205
- <input type="text" class="form-control" placeholder="Search">
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>
206
225
  </div>
207
- <button type="submit" class="btn btn-default">検索</button>
208
- </form>
209
- <ul class="nav navbar-nav navbar-right">
210
- <li><a href="#">Link</a></li>
211
- </ul>
212
- </div>
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>
213
232
  </div>
214
233
  </nav>
215
- </div><!-- /example -->
234
+ </div>
216
235
 
217
236
  </div>
218
237
  </div>
219
- </div>
238
+ </section>
220
239
 
221
240
 
222
241
  <!-- Buttons
223
242
  ================================================== -->
224
- <div class="bs-docs-section">
243
+ <section class="bs-docs-section">
225
244
  <div class="page-header">
226
245
  <div class="row">
227
246
  <div class="col-lg-12">
@@ -231,168 +250,177 @@
231
250
  </div>
232
251
 
233
252
  <div class="row">
234
- <div class="col-lg-6">
253
+ <div class="col-lg-7">
235
254
 
236
255
  <p class="bs-component">
237
- <a href="#" class="btn btn-default">Default</a>
238
- <a href="#" class="btn btn-primary">Primary</a>
239
- <a href="#" class="btn btn-success">Success</a>
240
- <a href="#" class="btn btn-info">Info</a>
241
- <a href="#" class="btn btn-warning">Warning</a>
242
- <a href="#" class="btn btn-danger">Danger</a>
243
- <a href="#" class="btn btn-link">Link</a>
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>
244
263
  </p>
245
264
 
246
265
  <p class="bs-component">
247
- <a href="#" class="btn btn-default disabled">Default</a>
248
- <a href="#" class="btn btn-primary disabled">Primary</a>
249
- <a href="#" class="btn btn-success disabled">Success</a>
250
- <a href="#" class="btn btn-info disabled">Info</a>
251
- <a href="#" class="btn btn-warning disabled">Warning</a>
252
- <a href="#" class="btn btn-danger disabled">Danger</a>
253
- <a href="#" class="btn btn-link disabled">Link</a>
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>
254
273
  </p>
255
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>
256
283
 
257
- <div style="margin-bottom: 15px;">
258
- <div class="btn-toolbar bs-component" style="margin: 0;">
259
- <div class="btn-group">
260
- <a href="#" class="btn btn-default">Default</a>
261
- <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
262
- <ul class="dropdown-menu">
263
- <li><a href="#">Action</a></li>
264
- <li><a href="#">Another action</a></li>
265
- <li><a href="#">Something else here</a></li>
266
- <li class="divider"></li>
267
- <li><a href="#">Separated link</a></li>
268
- </ul>
269
- </div>
270
-
271
- <div class="btn-group">
272
- <a href="#" class="btn btn-primary">Primary</a>
273
- <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
274
- <ul class="dropdown-menu">
275
- <li><a href="#">Action</a></li>
276
- <li><a href="#">Another action</a></li>
277
- <li><a href="#">Something else here</a></li>
278
- <li class="divider"></li>
279
- <li><a href="#">Separated link</a></li>
280
- </ul>
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>
281
294
  </div>
295
+ </div>
282
296
 
283
- <div class="btn-group">
284
- <a href="#" class="btn btn-success">Success</a>
285
- <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
286
- <ul class="dropdown-menu">
287
- <li><a href="#">Action</a></li>
288
- <li><a href="#">Another action</a></li>
289
- <li><a href="#">Something else here</a></li>
290
- <li class="divider"></li>
291
- <li><a href="#">Separated link</a></li>
292
- </ul>
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>
293
306
  </div>
307
+ </div>
294
308
 
295
- <div class="btn-group">
296
- <a href="#" class="btn btn-info">Info</a>
297
- <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
298
- <ul class="dropdown-menu">
299
- <li><a href="#">Action</a></li>
300
- <li><a href="#">Another action</a></li>
301
- <li><a href="#">Something else here</a></li>
302
- <li class="divider"></li>
303
- <li><a href="#">Separated link</a></li>
304
- </ul>
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>
305
318
  </div>
319
+ </div>
306
320
 
307
- <div class="btn-group">
308
- <a href="#" class="btn btn-warning">Warning</a>
309
- <a href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
310
- <ul class="dropdown-menu">
311
- <li><a href="#">Action</a></li>
312
- <li><a href="#">Another action</a></li>
313
- <li><a href="#">Something else here</a></li>
314
- <li class="divider"></li>
315
- <li><a href="#">Separated link</a></li>
316
- </ul>
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>
317
330
  </div>
318
331
  </div>
319
332
  </div>
320
333
 
321
- <p class="bs-component">
322
- <a href="#" class="btn btn-primary btn-lg">Large button</a>
323
- <a href="#" class="btn btn-primary">Default button</a>
324
- <a href="#" class="btn btn-primary btn-sm">Small button</a>
325
- <a href="#" class="btn btn-primary btn-xs">Mini button</a>
326
- </p>
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>
327
339
 
328
340
  </div>
329
- <div class="col-lg-6">
341
+ <div class="col-lg-5">
330
342
 
331
343
  <p class="bs-component">
332
- <a href="#" class="btn btn-default btn-lg btn-block">Block level button</a>
344
+ <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
333
345
  </p>
334
346
 
335
-
336
347
  <div class="bs-component" style="margin-bottom: 15px;">
337
- <div class="btn-group btn-group-justified">
338
- <a href="#" class="btn btn-default">Left</a>
339
- <a href="#" class="btn btn-default">Middle</a>
340
- <a href="#" class="btn btn-default">Right</a>
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>
341
358
  </div>
342
359
  </div>
343
360
 
344
361
  <div class="bs-component" style="margin-bottom: 15px;">
345
- <div class="btn-toolbar">
346
- <div class="btn-group">
347
- <a href="#" class="btn btn-default">1</a>
348
- <a href="#" class="btn btn-default">2</a>
349
- <a href="#" class="btn btn-default">3</a>
350
- <a href="#" class="btn btn-default">4</a>
351
- </div>
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>
352
374
 
353
- <div class="btn-group">
354
- <a href="#" class="btn btn-default">5</a>
355
- <a href="#" class="btn btn-default">6</a>
356
- <a href="#" class="btn btn-default">7</a>
357
- </div>
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>
358
385
 
359
- <div class="btn-group">
360
- <a href="#" class="btn btn-default">8</a>
361
- <div class="btn-group">
362
- <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
363
- Dropdown
364
- <span class="caret"></span>
365
- </a>
366
- <ul class="dropdown-menu">
367
- <li><a href="#">Dropdown link</a></li>
368
- <li><a href="#">Dropdown link</a></li>
369
- <li><a href="#">Dropdown link</a></li>
370
- </ul>
371
- </div>
372
- </div>
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>
373
391
  </div>
374
392
  </div>
375
393
 
376
- <div class="bs-component">
377
- <div class="btn-group-vertical">
378
- <a href="#" class="btn btn-default">Button</a>
379
- <a href="#" class="btn btn-default">Button</a>
380
- <a href="#" class="btn btn-default">Button</a>
381
- <a href="#" class="btn btn-default">Button</a>
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>
382
410
  </div>
383
411
  </div>
384
412
 
385
413
  </div>
386
414
  </div>
387
- </div>
415
+ </section>
388
416
 
389
417
  <!-- Typography
390
418
  ================================================== -->
391
- <div class="bs-docs-section">
419
+ <section class="bs-docs-section">
392
420
  <div class="row">
393
421
  <div class="col-lg-12">
394
422
  <div class="page-header">
395
- <h1 id="type">Typography</h1>
423
+ <h1 id="typography">Typography</h1>
396
424
  </div>
397
425
  </div>
398
426
  </div>
@@ -402,22 +430,26 @@
402
430
  <div class="row">
403
431
  <div class="col-lg-4">
404
432
  <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>
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>
411
443
  <p class="lead">色は匂へど散りぬるを 我が世誰そ常ならむ。</p>
412
444
  </div>
413
445
  </div>
414
446
  <div class="col-lg-4">
415
447
  <div class="bs-component">
416
- <h2>Example body text</h2>
448
+ <h2>本文サンプル</h2>
417
449
  <p>グスコーブドリは、<a
418
450
  href="#">イーハトーヴ</a>の大きな森のなかに生まれました。おとうさんは、グスコーナドリという名高い木こりで、どんな大きな木でも、まるで赤ん坊を寝かしつけるようにわけなく切ってしまう人でした。</p>
419
451
  <p><small>テキストのこの行は、細字として扱われることを意味します。</small></p>
420
- <p>テキストの次のコードは、 <strong>太字のテキストとしてレンダリングされます</strong>。</p>
452
+ <p>テキストの次のコードは、<strong>太字のテキストとしてレンダリングされます</strong>。</p>
421
453
  <p>テキストの次のコードは、 <em>斜体のテキストとしてレンダリングされます</em>。</p>
422
454
  <p><abbr title="Nippon Telegraph and Telephone Corporation">NTT</abbr>の日本語名称は「日本電信電話」です。</p>
423
455
  </div>
@@ -445,32 +477,45 @@
445
477
  </div>
446
478
  </div>
447
479
  <div class="row">
448
- <div class="col-lg-6">
480
+ <div class="col-lg-4">
449
481
  <div class="bs-component">
450
- <blockquote>
451
- <p>
482
+ <blockquote class="blockquote">
483
+ <p class="mb-0">
452
484
  BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
453
485
  </p>
454
- <small>出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite></small>
486
+ <footer class="blockquote-footer">出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite>
487
+ </footer>
455
488
  </blockquote>
456
489
  </div>
457
490
  </div>
458
- <div class="col-lg-6">
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">
459
503
  <div class="bs-component">
460
- <blockquote class="pull-right">
461
- <p>
504
+ <blockquote class="blockquote text-right">
505
+ <p class="mb-0">
462
506
  BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
463
507
  </p>
464
- <small>出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite></small>
508
+ <footer class="blockquote-footer">出典 <cite title="Bootstrap - Wikipedia">Bootstrap - Wikipedia</cite>
509
+ </footer>
465
510
  </blockquote>
466
511
  </div>
467
512
  </div>
468
513
  </div>
469
- </div>
514
+ </section>
470
515
 
471
516
  <!-- Tables
472
517
  ================================================== -->
473
- <div class="bs-docs-section">
518
+ <section class="bs-docs-section">
474
519
 
475
520
  <div class="row">
476
521
  <div class="col-lg-12">
@@ -479,68 +524,86 @@
479
524
  </div>
480
525
 
481
526
  <div class="bs-component">
482
- <table class="table table-striped table-hover ">
527
+ <table class="table table-hover">
483
528
  <thead>
484
529
  <tr>
485
- <th>#</th>
486
- <th>カラムのタイトル</th>
487
- <th>カラムのタイトル</th>
488
- <th>カラムのタイトル</th>
530
+ <th scope="col">Type</th>
531
+ <th scope="col">名前</th>
532
+ <th scope="col">誕生日</th>
533
+ <th scope="col">血液型</th>
489
534
  </tr>
490
535
  </thead>
491
536
  <tbody>
492
- <tr>
493
- <td>1</td>
494
- <td>カラムの内容</td>
495
- <td>カラムの内容</td>
496
- <td>カラムの内容</td>
537
+ <tr class="table-active">
538
+ <th scope="row">Active</th>
539
+ <td>高坂穂乃果</td>
540
+ <td>8月3日(獅子座)</td>
541
+ <td>O型</td>
497
542
  </tr>
498
543
  <tr>
499
- <td>2</td>
500
- <td>カラムの内容</td>
501
- <td>カラムの内容</td>
502
- <td>カラムの内容</td>
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>
503
560
  </tr>
504
- <tr class="info">
505
- <td>3</td>
506
- <td>カラムの内容</td>
507
- <td>カラムの内容</td>
508
- <td>カラムの内容</td>
561
+ <tr class="table-success">
562
+ <th scope="row">Success</th>
563
+ <td>小泉花陽</td>
564
+ <td>1月17日(山羊座)</td>
565
+ <td>B型</td>
509
566
  </tr>
510
- <tr class="success">
511
- <td>4</td>
512
- <td>カラムの内容</td>
513
- <td>カラムの内容</td>
514
- <td>カラムの内容</td>
567
+ <tr class="table-danger">
568
+ <th scope="row">Danger</th>
569
+ <td>西木野真姫</td>
570
+ <td>4月19日(牡羊座)</td>
571
+ <td>AB型</td>
515
572
  </tr>
516
- <tr class="danger">
517
- <td>5</td>
518
- <td>カラムの内容</td>
519
- <td>カラムの内容</td>
520
- <td>カラムの内容</td>
573
+ <tr class="table-warning">
574
+ <th scope="row">Warning</th>
575
+ <td>星空凛</td>
576
+ <td>11月1日(蠍座)</td>
577
+ <td>A型</td>
521
578
  </tr>
522
- <tr class="warning">
523
- <td>6</td>
524
- <td>カラムの内容</td>
525
- <td>カラムの内容</td>
526
- <td>カラムの内容</td>
579
+ <tr class="table-info">
580
+ <th scope="row">Info</th>
581
+ <td>絢瀬絵里</td>
582
+ <td>10月21日(天秤座)</td>
583
+ <td>B型</td>
527
584
  </tr>
528
- <tr class="active">
529
- <td>7</td>
530
- <td>カラムの内容</td>
531
- <td>カラムの内容</td>
532
- <td>カラムの内容</td>
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>
533
596
  </tr>
534
597
  </tbody>
535
598
  </table>
536
599
  </div><!-- /example -->
537
600
  </div>
538
601
  </div>
539
- </div>
602
+ </section>
540
603
 
541
604
  <!-- Forms
542
605
  ================================================== -->
543
- <div class="bs-docs-section">
606
+ <section class="bs-docs-section">
544
607
  <div class="row">
545
608
  <div class="col-lg-12">
546
609
  <div class="page-header">
@@ -551,173 +614,271 @@
551
614
 
552
615
  <div class="row">
553
616
  <div class="col-lg-6">
554
- <div class="well bs-component">
555
- <form class="form-horizontal">
617
+ <div class="bs-component">
618
+ <form>
556
619
  <fieldset>
557
- <legend>説明</legend>
558
- <div class="form-group">
559
- <label for="inputEmail" class="col-lg-2 control-label">Email</label>
560
- <div class="col-lg-10">
561
- <input type="text" class="form-control" id="inputEmail" placeholder="Email">
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">
562
625
  </div>
563
626
  </div>
564
627
  <div class="form-group">
565
- <label for="inputPassword" class="col-lg-2 control-label">Password</label>
566
- <div class="col-lg-10">
567
- <input type="password" class="form-control" id="inputPassword" placeholder="Password">
568
- <div class="checkbox">
569
- <label>
570
- <input type="checkbox"> Checkbox
571
- </label>
572
- </div>
573
- </div>
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>
574
632
  </div>
575
633
  <div class="form-group">
576
- <label for="textArea" class="col-lg-2 control-label">Textarea</label>
577
- <div class="col-lg-10">
578
- <textarea class="form-control" rows="3" id="textArea"></textarea>
579
- <span class="help-block">ヘルプテキストは長くすることで1行を超えて分割されるようになります。</span>
580
- </div>
634
+ <label for="exampleInputPassword1">パスワード</label>
635
+ <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
581
636
  </div>
582
637
  <div class="form-group">
583
- <label class="col-lg-2 control-label">Radios</label>
584
- <div class="col-lg-10">
585
- <div class="radio">
586
- <label>
587
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
588
- こっち
589
- </label>
590
- </div>
591
- <div class="radio">
592
- <label>
593
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
594
- あっち
595
- </label>
596
- </div>
597
- </div>
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>
598
650
  </div>
599
651
  <div class="form-group">
600
- <label for="select" class="col-lg-2 control-label">Selects</label>
601
- <div class="col-lg-10">
602
- <select class="form-control" id="select">
603
- <option>1</option>
604
- <option>2</option>
605
- <option>3</option>
606
- <option>4</option>
607
- <option>5</option>
608
- </select>
609
- <br>
610
- <select multiple="" class="form-control">
611
- <option>1</option>
612
- <option>2</option>
613
- <option>3</option>
614
- <option>4</option>
615
- <option>5</option>
616
- </select>
617
- </div>
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>
618
664
  </div>
619
665
  <div class="form-group">
620
- <div class="col-lg-10 col-lg-offset-2">
621
- <button type="reset" class="btn btn-default">キャンセル</button>
622
- <button type="submit" class="btn btn-primary">送信</button>
623
- </div>
666
+ <label for="exampleTextarea">テキストエリア</label>
667
+ <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
624
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>
625
715
  </fieldset>
626
716
  </form>
627
717
  </div>
628
718
  </div>
629
- <div class="col-lg-4 col-lg-offset-1">
719
+ <div class="col-lg-4 offset-lg-1">
630
720
 
631
721
  <form class="bs-component">
632
722
  <div class="form-group">
633
- <label class="control-label" for="focusedInput">Focused input</label>
634
- <input class="form-control" id="focusedInput" type="text" value="This is focused...">
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>
635
727
  </div>
636
728
 
637
729
  <div class="form-group">
638
- <label class="control-label" for="disabledInput">Disabled input</label>
639
- <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
640
- </div>
641
-
642
- <div class="form-group has-warning">
643
- <label class="control-label" for="inputWarning">Input warning</label>
644
- <input type="text" class="form-control" id="inputWarning">
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>
645
734
  </div>
646
735
 
647
- <div class="form-group has-error">
648
- <label class="control-label" for="inputError">Input error</label>
649
- <input type="text" class="form-control" id="inputError">
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>
650
740
  </div>
651
741
 
652
- <div class="form-group has-success">
653
- <label class="control-label" for="inputSuccess">Input success</label>
654
- <input type="text" class="form-control" id="inputSuccess">
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>
655
746
  </div>
656
747
 
657
748
  <div class="form-group">
658
- <label class="control-label" for="inputLarge">Large input</label>
659
- <input class="form-control input-lg" type="text" id="inputLarge">
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">
660
751
  </div>
661
752
 
662
753
  <div class="form-group">
663
- <label class="control-label" for="inputDefault">Default input</label>
664
- <input type="text" class="form-control" id="inputDefault">
754
+ <label class="col-form-label" for="inputDefault">通常の入力欄</label>
755
+ <input type="text" class="form-control" placeholder="Default input" id="inputDefault">
665
756
  </div>
666
757
 
667
758
  <div class="form-group">
668
- <label class="control-label" for="inputSmall">Small input</label>
669
- <input class="form-control input-sm" type="text" id="inputSmall">
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">
670
761
  </div>
671
762
 
672
763
  <div class="form-group">
673
764
  <label class="control-label">Input addons</label>
674
- <div class="input-group">
675
- <span class="input-group-addon">$</span>
676
- <input type="text" class="form-control">
677
- <span class="input-group-btn">
678
- <button class="btn btn-default" type="button">Button</button>
679
- </span>
765
+ <div class="form-group">
766
+ <div class="input-group mb-3">
767
+ <div class="input-group-prepend">
768
+ <span class="input-group-text">&yen;</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>
680
775
  </div>
681
776
  </div>
682
777
  </form>
683
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
+
684
838
  </div>
685
839
  </div>
686
- </div>
840
+ </section>
687
841
 
688
842
  <!-- Navs
689
843
  ================================================== -->
690
- <div class="bs-docs-section">
844
+ <section class="bs-docs-section">
691
845
 
692
846
  <div class="row">
693
847
  <div class="col-lg-12">
694
848
  <div class="page-header">
695
- <h1 id="nav">Navs</h1>
849
+ <h1 id="navs">Navs</h1>
696
850
  </div>
697
851
  </div>
698
852
  </div>
699
853
 
700
- <div class="row">
701
- <div class="col-lg-4">
854
+ <div class="row" style="margin-bottom: 2rem;">
855
+ <div class="col-lg-6">
702
856
  <h2 id="nav-tabs">Tabs</h2>
703
857
  <div class="bs-component">
704
858
  <ul class="nav nav-tabs">
705
- <li class="active"><a href="#home" data-toggle="tab">坊っちゃん</a></li>
706
- <li><a href="#profile" data-toggle="tab">愚見数則</a></li>
707
- <li class="disabled"><a>Disabled</a></li>
708
- <li class="dropdown">
709
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
710
- 宮沢賢治 <span class="caret"></span>
711
- </a>
712
- <ul class="dropdown-menu">
713
- <li><a href="#dropdown1" data-toggle="tab">雨ニモマケズ</a></li>
714
- <li class="divider"></li>
715
- <li><a href="#dropdown2" data-toggle="tab">春と修羅(序)</a></li>
716
- </ul>
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>
717
878
  </li>
718
879
  </ul>
719
880
  <div id="myTabContent" class="tab-content">
720
- <div class="tab-pane fade active in" id="home">
881
+ <div class="tab-pane fade show active" id="home">
721
882
  <p>
722
883
  親讓りの無鐵砲で小供の時から損ばかりして居る。小學校に居る時分學校の二階から飛び降りて一週間程腰を拔かした事がある。なぜそんな無闇（むやみ）をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出して居たら、同級生の一人が冗談に、いくら威張つても、そこから飛び降りる事は出來まい。弱虫やーい。と囃（はや）したからである。小使（こづかひ）に負ぶさつて歸つて來た時、おやぢが大きな眼をして二階位（にかいぐらゐ）から飛び降りて腰を拔かす奴があるかと云つたから、此次（このつぎ）は拔かさずに飛んで見せますと答へた。
723
884
  </p>
@@ -735,130 +896,186 @@
735
896
  <p>わたくしといふ現象は 假定された有機交流電燈の ひとつの青い照明です （あらゆる透明な幽霊の複合体） 風景やみんなといっしょに せはしくせはしく明滅しながら いかにもたしかにともりつづける 因果交流電燈の
736
897
  ひとつの青い照明です （ひかりはたもち、その電燈は失はれ）</p>
737
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>
738
913
  </div>
739
914
  </div>
740
915
  </div>
741
- <div class="col-lg-4">
916
+
917
+ <div class="col-lg-6">
742
918
  <h2 id="nav-pills">Pills</h2>
743
919
  <div class="bs-component">
744
920
  <ul class="nav nav-pills">
745
- <li class="active"><a href="#">Home</a></li>
746
- <li><a href="#">Profile</a></li>
747
- <li class="disabled"><a href="#">Disabled</a></li>
748
- <li class="dropdown">
749
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
750
- Dropdown <span class="caret"></span>
751
- </a>
752
- <ul class="dropdown-menu">
753
- <li><a href="#">Action</a></li>
754
- <li><a href="#">Another action</a></li>
755
- <li><a href="#">Something else here</a></li>
756
- <li class="divider"></li>
757
- <li><a href="#">Separated link</a></li>
758
- </ul>
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>
759
940
  </li>
760
941
  </ul>
761
942
  </div>
762
943
  <br>
763
944
  <div class="bs-component">
764
- <ul class="nav nav-pills nav-stacked">
765
- <li class="active"><a href="#">Home</a></li>
766
- <li><a href="#">Profile</a></li>
767
- <li class="disabled"><a href="#">Disabled</a></li>
768
- <li class="dropdown">
769
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
770
- Dropdown <span class="caret"></span>
771
- </a>
772
- <ul class="dropdown-menu">
773
- <li><a href="#">Action</a></li>
774
- <li><a href="#">Another action</a></li>
775
- <li><a href="#">Something else here</a></li>
776
- <li class="divider"></li>
777
- <li><a href="#">Separated link</a></li>
778
- </ul>
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>
779
965
  </li>
780
966
  </ul>
781
967
  </div>
782
968
  </div>
783
- <div class="col-lg-4">
969
+ </div>
970
+
971
+ <div class="row">
972
+ <div class="col-lg-6">
784
973
  <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
785
974
  <div class="bs-component">
786
- <ul class="breadcrumb">
787
- <li class="active">Home</li>
788
- </ul>
789
-
790
- <ul class="breadcrumb">
791
- <li><a href="#">Home</a></li>
792
- <li class="active">Library</li>
793
- </ul>
794
-
795
- <ul class="breadcrumb">
796
- <li><a href="#">Home</a></li>
797
- <li><a href="#">Library</a></li>
798
- <li class="active">Data</li>
799
- </ul>
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>
800
987
  </div>
801
-
802
988
  </div>
803
- </div>
804
989
 
805
-
806
- <div class="row">
807
- <div class="col-lg-4">
990
+ <div class="col-lg-6">
808
991
  <h2 id="pagination">Pagination</h2>
809
992
  <div class="bs-component">
810
- <ul class="pagination">
811
- <li class="disabled"><a href="#">&laquo;</a></li>
812
- <li class="active"><a href="#">1</a></li>
813
- <li><a href="#">2</a></li>
814
- <li><a href="#">3</a></li>
815
- <li><a href="#">4</a></li>
816
- <li><a href="#">5</a></li>
817
- <li><a href="#">&raquo;</a></li>
818
- </ul>
993
+ <div>
994
+ <ul class="pagination">
995
+ <li class="page-item disabled">
996
+ <a class="page-link" href="#">&laquo;</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="#">&raquo;</a>
1015
+ </li>
1016
+ </ul>
1017
+ </div>
819
1018
 
820
- <ul class="pagination pagination-lg">
821
- <li class="disabled"><a href="#">&laquo;</a></li>
822
- <li class="active"><a href="#">1</a></li>
823
- <li><a href="#">2</a></li>
824
- <li><a href="#">3</a></li>
825
- <li><a href="#">&raquo;</a></li>
826
- </ul>
1019
+ <div>
1020
+ <ul class="pagination pagination-lg">
1021
+ <li class="page-item disabled">
1022
+ <a class="page-link" href="#">&laquo;</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="#">&raquo;</a>
1041
+ </li>
1042
+ </ul>
1043
+ </div>
827
1044
 
828
- <ul class="pagination pagination-sm">
829
- <li class="disabled"><a href="#">&laquo;</a></li>
830
- <li class="active"><a href="#">1</a></li>
831
- <li><a href="#">2</a></li>
832
- <li><a href="#">3</a></li>
833
- <li><a href="#">4</a></li>
834
- <li><a href="#">5</a></li>
835
- <li><a href="#">&raquo;</a></li>
836
- </ul>
837
- </div>
838
- </div>
839
- <div class="col-lg-4">
840
- <h2 id="pager">Pager</h2>
841
- <div class="bs-component">
842
- <ul class="pager">
843
- <li><a href="#">Previous</a></li>
844
- <li><a href="#">Next</a></li>
845
- </ul>
1045
+ <div>
1046
+ <ul class="pagination pagination-sm">
1047
+ <li class="page-item disabled">
1048
+ <a class="page-link" href="#">&laquo;</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="#">&raquo;</a>
1067
+ </li>
1068
+ </ul>
1069
+ </div>
846
1070
 
847
- <ul class="pager">
848
- <li class="previous disabled"><a href="#">&larr; Older</a></li>
849
- <li class="next"><a href="#">Newer &rarr;</a></li>
850
- </ul>
851
1071
  </div>
852
1072
  </div>
853
- <div class="col-lg-4">
854
-
855
- </div>
856
1073
  </div>
857
- </div>
1074
+ </section>
858
1075
 
859
1076
  <!-- Indicators
860
1077
  ================================================== -->
861
- <div class="bs-docs-section">
1078
+ <section class="bs-docs-section">
862
1079
 
863
1080
  <div class="row">
864
1081
  <div class="col-lg-12">
@@ -874,8 +1091,9 @@
874
1091
  <div class="bs-component">
875
1092
  <div class="alert alert-dismissible alert-warning">
876
1093
  <button type="button" class="close" data-dismiss="alert">&times;</button>
877
- <h4>Warning!</h4>
878
- <p>要求された処理は正常に完了できませんでした。このエラーについての詳細は<a href="#" class="alert-link">こちらのドキュメントを参照してください</a>.</p>
1094
+ <h4 class="alert-heading">Warning!</h4>
1095
+ <p class="mb-0">要求された処理は正常に完了できませんでした。このエラーについての詳細は<a href="#" class="alert-link">こちらのドキュメントを参照してください</a>。
1096
+ </p>
879
1097
  </div>
880
1098
  </div>
881
1099
  </div>
@@ -885,7 +1103,7 @@
885
1103
  <div class="bs-component">
886
1104
  <div class="alert alert-dismissible alert-danger">
887
1105
  <button type="button" class="close" data-dismiss="alert">&times;</button>
888
- <strong>エラー</strong> <a href="#" class="alert-link">タイトルを入力し</a>，再度投稿を行って下さい。
1106
+ <strong>エラー</strong> <a href="#" class="alert-link">いくつかの項目を見直して</a> 再度投稿してください
889
1107
  </div>
890
1108
  </div>
891
1109
  </div>
@@ -893,7 +1111,7 @@
893
1111
  <div class="bs-component">
894
1112
  <div class="alert alert-dismissible alert-success">
895
1113
  <button type="button" class="close" data-dismiss="alert">&times;</button>
896
- <strong>完了</strong> 記事「<a href="#" class="alert-link">国立音ノ木坂学院について</a>」を公開しました。
1114
+ <strong>完了</strong> 記事「<a href="#" class="alert-link">国立音ノ木坂学院について</a>」を公開しました
897
1115
  </div>
898
1116
  </div>
899
1117
  </div>
@@ -901,124 +1119,220 @@
901
1119
  <div class="bs-component">
902
1120
  <div class="alert alert-dismissible alert-info">
903
1121
  <button type="button" class="close" data-dismiss="alert">&times;</button>
904
- <strong>Tips</strong> この<a href="#" class="alert-link">アラートは気にする必要がありますが</a>, そんなに重要ではありません。
1122
+ <strong>Tips</strong> 生徒手帳には<a href="#" class="alert-link">講堂の使用には許可が必要</a>と書いてあります
905
1123
  </div>
906
1124
  </div>
907
1125
  </div>
908
1126
  </div>
909
- <div class="row">
910
- <div class="col-lg-4">
911
- <h2>Labels</h2>
912
- <div class="bs-component" style="margin-bottom: 40px;">
913
- <span class="label label-default">Default</span>
914
- <span class="label label-primary">Primary</span>
915
- <span class="label label-success">Success</span>
916
- <span class="label label-warning">Warning</span>
917
- <span class="label label-danger">Danger</span>
918
- <span class="label label-info">Info</span>
919
- </div>
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>
920
1138
  </div>
921
- <div class="col-lg-4">
922
- <h2>Badges</h2>
923
- <div class="bs-component">
924
- <ul class="nav nav-pills">
925
- <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
926
- <li><a href="#">Profile <span class="badge"></span></a></li>
927
- <li><a href="#">Messages <span class="badge">3</span></a></li>
928
- </ul>
929
- </div>
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>
930
1148
  </div>
931
1149
  </div>
932
- </div>
1150
+ </section>
933
1151
 
934
1152
  <!-- Progress bars
935
1153
  ================================================== -->
936
- <div class="bs-docs-section">
1154
+ <section class="bs-docs-section">
937
1155
 
938
1156
  <div class="row">
939
1157
  <div class="col-lg-12">
940
1158
  <div class="page-header">
941
- <h1 id="progress">Progress bars</h1>
1159
+ <h1 id="progress">Progress</h1>
942
1160
  </div>
943
1161
 
944
1162
  <h3 id="progress-basic">Basic</h3>
945
1163
  <div class="bs-component">
946
1164
  <div class="progress">
947
- <div class="progress-bar" style="width: 60%;"></div>
1165
+ <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
1166
+ aria-valuemax="100"></div>
948
1167
  </div>
949
1168
  </div>
950
1169
 
951
1170
  <h3 id="progress-alternatives">Contextual alternatives</h3>
952
1171
  <div class="bs-component">
953
1172
  <div class="progress">
954
- <div class="progress-bar progress-bar-info" style="width: 20%"></div>
1173
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25"
1174
+ aria-valuemin="0" aria-valuemax="100"></div>
955
1175
  </div>
956
-
957
1176
  <div class="progress">
958
- <div class="progress-bar progress-bar-success" style="width: 40%"></div>
1177
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50"
1178
+ aria-valuemin="0" aria-valuemax="100"></div>
959
1179
  </div>
960
-
961
1180
  <div class="progress">
962
- <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
1181
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75"
1182
+ aria-valuemin="0" aria-valuemax="100"></div>
963
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>
964
1189
 
1190
+ <h3 id="progress-multiple">Multiple bars</h3>
1191
+ <div class="bs-component">
965
1192
  <div class="progress">
966
- <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
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>
967
1199
  </div>
968
1200
  </div>
969
1201
 
970
1202
  <h3 id="progress-striped">Striped</h3>
971
1203
  <div class="bs-component">
972
- <div class="progress progress-striped">
973
- <div class="progress-bar progress-bar-info" style="width: 20%"></div>
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>
974
1207
  </div>
975
-
976
- <div class="progress progress-striped">
977
- <div class="progress-bar progress-bar-success" style="width: 40%"></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>
978
1211
  </div>
979
-
980
- <div class="progress progress-striped">
981
- <div class="progress-bar progress-bar-warning" style="width: 60%"></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>
982
1215
  </div>
983
-
984
- <div class="progress progress-striped">
985
- <div class="progress-bar progress-bar-danger" style="width: 80%"></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>
986
1223
  </div>
987
1224
  </div>
988
1225
 
989
1226
  <h3 id="progress-animated">Animated</h3>
990
1227
  <div class="bs-component">
991
- <div class="progress progress-striped active">
992
- <div class="progress-bar" style="width: 45%"></div>
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>
993
1231
  </div>
994
1232
  </div>
1233
+ </div>
1234
+ </div>
1235
+ </section>
995
1236
 
996
- <h3 id="progress-stacked">Stacked</h3>
997
- <div class="bs-component">
998
- <div class="progress">
999
- <div class="progress-bar progress-bar-success" style="width: 35%"></div>
1000
- <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
1001
- <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
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>
1002
1312
  </div>
1003
1313
  </div>
1004
1314
  </div>
1005
1315
  </div>
1006
- </div>
1316
+ </section>
1007
1317
 
1008
1318
  <!-- Containers
1009
1319
  ================================================== -->
1010
- <div class="bs-docs-section">
1320
+ <section class="bs-docs-section">
1011
1321
 
1012
1322
  <div class="row">
1013
1323
  <div class="col-lg-12">
1014
1324
  <div class="page-header">
1015
- <h1 id="container">Containers</h1>
1325
+ <h1 id="containers">Containers</h1>
1016
1326
  </div>
1017
1327
  <div class="bs-component">
1018
1328
  <div class="jumbotron">
1019
- <h1>方丈記</h1>
1020
- <p>行く川のながれは絶えずして、しかも本の水にあらず。よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。世の中にある人とすみかと、またかくの如し。</p>
1021
- <p><a class="btn btn-primary btn-lg">方丈記について</a></p>
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>
1022
1336
  </div>
1023
1337
  </div>
1024
1338
  </div>
@@ -1030,21 +1344,22 @@
1030
1344
  <h2>List groups</h2>
1031
1345
  </div>
1032
1346
  </div>
1347
+
1033
1348
  <div class="row">
1034
1349
  <div class="col-lg-4">
1035
1350
  <div class="bs-component">
1036
1351
  <ul class="list-group">
1037
- <li class="list-group-item">
1038
- <span class="badge">14</span>
1352
+ <li class="list-group-item d-flex justify-content-between align-items-center">
1039
1353
  夢なき夢は夢じゃない
1354
+ <span class="badge badge-primary badge-pill">14</span>
1040
1355
  </li>
1041
- <li class="list-group-item">
1042
- <span class="badge">2</span>
1356
+ <li class="list-group-item d-flex justify-content-between align-items-center">
1043
1357
  Anemone heart
1358
+ <span class="badge badge-primary badge-pill">2</span>
1044
1359
  </li>
1045
- <li class="list-group-item">
1046
- <span class="badge">1</span>
1360
+ <li class="list-group-item d-flex justify-content-between align-items-center">
1047
1361
  なわとび
1362
+ <span class="badge badge-primary badge-pill">1</span>
1048
1363
  </li>
1049
1364
  </ul>
1050
1365
  </div>
@@ -1052,12 +1367,14 @@
1052
1367
  <div class="col-lg-4">
1053
1368
  <div class="bs-component">
1054
1369
  <div class="list-group">
1055
- <a href="#" class="list-group-item active">
1370
+ <a href="#" class="list-group-item list-group-item-action active">
1056
1371
  Beat in Angel
1057
1372
  </a>
1058
- <a href="#" class="list-group-item">にこぷり♡女子道
1373
+ <a href="#" class="list-group-item list-group-item-action">
1374
+ にこぷり&hearts;女子道
1059
1375
  </a>
1060
- <a href="#" class="list-group-item">硝子の花園
1376
+ <a href="#" class="list-group-item list-group-item-action disabled">
1377
+ 硝子の花園
1061
1378
  </a>
1062
1379
  </div>
1063
1380
  </div>
@@ -1065,135 +1382,221 @@
1065
1382
  <div class="col-lg-4">
1066
1383
  <div class="bs-component">
1067
1384
  <div class="list-group">
1068
- <a href="#" class="list-group-item">
1069
- <h4 class="list-group-item-heading">高坂 穂乃果</h4>
1070
- <p class="list-group-item-text">μ'sの発起人。いつも笑顔で、行動力に満ちている。</p>
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>
1071
1393
  </a>
1072
- <a href="#" class="list-group-item">
1073
- <h4 class="list-group-item-heading">絢瀬 絵里</h4>
1074
- <p class="list-group-item-text">生徒会長。才色兼備のロシア系クォーター。</p>
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>
1075
1401
  </a>
1076
1402
  </div>
1077
1403
  </div>
1078
1404
  </div>
1079
1405
  </div>
1080
1406
 
1081
-
1082
1407
  <div class="row">
1083
1408
  <div class="col-lg-12">
1084
- <h2>Panels</h2>
1409
+ <h2>Cards</h2>
1085
1410
  </div>
1086
1411
  </div>
1412
+
1087
1413
  <div class="row">
1088
1414
  <div class="col-lg-4">
1089
1415
  <div class="bs-component">
1090
- <div class="panel panel-default">
1091
- <div class="panel-body">
1092
- 普通のパネル
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>
1093
1422
  </div>
1094
1423
  </div>
1095
-
1096
- <div class="panel panel-default">
1097
- <div class="panel-heading">パネルの見出し</div>
1098
- <div class="panel-body">
1099
- パネルの内容
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>
1100
1429
  </div>
1101
1430
  </div>
1102
-
1103
- <div class="panel panel-default">
1104
- <div class="panel-body">
1105
- パネルの内容
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>
1106
1437
  </div>
1107
- <div class="panel-footer">パネルのフッター</div>
1108
1438
  </div>
1109
- </div>
1110
- </div>
1111
- <div class="col-lg-4">
1112
- <div class="bs-component">
1113
- <div class="panel panel-primary">
1114
- <div class="panel-heading">
1115
- <h3 class="panel-title">パネルの見出し(Primary)</h3>
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>
1116
1444
  </div>
1117
- <div class="panel-body">
1118
- パネルの内容
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>
1119
1451
  </div>
1120
1452
  </div>
1121
-
1122
- <div class="panel panel-success">
1123
- <div class="panel-heading">
1124
- <h3 class="panel-title">パネルの見出し(Success)</h3>
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>
1125
1458
  </div>
1126
- <div class="panel-body">
1127
- パネルの内容
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>
1128
1465
  </div>
1129
1466
  </div>
1130
-
1131
- <div class="panel panel-warning">
1132
- <div class="panel-heading">
1133
- <h3 class="panel-title">パネルの見出し(Warning)</h3>
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>
1134
1472
  </div>
1135
- <div class="panel-body">
1136
- パネルの内容
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>
1137
1479
  </div>
1138
1480
  </div>
1139
1481
  </div>
1140
1482
  </div>
1141
1483
  <div class="col-lg-4">
1142
1484
  <div class="bs-component">
1143
- <div class="panel panel-danger">
1144
- <div class="panel-heading">
1145
- <h3 class="panel-title">パネルの見出し(Danger)</h3>
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>
1146
1491
  </div>
1147
- <div class="panel-body">
1148
- パネルの内容
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>
1149
1498
  </div>
1150
1499
  </div>
1151
-
1152
- <div class="panel panel-info">
1153
- <div class="panel-heading">
1154
- <h3 class="panel-title">パネルの見出し(Info)</h3>
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>
1155
1506
  </div>
1156
- <div class="panel-body">
1157
- パネルの内容
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>
1158
1513
  </div>
1159
1514
  </div>
1160
- </div>
1161
- </div>
1162
- </div>
1163
-
1164
- <div class="row">
1165
- <div class="col-lg-12">
1166
- <h2>Wells</h2>
1167
- </div>
1168
- </div>
1169
- <div class="row">
1170
- <div class="col-lg-4">
1171
- <div class="bs-component">
1172
- <div class="well">
1173
- いい感じの枠
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>
1174
1521
  </div>
1175
- </div>
1176
- </div>
1177
- <div class="col-lg-4">
1178
- <div class="bs-component">
1179
- <div class="well well-sm">
1180
- いい感じの枠(小さめ)
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>
1181
1549
  </div>
1182
1550
  </div>
1183
1551
  </div>
1552
+
1184
1553
  <div class="col-lg-4">
1185
1554
  <div class="bs-component">
1186
- <div class="well well-lg">
1187
- いい感じの枠(大きめ)
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&amp;controls=0&amp;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>
1188
1590
  </div>
1189
1591
  </div>
1190
1592
  </div>
1191
1593
  </div>
1192
- </div>
1594
+
1595
+ </section>
1193
1596
 
1194
1597
  <!-- Dialogs
1195
1598
  ================================================== -->
1196
- <div class="bs-docs-section">
1599
+ <section class="bs-docs-section">
1197
1600
 
1198
1601
  <div class="row">
1199
1602
  <div class="col-lg-12">
@@ -1207,58 +1610,81 @@
1207
1610
  <h2>Modals</h2>
1208
1611
  <div class="bs-component">
1209
1612
  <div class="modal">
1210
- <div class="modal-dialog">
1613
+ <div class="modal-dialog" role="document">
1211
1614
  <div class="modal-content">
1212
1615
  <div class="modal-header">
1213
- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1214
- <h4 class="modal-title">タイトル</h4>
1616
+ <h5 class="modal-title">タイトル</h5>
1617
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1618
+ <span aria-hidden="true">&times;</span>
1619
+ </button>
1215
1620
  </div>
1216
1621
  <div class="modal-body">
1217
- <p>サンプルテキスト</p>
1622
+ <p contenteditable>サンプルテキストサンプルテキストサンプルテキスト</p>
1218
1623
  </div>
1219
1624
  <div class="modal-footer">
1220
- <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
1221
- <button type="button" class="btn btn-primary">保存</button>
1625
+ <button type="button" class="btn btn-primary">変更を保存</button>
1626
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
1222
1627
  </div>
1223
1628
  </div>
1224
1629
  </div>
1225
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">&times;</span>
1642
+ </button>
1643
+ </div>
1644
+ <div class="toast-body">
1645
+ これはToast型通知メッセージのサンプルです。
1646
+ </div>
1647
+ </div>
1648
+ </div>
1226
1649
  </div>
1650
+
1227
1651
  </div>
1228
1652
  <div class="col-lg-6">
1229
1653
  <h2>Popovers</h2>
1230
- <div class="bs-component">
1231
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
1232
- data-placement="left" data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Left</button>
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>
1233
1657
 
1234
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top"
1235
- data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Top</button>
1658
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1659
+ data-placement="top" data-content="本文サンプル本文サンプル本文サンプル">Top</button>
1236
1660
 
1237
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
1238
- data-placement="bottom" data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Bottom</button>
1661
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1662
+ data-placement="bottom" data-content="本文サンプル本文サンプル本文サンプル">Bottom</button>
1239
1663
 
1240
- <button type="button" class="btn btn-default" data-container="body" data-toggle="popover"
1241
- data-placement="right" data-content="やうやう白くなりゆく山際、少しあかりて、紫だちたる雲の細くたなびきたる。">Right</button>
1664
+ <button type="button" class="btn btn-secondary" title="タイトル" data-container="body" data-toggle="popover"
1665
+ data-placement="right" data-content="本文サンプル本文サンプル本文サンプル">Right</button>
1242
1666
  </div>
1243
1667
  <h2>Tooltips</h2>
1244
1668
  <div class="bs-component">
1245
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title=""
1246
- data-original-title="ツールチップだよ left">Left</button>
1669
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left"
1670
+ title="左方向にでるTooltip">Left</button>
1247
1671
 
1248
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title=""
1249
- data-original-title="ツールチップだよ top">Top</button>
1672
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
1673
+ title="上方向にでるTooltip">Top</button>
1250
1674
 
1251
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title=""
1252
- data-original-title="ツールチップだよ bottom">Bottom</button>
1675
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom"
1676
+ title="下方向にでるTooltip">Bottom</button>
1253
1677
 
1254
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title=""
1255
- data-original-title="ツールチップだよ right">Right</button>
1678
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right"
1679
+ title="右方向にでるTooltip">Right</button>
1256
1680
  </div>
1257
1681
  </div>
1258
1682
  </div>
1259
- </div>
1683
+ </section>
1684
+
1260
1685
  </div>
1261
1686
 
1687
+
1262
1688
  <script type="text/javascript">
1263
1689
  $('.bs-component [data-toggle="popover"]').popover();
1264
1690
  $('.bs-component [data-toggle="tooltip"]').tooltip();