質問編集履歴

1

HTML追記、Bootstrapバージョン追記

2019/02/25 22:18

投稿

iyore888
iyore888

スコア40

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,162 @@
90
90
 
91
91
  ```
92
92
 
93
+ #ブラウザでのHTML表示
94
+
95
+ ```HTML
96
+
97
+ <div class="container">
98
+
99
+ <header class="navbar navbar-fixed-top navbar-dar" style="background-color: #50aba9;">
100
+
101
+ <div class="container">
102
+
103
+ <a id="logo" href="/">Band app</a>
104
+
105
+ <nav>
106
+
107
+ <ul class="nav navbar-nav navbar-right">
108
+
109
+ <li>
110
+
111
+ <a class="menu" href="/">
112
+
113
+ <i class="fa fa-home fa-lg"></i> Home
114
+
115
+ </a> </li>
116
+
117
+ <li>
118
+
119
+ <a class="menu" href="/posts/new">
120
+
121
+ <i class="fa fa-comment fa-lg"></i> Post
122
+
123
+ </a> </li>
124
+
125
+ <li class="dropdown">
126
+
127
+ <a href="#" class="dropdown-toggle menu" data-toggle="dropdown">
128
+
129
+ <i class="fa fa-bars fa-lg fa-icon"></i>Menu<b class="caret"></b>
130
+
131
+ </a>
132
+
133
+ <ul class="dropdown-menu">
134
+
135
+ <li>
136
+
137
+ <a class="menu" href="/users">
138
+
139
+ <i class="fa fa-users fa-lg"></i> Users
140
+
141
+ </a> </li>
142
+
143
+ <li>
144
+
145
+ <a class="menu" href="/users/104">
146
+
147
+ <i class="fa fa-file fa-lg"></i> Profile
148
+
149
+ </a> </li>
150
+
151
+ <li>
152
+
153
+ <a class="menu" href="/users/104/edit">
154
+
155
+ <i class="fa fa-edit fa-lg"></i> User-edit
156
+
157
+ </a> </li>
158
+
159
+ <li class="divider"></li>
160
+
161
+ <li>
162
+
163
+ <a class="menu" rel="nofollow" data-method="delete" href="/logout">
164
+
165
+ <i class="fa fa-door-open fa-lg"></i> Log out
166
+
167
+ </a> </li>
168
+
169
+ </ul>
170
+
171
+ </li>
172
+
173
+ </ul>
174
+
175
+ </nav>
176
+
177
+ </div>
178
+
179
+ </header>
180
+
181
+ <div id="myCarousel" class="carousel slide">
182
+
183
+ <ol class="carousel-indicators">
184
+
185
+ <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
186
+
187
+ <li data-target="#myCarousel" data-slide-to="1" class=""></li>
188
+
189
+ <li data-target="#myCarousel" data-slide-to="2" class=""></li>
190
+
191
+ </ol>
192
+
193
+ <!-- Carousel items -->
194
+
195
+ <div class="carousel-inner photo">
196
+
197
+ <div class="item active"><img class="image" src="/assets/band-d33e818289f361d0ee163fbed62a878d7dc217b2262acb88201c800f0edbd7be.jpg" alt="Band"></div>
198
+
199
+ <div class="item"><img class="image" src="/assets/band2-fb8e56d3f2212fa57d618d9929d55b892605e9b8c2a0d2d488d9b3f2140cdee9.jpg" alt="Band2"></div>
200
+
201
+ <div class="item"><img class="image" src="/assets/band3-3cb592ed06f813167b8d149cc3f37604df36139a09d96e0dddaac3d93294fc27.jpg" alt="Band3"></div>
202
+
203
+ </div>
204
+
205
+ <!-- Carousel nav -->
206
+
207
+ <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
208
+
209
+ <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
210
+
211
+ </div>
212
+
213
+
214
+
215
+ <div class="center jumbotron">
216
+
217
+ <h1>Welcome to Band App</h1>
218
+
219
+ <hr class="my-4">
220
+
221
+ <p>メンバーを募集して理想のバンドを組もう!!</p>
222
+
223
+ </div>
224
+
225
+
226
+
227
+ *投稿部分省略
228
+
229
+
230
+
231
+
232
+
233
+ </div>
234
+
235
+
236
+
237
+ ```
238
+
239
+ #Bootstrapバージョン
240
+
241
+ gem 'bootstrap-will_paginate', '1.0.0'
242
+
243
+ gem 'bootstrap-sass', '3.3.7'
244
+
245
+
246
+
247
+
248
+
93
249
  #position: absolute; 適用時
94
250
 
95
251
  ![![イメージ説明](4f17660e10f6c054cf658ebdc18d76da.png)