-
Notifications
You must be signed in to change notification settings - Fork 0
/
notes3.html
544 lines (539 loc) · 19.8 KB
/
notes3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
</head>
<body>
<style>
body {
background-color: lightseagreen;
color: black;
}
</style>
<h1 class="text-center mt-4">
<b><u>Bootstrap JavaScript Components</u></b>
</h1>
<div class="container mt-4">
<h2 class="text-center mb-4">
The next section goes over Components that use JavaScript
</h2>
<p class="h3">
Being a JavaScript expert isn't required here, but having a basic
understanding of JavaScript will help
</p>
<p class="h3">
Everything in this section will involve JavaScript, and we need JS for a
lot of our Components.
</p>
</div>
<div class="container mt-4">
<h2 class="text-center display-3 mb-4">
<b><u>Alerts</u></b>
</h2>
<p class="h3">
Provide contextual feedback messages for typical user actions with the
handful of available and flexible alert messages.
</p>
<p class="h3">
Let's start with a basic alert, remember to set role as well, for
accessibility purposes
</p>
<div class="alert alert-success" role="alert">
Congrats! Your changes were saved.
</div>
<div class="alert alert-danger" role="alert">
Watch out! Your changes have not been saved
</div>
<p class="h3 mt-2">We can also add links inside:</p>
<div class="alert alert-info" role="alert">
Read more
<a href="" class="alert-link">Here</a>
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>You did it!</p>
<hr />
You've completed the section successfully!
</div>
</div>
<div class="container mt-5">
<h2 class="text-center mt-4 mb-4">Making alerts dismissible</h2>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Wait!</strong> You should check in on some of the inputs below!
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<p class="h3">
So above, inside the button, we have 'data-dismiss="alert"', that's the
hook for our JavaScript that's behind the scenes, that makes it so when
you click, it dissappears
</p>
</div>
<div class="container">
<h2 class="d-flex justify-content-center display-3">
<b><u>Tooltips</u></b>
</h2>
<p class="h3 mt-3">
Tooltips are relatively simple, and they go along with another component
we'll go over next called 'pop-overs', they're very similar
</p>
<p class="h3 mt-4">
So a tooltip is creating a block of text that appears when your cursor
hovers over a specified section, and we can display this block of text
on the top, left, right, or bottom.
</p>
<p class="h3 mt-4">
And inside of this block we'll display useful information, as concise as
possible, huge tooltips aren't very visually appealing
</p>
<p class="h3 mt-4">
<b>
Tooltips are opt-in for performance reasons, we need to initialize
them ourselves, with tooltips and pop-overs we need to add a little
JavaScript on our own</b
>
</p>
<p class="h3 mt-4">
To create a tooltip, we make a button, or a link or something, give it
'data-toggle="tooltip" inside the "class="
</p>
<p class="h3 mt-4">
button type="button" class="btn btn-secondary" data-toggle="tooltip"
data-placement="top" title="Tooltip on top"
</p>
<p class="h3 mt-4">
After we include our data-toggle, we need to include our JavaScript,
</p>
<p class="h2 display-4">
<b
><u
>VERY IMPORTANT!! WE INCLUDE THIS JavaScript AFTER THE 3 'JavaScript
SCRIPT SRC' THAT WE INCLUDE WHEN USING Bootstrap, SO BELOW THOSE
THREE, THAT'S WHERE WE INCLUDE OUR JS
</u></b
>
</p>
<p class="h3 mt-4">
" And yes, after including script: $(function () {
$('[data-toggle="tooltip"]').tooltip(); }); below our three bootstrap
boilerplate script tags,
<u
class="data-toggle"
data-toggle="tooltip"
data-placement="bottom"
title="tooltip hover bottom"
>hovering displays the tooltip</u
>, so we need our main JS to load first, then we include our JS for the
tooltip
</p>
<p class="h3 mt-4">
Essentially what this code is doing is searching for anything that has
the class 'data-toggle' set to 'tooltip', and where to display it with
the 'data-placement = top, bottom, left, or right'
</p>
<p class="h3 mt-4">
<button
type="button"
class="btn btn-lg btn-success"
data-toggle="tooltip"
data-placement="top"
title="Tooltip on top"
>
Tooltip Hover
</button>
</p>
<p class="h3 mt-4">Let's do another</p>
<button
class="btn btn-info btn-lg p-4"
data-toggle="tooltip p-4"
data-placement="bottom"
title="Tooltip on bottom"
>
No 'type="button"' inside this button', tooltip follows cursor
</button>
<p class="h3 mt-4">
<button
type="button"
class="btn btn-lg btn-success"
data-toggle="tooltip"
data-placement="top"
title="Tooltip on top"
>
'type="button" inside this button'
</button>
</p>
<p class="h4 mt-4">
So omitting the 'type="button"' the tooltip displays where the cursor is
exactly, but after adding the 'type="button", it displays on the
specified data-placement side
</p>
<p class="h3 mt-4">We can also add them on links:</p>
<p class="h3 mt-4">
Here's a tooltip link:
<a
type="link"
class="text-danger display-4"
data-toggle="tooltip"
data-placement="right"
title="tooltip anchor tag right"
><b><u>tooltip</u></b></a
>
</p>
<p class="h3 mt-4">We can also add custom html inside our title:</p>
<button
type="button"
class="btn btn-secondary"
data-toggle="tooltip"
data-html="true"
title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
>
Tooltip with HTML
</button>
<p class="h3 mt-4">
And with disabled elements:
<span
class="d-inline-block"
tabindex="0"
data-toggle="tooltip"
title="Disabled tooltip"
>
<button
class="btn btn-primary"
style="pointer-events: none"
type="button"
disabled
>
Disabled button
</button>
</span>
</p>
<p class="h3 mt-4">
Lorem ipsum dolor sit amet
<a
class="text-danger"
data-toggle="tooltip"
data-placement="left"
title="tooltip in paragraph left"
><b>consectetur</b></a
>
adipisicing elit. In, voluptates.
</p>
</div>
<div class="container">
<h2 class="d-flex justify-content-center display-3">
<b><u>Pop-over</u></b>
</h2>
<p class="h3 mt-4">
A Pop-over is roughly the same, except you CLICK instead of hover
</p>
<p class="h3 mt-4">
And the Pop-over will stay there, even if your cursor moves
</p>
<p class="h3 mt-4">
And you close them by clicking the element that has the pop-over
data-toggle set to
</p>
<p class="h3 mt-4">
Pop-overs look similar to tooltips, but they have a title, they're
styled slightly differently, and they stay, unlike a tooltip which will
auto-undisplay when the cursor moves
</p>
<p class="h3 mt-4">
Another note is that these are NOT automatically set up, just like
tooltips, pop-overs need to have JavaScript set to them, otherwise
they'll have zero functionality
</p>
<p class="h3 mt-4">
It's the 'popper.js file' we're including at the bottom of our html file
that allows this to function, so always make sure that script src is
present, AND more importantly, put any of our own JS inside of script
tags BENEATH all three boilerplate script src tags
</p>
<p class="h3 mt-4">Let's demo this on a button:</p>
<p class="d-flex justify-content-center">
<button
class="btn btn-danger btn-lg p-6"
data-toggle="popover"
title="popover title here"
data-content="This is a popover"
>
Click me
</button>
</p>
<button
class="btn btn-lg btn-danger"
data-toggle="popover"
title="Dismissible popover text-danger"
data-content="And here's some amazing content. It's very engaging.
Right?"
>
Dismissible popover
</button>
</div>
<div class="container">
<h3 class="mt-4">
Also note, it's best to include our own scripts for enabling tooltips
and popovers in separate js files, and link them with script src,
similar to how we link jquery, popper, and bootstrap js at the bottom of
the html file, remember the order MATTERS, we include ours at the bottom
</h3>
<button
type="button"
class="btn btn-lg btn-danger"
data-toggle="popover"
title="Popover title"
data-content="And here's some amazing content. It's very engaging. Right?"
>
Click to toggle popover
</button>
</div>
<div class="container">
<p class="h3 mt-4">
I was having trouble viewing the top section of my popover, after
checking, it was due to the style tag at the top of my page setting the
font color of the entire html page to white. After setting my main style
font to black, the top portion of the popover displays. Probably
shouldn't have conflicting style tags, but I'm just taking notes, I'll
need to pay attention to all of my style tags
</p>
<p class="h3 mt-4">
Also note that we could get more specific in our JS by adding unique
id's to our elements that we want, vs enabling popovers or tooltips on
the entire page, we can select them individually with JavaScript
</p>
</div>
<div class="container mt-4">
<h2 class="d-flex justify-content-center display-3">
<b><u>Dropdowns</u></b>
</h2>
<p class="h3">
Bootstrap gives us an easy way of creating dropdowns, using
buttons or links
</p>
<p class="h3 d-flex justify-content-center">
<div class="dropdown d-flex justify-content-center">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</p>
</div>
<div class="container">
<p class="h3">
We make a div class = dropdown, then we have
a button class type = button, id = dropdownMenuButton,
data-toggle=dropdown, then under the button class we add
the menu of items
</p>
<div class="container mt-4 mb-4">
<p class="h3">
We can also change the size and color of them:
</p>
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-info btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-success btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
</div>
</div>
<div class="container mt-4 mb-4">
<p class="h2">
We can also make them drop right or left:
</p>
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item active" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item disabled" href="#">Something else here</a>
</div>
</div>
<div class="btn-group dropleft d-flex justify-content-center">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop left
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item disabled" href="#">Something else here</a>
</div>
</div>
</div>
<div class="container p-6 mb-6">
<p class="h3 d-flex justify-content-center">Let's do another
but add a header and a divider:
</p>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropright d-flex justify-content-center mt-4 mb-4">
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item active" href="#">Sign in</a>
<a class="dropdown-item" href="#">Sign out</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<p class="h3">
We can also do dropdown forms
</p>
<div class="btn-group dropright d-flex justify-content-center mt-4 mb-4">
<button type="button" class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
<p class="h3">Important to note, for this to work,
it must be inside of a button div
</p>
<div class="btn-group dropleft d-flex justify-content-center">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Drop left
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>
<div class="container">
<p class="h2">
Also notes dropdowns are commonly used with navbars, even
on the bootstrap homepage, the top navbar has a dropdown for
the version of bootstrap button
</p>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>