├── .gitattributes ├── 9781484260708.jpg ├── Contributing.md ├── LICENSE.txt ├── README.md ├── chapter-01 ├── Listing 1-1.html ├── Listing 1-10.html ├── Listing 1-11.html ├── Listing 1-13.html ├── Listing 1-14.html ├── Listing 1-2.html ├── Listing 1-4.html ├── Listing 1-6.html ├── Listing 1-8.html ├── Listing 1-9.html ├── desktop.ini └── stylesheets │ ├── Listing 1-12.css │ ├── Listing 1-3.css │ ├── Listing 1-5.css │ ├── Listing 1-7.css │ └── desktop.ini ├── chapter-02 ├── Listing 2-1.html ├── Listing 2-11.html ├── Listing 2-12.html ├── Listing 2-13.html ├── Listing 2-15.html ├── Listing 2-2.html ├── Listing 2-3.html ├── Listing 2-5.html ├── Listing 2-7.html ├── Listing 2-9.html ├── desktop.ini └── stylesheets │ ├── Listing 2-10.css │ ├── Listing 2-14.css │ ├── Listing 2-16.css │ ├── Listing 2-4.css │ ├── Listing 2-6.css │ ├── Listing 2-8.css │ └── desktop.ini ├── chapter-03 ├── Listing 3-1.html ├── Listing 3-10.html ├── Listing 3-11.html ├── Listing 3-12.html ├── Listing 3-14.html ├── Listing 3-15.html ├── Listing 3-2.html ├── Listing 3-3.html ├── Listing 3-4.html ├── Listing 3-5.html ├── Listing 3-6.html ├── Listing 3-7.html ├── Listing 3-8.html ├── Listing 3-9.html ├── desktop.ini └── stylesheets │ ├── Listing 3-13.css │ └── desktop.ini ├── chapter-04 ├── Listing 4-1.html ├── Listing 4-10-1.html ├── Listing 4-10.html ├── Listing 4-11-1.html ├── Listing 4-11.html ├── Listing 4-12-1.html ├── Listing 4-12.html ├── Listing 4-3.html ├── Listing 4-4.html ├── Listing 4-5.html ├── Listing 4-7.html ├── Listing 4-8.html ├── Listing 4-9-2.html ├── Listing 4-9-3.html ├── Listing 4-9-4.html ├── Listing 4-9-5.html ├── Listing 4-9.html ├── desktop.ini └── stylesheets │ ├── Listing 4-2.css │ ├── Listing 4-6.css │ └── desktop.ini ├── chapter-05 ├── LIsting 5-3.html ├── Listing 5-1.html ├── Listing 5-10.html ├── Listing 5-12.html ├── Listing 5-13.html ├── Listing 5-14.html ├── Listing 5-15.html ├── Listing 5-2.html ├── Listing 5-4.html ├── Listing 5-5.html ├── Listing 5-6.html ├── Listing 5-7.html ├── Listing 5-8.html ├── Listing 5-9.html ├── desktop.ini ├── images │ └── task │ │ ├── hilton-small-image-140x140.jpg │ │ ├── london-image-1.jpg │ │ ├── london-image-2.jpg │ │ ├── london-image-3.jpg │ │ ├── london-image-4.jpg │ │ ├── premierinn-small-image-140x140.jpg │ │ ├── staycity-small-image-140x140.jpg │ │ └── thesquare-small-image-140x140.jpg └── stylesheets │ ├── Listing 5-11.css │ └── desktop.ini ├── chapter-06 ├── Listing 6-1.html ├── Listing 6-3.html ├── Listing 6-4.html ├── Listing 6-7.html ├── images │ ├── parthenon.jpg │ └── prague-czech-republic.jpg ├── stylesheets │ ├── Listing 6-2.css │ ├── Listing 6-5.css │ ├── Listing 6-6.css │ └── Listing 6-8.css └── task.html ├── chapter-07 ├── Listing 7-1.html ├── Listing 7-11.html ├── Listing 7-14.html ├── Listing 7-15.html ├── Listing 7-17.html ├── Listing 7-2.html ├── Listing 7-3.html ├── Listing 7-4.html ├── Listing 7-5.html ├── Listing 7-6.html ├── Listing 7-7.html ├── Listing 7-8.html ├── desktop.ini └── stylesheets │ ├── Listing 7-10.css │ ├── Listing 7-12.css │ ├── Listing 7-13.css │ ├── Listing 7-16.css │ ├── Listing 7-9.css │ └── desktop.ini ├── chapter-08 ├── Listing 8-1.html ├── Listing 8-10.html ├── Listing 8-11.html ├── Listing 8-2.html ├── Listing 8-3.html ├── Listing 8-4.html ├── Listing 8-5.html ├── Listing 8-6.html ├── Listing 8-7.html ├── Listing 8-8.html ├── Listing 8-9.html └── desktop.ini ├── chapter-09 ├── Listing 9-1.html ├── Listing 9-10.html ├── Listing 9-2.html ├── Listing 9-3.html ├── Listing 9-4.html ├── Listing 9-5.html ├── Listing 9-6.html ├── Listing 9-7.html ├── Listing 9-8.html ├── desktop.ini ├── images │ ├── chios-4.jpg │ ├── elafonisos-2.jpg │ ├── ithaki-1.jpg │ ├── karpathos-3.jpg │ └── zakynthos-shipwreck.jpg ├── javascripts │ ├── Listing 9-11.js │ ├── Listing 9-9.js │ ├── desktop.ini │ ├── open-dialog.js │ ├── related-target.js │ └── stylesheets │ │ ├── desktop.ini │ │ └── main.css └── stylesheets │ ├── desktop.ini │ └── main.css ├── chapter-10 ├── Listing 10-1.html ├── desktop.ini ├── javascripts │ ├── Listing 10-3.js │ └── desktop.ini └── stylesheets │ ├── Listing 10-2.css │ └── desktop.ini ├── chapter-11 ├── Listing 11-1.html ├── Listing 11-3.html ├── desktop.ini ├── images │ └── drone-image.jpg ├── javascripts │ ├── Listing 11-2.js │ ├── Listing 11-5.js │ └── desktop.ini └── stylesheets │ ├── Listing 11-4.css │ └── desktop.ini └── errata.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /9781484260708.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/9781484260708.jpg -------------------------------------------------------------------------------- /Contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing to Apress Source Code 2 | 3 | Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers. 4 | 5 | ## How to Contribute 6 | 7 | 1. Make sure you have a GitHub account. 8 | 2. Fork the repository for the relevant book. 9 | 3. Create a new branch on which to make your change, e.g. 10 | `git checkout -b my_code_contribution` 11 | 4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted. 12 | 5. Submit a pull request. 13 | 14 | Thank you for your contribution! -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Freeware License, some rights reserved 2 | 3 | Copyright (c) 2020 Panos Matsinopoulos 4 | 5 | Permission is hereby granted, free of charge, to anyone obtaining a copy 6 | of this software and associated documentation files (the "Software"), 7 | to work with the Software within the limits of freeware distribution and fair use. 8 | This includes the rights to use, copy, and modify the Software for personal use. 9 | Users are also allowed and encouraged to submit corrections and modifications 10 | to the Software for the benefit of other users. 11 | 12 | It is not allowed to reuse, modify, or redistribute the Software for 13 | commercial use in any way, or for a user’s educational materials such as books 14 | or blog articles without prior permission from the copyright holder. 15 | 16 | The above copyright notice and this permission notice need to be included 17 | in all copies or substantial portions of the software. 18 | 19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 22 | AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 25 | SOFTWARE. 26 | 27 | 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Apress Source Code 2 | 3 | This repository accompanies [*Practical Bootstrap*](http://www.apress.com/9781484260708) by Panos Matsinopoulos (Apress, 2020). 4 | 5 | [comment]: #cover 6 | ![Cover image](9781484260708.jpg) 7 | 8 | Download the files as a zip using the green button, or clone the repository to your machine using Git. 9 | 10 | ## Releases 11 | 12 | Release v1.0 corresponds to the code in the published book, without corrections or updates. 13 | 14 | ## Contributions 15 | 16 | See the file Contributing.md for more information on how you can contribute to this repository. -------------------------------------------------------------------------------- /chapter-01/Listing 1-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Bare Bones Twitter Bootstrap Page 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 2 rows 2nd 3 columns, Specify only 1 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 | 7 39 |
40 |
41 | 8 42 |
43 |
44 | 9 45 |
46 |
47 | 10 48 |
49 |
50 | 11 51 |
52 |
53 | 12 54 |
55 |
56 |
57 |
58 | 1 59 |
60 |
61 | 2 62 |
63 |
64 | 3 65 |
66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 1-11 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 1-13 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 1-14 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Bare Bones Twitter Bootstrap Page 15 | 16 | 17 |
18 | This is a container 19 |
20 |
21 | This is a container fluid 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 1 row 12 columns 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 | 7 39 |
40 |
41 | 8 42 |
43 |
44 | 9 45 |
46 |
47 | 10 48 |
49 |
50 | 11 51 |
52 |
53 | 12 54 |
55 |
56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 2 rows 2nd 6 columns 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 | 7 39 |
40 |
41 | 8 42 |
43 |
44 | 9 45 |
46 |
47 | 10 48 |
49 |
50 | 11 51 |
52 |
53 | 12 54 |
55 |
56 |
57 |
58 | 1 59 |
60 |
61 | 2 62 |
63 |
64 | 3 65 |
66 |
67 | 4 68 |
69 |
70 | 5 71 |
72 |
73 | 6 74 |
75 |
76 |
77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 2 rows 2nd 5 columns 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 | 7 39 |
40 |
41 | 8 42 |
43 |
44 | 9 45 |
46 |
47 | 10 48 |
49 |
50 | 11 51 |
52 |
53 | 12 54 |
55 |
56 |
57 |
58 | 1 59 |
60 |
61 | 2 62 |
63 |
64 | 3 65 |
66 |
67 | 4 68 |
69 |
70 | 5 71 |
72 |
73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /chapter-01/Listing 1-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 2 rows 2nd 5 columns 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 | 7 39 |
40 |
41 | 8 42 |
43 |
44 | 9 45 |
46 |
47 | 10 48 |
49 |
50 | 11 51 |
52 |
53 | 12 54 |
55 |
56 |
57 |
58 | 1 59 |
60 |
61 | 2 62 |
63 |
64 | 3 65 |
66 |
67 | 4 68 |
69 |
70 | 5 71 |
72 |
73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /chapter-01/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-01/stylesheets/Listing 1-12.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: #8DC5CC; 3 | } 4 | 5 | .container .row:nth-of-type(1) div { 6 | background-color: #4e9013; 7 | padding: 10px 0; 8 | border: 1px solid green; 9 | color: white; 10 | text-align: center; 11 | } 12 | -------------------------------------------------------------------------------- /chapter-01/stylesheets/Listing 1-3.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: #8DC5CC; 3 | } 4 | 5 | .container-fluid { 6 | background-color: #aaad21; 7 | } 8 | -------------------------------------------------------------------------------- /chapter-01/stylesheets/Listing 1-5.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: #8DC5CC; 3 | } 4 | 5 | .container .row div { 6 | background-color: #4e9013; 7 | padding: 10px 0; 8 | border: 1px solid green; 9 | color: white; 10 | text-align: center; 11 | } 12 | -------------------------------------------------------------------------------- /chapter-01/stylesheets/Listing 1-7.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: #8DC5CC; 3 | } 4 | 5 | .container .row:nth-of-type(1) div { 6 | background-color: #4e9013; 7 | padding: 10px 0; 8 | border: 1px solid green; 9 | color: white; 10 | text-align: center; 11 | } 12 | 13 | .container .row:nth-of-type(2) div { 14 | background-color: #902e07; 15 | padding: 10px 0; 16 | border: 1px solid #441180; 17 | color: white; 18 | text-align: center; 19 | } 20 | -------------------------------------------------------------------------------- /chapter-01/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-1 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-11 15 | 16 | 17 |
18 |
19 |
1
20 |
2
21 |
3
22 |
4
23 |
5
24 |
6
25 |
7
26 |
8
27 |
9
28 |
10
29 |
11
30 |
12
31 |
32 |
33 |
34 | 2-columns-width 35 |
36 |
37 |
38 |
39 | 3-columns-width 40 |
41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-12 15 | 16 | 17 |
18 |
19 |
1
20 |
2
21 |
3
22 |
4
23 |
5
24 |
6
25 |
7
26 |
8
27 |
9
28 |
10
29 |
11
30 |
12
31 |
32 |
33 |
34 | 2-columns, left 35 |
36 |
37 | 2-columns, middle 38 |
39 |
40 | 2-columns, right 41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-13 15 | 16 | 17 | 18 |
19 |
20 |
1
21 |
2
22 |
3
23 |
4
24 |
5
25 |
6
26 |
7
27 |
8
28 |
9
29 |
10
30 |
11
31 |
12
32 |
33 |
34 |
35 | 2-columns, left 36 |
37 |
38 | 2-columns, middle 39 |
40 |
41 | 2-columns, right 42 |
43 |
44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-15 15 | 16 | 17 |
18 |
19 |
1
20 |
2
21 |
3
22 |
4
23 |
5
24 |
6
25 |
7
26 |
8
27 |
9
28 |
10
29 |
11
30 |
12
31 |
32 |
33 |
34 |
35 |
36 | 1-nested 37 |
38 |
39 | 2-nested 40 |
41 |
42 | 3-nested 43 |
44 |
45 | 4-nested 46 |
47 |
48 | 5-nested 49 |
50 |
51 | 6-nested 52 |
53 |
54 |
55 |
56 | 4-columns 57 |
58 |
59 | 2-columns 60 |
61 |
62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-2 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 | 4 30 |
31 |
32 | 5 33 |
34 |
35 | 6 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-3 15 | 16 | 17 |
18 |
19 |
20 | 1 21 |
22 |
23 | 2 24 |
25 |
26 | 3 27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-5 15 | 16 | 17 |
18 |
19 |
20 | 1-start 21 |
22 |
23 | 2-start 24 |
25 |
26 | 3-start 27 |
28 |
29 |
30 |
31 | 1-center 32 |
33 |
34 | 2-center 35 |
36 |
37 | 3-center 38 |
39 |
40 |
41 |
42 | 1-end 43 |
44 |
45 | 2-end 46 |
47 |
48 | 3-end 49 |
50 |
51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-7 15 | 16 | 17 |
18 |
19 |
20 | 1-self-start 21 |
22 |
23 | 2-self-center 24 |
25 |
26 | 3-self-end 27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /chapter-02/Listing 2-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 2-9 15 | 16 | 17 |
18 |
19 |
1
20 |
2
21 |
3
22 |
4
23 |
5
24 |
6
25 |
7
26 |
8
27 |
9
28 |
10
29 |
11
30 |
12
31 |
32 |
33 |
34 | 2-columns-width 35 |
36 |
37 |
38 |
39 | 3-columns-width 40 |
41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /chapter-02/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/Listing 2-10.css: -------------------------------------------------------------------------------- 1 | * { 2 | color: white; 3 | } 4 | 5 | .row { 6 | background-color: black; 7 | } 8 | 9 | .row-1 .col { 10 | background-color: #902e07; 11 | } 12 | 13 | .row-2 .col { 14 | background-color: #31907c; 15 | } 16 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/Listing 2-14.css: -------------------------------------------------------------------------------- 1 | * { 2 | color: white; 3 | } 4 | 5 | .row { 6 | background-color: darkblue; 7 | } 8 | 9 | .col-2:nth-child(1) { 10 | background-color: #902e07; 11 | } 12 | 13 | .col-2:nth-child(2) { 14 | background-color: #31907c; 15 | } 16 | 17 | .col-2:nth-child(3) { 18 | background-color: #89906b; 19 | } 20 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/Listing 2-16.css: -------------------------------------------------------------------------------- 1 | * { 2 | color: white; 3 | } 4 | 5 | .row { 6 | background-color: darkblue; 7 | } 8 | 9 | .row.parent { 10 | background-color: #367390; 11 | } 12 | 13 | .row.nested { 14 | background-color: #31907c; 15 | } 16 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/Listing 2-4.css: -------------------------------------------------------------------------------- 1 | .row { 2 | background-color: #4e9013; 3 | color: white; 4 | min-height: 200px; 5 | } 6 | 7 | .col { 8 | background-color: #31907c; 9 | } 10 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/Listing 2-6.css: -------------------------------------------------------------------------------- 1 | .row { 2 | min-height: 200px; 3 | margin-bottom: 30px; 4 | color: white; 5 | } 6 | 7 | .align-items-start { 8 | background-color: #4e9013; 9 | } 10 | 11 | .align-items-center { 12 | background-color: #902e07; 13 | } 14 | 15 | .align-items-end { 16 | background-color: #8DC5CC; 17 | } 18 | 19 | .col { 20 | background-color: #367390; 21 | } 22 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/Listing 2-8.css: -------------------------------------------------------------------------------- 1 | .row { 2 | background-color: #4e9013; 3 | min-height: 200px; 4 | margin-bottom: 30px; 5 | color: white; 6 | } 7 | 8 | .align-self-start { 9 | background-color: #441180; 10 | } 11 | 12 | .align-self-center { 13 | background-color: #8DC5CC; 14 | } 15 | 16 | .align-self-end { 17 | background-color: #902e07; 18 | } 19 | -------------------------------------------------------------------------------- /chapter-02/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-1 15 | 16 | 17 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-10 15 | 16 | 17 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-11 15 | 16 | 17 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-12 15 | 16 | 17 | 41 | 42 |
43 | 44 |

John Woo Portfolio

45 |

Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications

46 | 47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-14 15 | 16 | 17 | 41 | 42 |
43 | 44 |

John Woo Portfolio

45 |

Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications

46 | 47 |
48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-15 15 | 16 | 17 | 43 | 44 |
45 | 46 |

John Woo Portfolio

47 |

Full-Stack Web Developer that can turn your ideas to fantastic responsive Web applications

48 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-2 15 | 16 | 17 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-3 15 | 16 | 17 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-4 15 | 16 | 17 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-5 15 | 16 | 17 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-6 15 | 16 | 17 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-7 15 | 16 | 17 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-8 15 | 16 | 17 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /chapter-03/Listing 3-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Listing 3-9 15 | 16 | 17 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-03/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-03/stylesheets/Listing 3-13.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 56px; 3 | } 4 | -------------------------------------------------------------------------------- /chapter-03/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Reference Page 15 | 16 | 17 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
Travel Plan
(active) ActionDue
(success) Book TicketFeb 20th
(info) Book HotelMarch 26th
(warning) Buy SuitcaseApril 20th
(danger) Get PassportApril 30th
9 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-11.html: -------------------------------------------------------------------------------- 1 |

Labels & Badges

2 |
3 | 4 |

5 | €20.00 - Primary 6 | €20.00 - Secondary 7 | €20.00 - Success 8 | €20.00 - Danger 9 | €20.00 - Warning 10 | €20.00 - Info 11 | €20.00 - Light 12 | €20.00 - Dark 13 |

14 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Reference Page 15 | 16 | 17 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-4.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Reference Page 15 | 16 | 17 | 61 | 62 | 63 |
64 |
65 |

Jumbotron

66 |

67 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 68 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 69 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 70 |

71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Reference Page 15 | 16 | 17 | 61 | 62 | 63 |
64 |
65 |

66 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 67 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 68 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 69 |

70 |
71 | 72 |

Buttons

73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Reference Page 15 | 16 | 17 | 61 | 62 | 63 |
64 |
65 |

66 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 67 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 68 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 69 |

70 |
71 | 72 |

Buttons

73 |
74 | 75 |

Small Sizes

76 |

77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |

87 | 88 |

Normal Sizes

89 |

90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |

100 | 101 |

Large Sizes

102 |

103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |

113 | 114 |

Block Sizes

115 |

116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |

126 | 127 |

Outline buttons (Normal Sizes)

128 |

129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 |

139 |
140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /chapter-04/Listing 4-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Reference Page 15 | 16 | 17 | 61 | 62 | 63 |
64 |
65 |

66 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 67 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 68 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 69 |

70 |
71 | 72 |

Buttons

73 |
74 | 75 |

Small Sizes

76 |

77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |

87 | 88 |

Normal Sizes

89 |

90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 |

100 | 101 |

Large Sizes

102 |

103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |

113 | 114 |

Block Sizes

115 |

116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |

126 | 127 |

Outline buttons (Normal Sizes)

128 |

129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 |

139 | 140 |

Tables

141 |
142 | 143 |

Shopping List

144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 |
Shopping List
ItemQt
Cheese1 kgr
Rice1.5 kgr
Coffee0.5 kgr
Milk1 ltr
Wine1 btl
153 | 154 |

Travel Plan

155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
Travel Plan
ActionDue
Book TicketFeb 20th
Book HotelMarch 26th
Buy SuitcaseApril 20th
Get PassportApril 30th
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /chapter-04/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-04/stylesheets/Listing 4-2.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 56px; 3 | } 4 | -------------------------------------------------------------------------------- /chapter-04/stylesheets/Listing 4-6.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 70px; 3 | padding-bottom: 70px; 4 | } 5 | 6 | .h-4 { 7 | height: 1.5rem; 8 | } 9 | -------------------------------------------------------------------------------- /chapter-04/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-05/LIsting 5-3.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Dashboard: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 5 |

6 |
7 | 8 |
9 |

10 | Payments: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 11 |

12 |
13 | 14 |
15 |

16 | Invoices: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 17 |

18 |
19 | 20 |
21 |

22 | Settings: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 23 |

24 |
25 |
26 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-1.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-10.html: -------------------------------------------------------------------------------- 1 |

Progress Bars

2 |
3 | 4 |
5 |
60% Complete - primary
6 |
7 |
8 |
60% Complete - secondary
9 |
10 |
11 |
60% Complete - success
12 |
13 |
14 |
60% Complete - danger
15 |
16 |
17 |
60% Complete - warning
18 |
19 |
20 |
60% Complete - info
21 |
22 |
23 |
60% Complete - light
24 |
25 |
26 |
60% Complete - dark
27 |
28 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-12.html: -------------------------------------------------------------------------------- 1 |
2 |
30% primary
3 |
50% success
4 |
10% warning
5 |
6 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-13.html: -------------------------------------------------------------------------------- 1 |

Cards

2 |
3 | 4 |
5 |
6 |
7 |
Voted #1
8 | lion sitting and looking around 9 |
10 |
Lions
11 |
Lions Are Amazing
12 |

13 | The lion (Panthera leo) is a large mammal of the Felidae (cat) family. Some large males weigh over 250 kg (550 lb). 14 | Today, wild lions live in sub-Saharan Africa and in Asia. Lions are adapted for life in grasslands and mixed areas 15 | with trees and grass. The relatively small females are fast runners over short distances, and coordinate their hunting of herd animals. 16 |

17 | Learn more 18 |
19 | 22 |
23 |
24 |
25 |
26 |
Voted #2
27 | cheetah looking around 28 |
29 |
Cheetahs
30 |
Cheetahs Are Really Fast
31 |

32 | The cheetah (Acinonyx jubatus; /ˈtʃiːtə/) is a large cat of the subfamily Felinae that occurs in North, Southern and East Africa, and a few localities in Iran. 33 | It inhabits a variety of mostly arid habitats like dry forests, scrub forests, and savannahs. The species is IUCN Red Listed as Vulnerable, as it suffered a 34 | substantial decline in its historic range in the 20th century... 35 |

36 | Learn more 37 |
38 | 41 |
42 |
43 |
44 |
45 |
Voted #3
46 | panther looking around 47 |
48 |
Black Panthers
49 |
Black Panthers Are Really Scary
50 |

51 | A black panther is the melanistic colour variant of any Panthera, particularly of the leopard (P. pardus) in Asia and Africa, and the jaguar (P. onca) in the Americas. 52 |

53 | Learn more 54 |
55 | 58 |
59 |
60 |
61 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-14.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 58 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-2.html: -------------------------------------------------------------------------------- 1 |

Tabs

2 |
3 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-5.html: -------------------------------------------------------------------------------- 1 |

Alerts

2 |
3 | 4 |
5 | A simple primary alert. 6 |
7 |
8 | A simple secondary alert. 9 |
10 |
11 | A simple success alert. 12 |
13 |
14 | A simple danger alert. 15 |
16 |
17 | A simple warning alert. 18 |
19 |
20 | A simple info alert. 21 |
22 |
23 | A simple light alert. 24 |
25 |
26 | A simple dark alert. 27 |
28 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-6.html: -------------------------------------------------------------------------------- 1 |
2 | London Read more about London from Wikipedia London Link. 3 |
4 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-7.html: -------------------------------------------------------------------------------- 1 |
2 | London Read more about London from Wikipedia London Link. 3 |
4 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-8.html: -------------------------------------------------------------------------------- 1 |

Progress Bars

2 |
3 | 4 |
5 |
60% Complete
6 |
7 | -------------------------------------------------------------------------------- /chapter-05/Listing 5-9.html: -------------------------------------------------------------------------------- 1 |
2 |
60% Complete
3 |
4 | -------------------------------------------------------------------------------- /chapter-05/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-05/images/task/hilton-small-image-140x140.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/hilton-small-image-140x140.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/london-image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/london-image-1.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/london-image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/london-image-2.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/london-image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/london-image-3.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/london-image-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/london-image-4.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/premierinn-small-image-140x140.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/premierinn-small-image-140x140.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/staycity-small-image-140x140.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/staycity-small-image-140x140.jpg -------------------------------------------------------------------------------- /chapter-05/images/task/thesquare-small-image-140x140.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-05/images/task/thesquare-small-image-140x140.jpg -------------------------------------------------------------------------------- /chapter-05/stylesheets/Listing 5-11.css: -------------------------------------------------------------------------------- 1 | .h-4 { 2 | height: 1.5rem; 3 | } 4 | -------------------------------------------------------------------------------- /chapter-05/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-06/Listing 6-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Cover Page Project 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-06/Listing 6-3.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /chapter-06/Listing 6-4.html: -------------------------------------------------------------------------------- 1 | 4 | Cover 5 | -------------------------------------------------------------------------------- /chapter-06/Listing 6-7.html: -------------------------------------------------------------------------------- 1 |
2 |

Cover your page.

3 |

This content will always be vertically and horizontally aligned

4 |

5 | Learn more 6 |

7 |
8 | -------------------------------------------------------------------------------- /chapter-06/images/parthenon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-06/images/parthenon.jpg -------------------------------------------------------------------------------- /chapter-06/images/prague-czech-republic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-06/images/prague-czech-republic.jpg -------------------------------------------------------------------------------- /chapter-06/stylesheets/Listing 6-2.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | background-color: White; 4 | } 5 | 6 | body { 7 | min-height: 100%; 8 | background-color: #2b542c; 9 | background-image: url("../images/prague-czech-republic.jpg"); 10 | background-repeat: no-repeat; 11 | background-attachment: fixed; 12 | background-position: left top; 13 | background-size: 100% 100%; 14 | } 15 | -------------------------------------------------------------------------------- /chapter-06/stylesheets/Listing 6-5.css: -------------------------------------------------------------------------------- 1 | #navigation-bar-container { 2 | width: 100%; 3 | margin: 10px auto; 4 | border-radius: 10px; 5 | } 6 | 7 | @media (min-width: 768px) { 8 | #navigation-bar-container { 9 | width: 50%; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /chapter-06/stylesheets/Listing 6-6.css: -------------------------------------------------------------------------------- 1 | #navigation-bar-container a.navbar-brand, 2 | #navbar ul a { 3 | font-weight: 900; 4 | } 5 | 6 | #navigation-bar-container a.navbar-brand { 7 | font-size: 3.2rem; 8 | } 9 | 10 | #navbar ul a { 11 | font-size: 1.8rem; 12 | } 13 | -------------------------------------------------------------------------------- /chapter-06/stylesheets/Listing 6-8.css: -------------------------------------------------------------------------------- 1 | html { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | 6 | body { 7 | display: table; 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | #center-content { 13 | display: table-cell; 14 | text-align: center; 15 | vertical-align: middle; 16 | } 17 | -------------------------------------------------------------------------------- /chapter-06/task.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Cover Page - Task 15 | 16 | 17 |
18 | 19 | 35 | 36 |
37 |

Any Time of The Year

38 |

Visit Athens and Greek Islands

39 |

40 | Book Now 41 |

42 |
43 | 44 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Admin Dashboard 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-11.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 28 | 29 |
30 | 31 | 32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-14.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Generic placeholder thumbnail 5 |

Label

6 | Something else 7 |
8 | 9 |
10 | Generic placeholder thumbnail 12 |

Label

13 | Something else 14 |
15 | 16 |
17 | Generic placeholder thumbnail 19 |

Label

20 | Something else 21 |
22 | 23 |
24 | Generic placeholder thumbnail 26 |

Label

27 | Something else 28 |
29 |
30 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-15.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Dashboard

4 |
5 | 6 |
7 |
8 | Generic placeholder thumbnail 11 |

Label

12 | Something else 13 |
14 | 15 |
16 | Generic placeholder thumbnail 19 |

Label

20 | Something else 21 |
22 | 23 |
24 | Generic placeholder thumbnail 27 |

Label

28 | Something else 29 |
30 | 31 |
32 | Generic placeholder thumbnail 35 |

Label

36 | Something else 37 |
38 |
39 |
40 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-17.html: -------------------------------------------------------------------------------- 1 |

Sales table is compiled from data retrieved from the main database

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 |
#Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
1,001LoremipsumdolorsitLoremipsumdolorsit
1,002ametconsecteturadipiscingelitametconsecteturadipiscingelit
1,003IntegernecodioPraesentIntegernecodioPraesent
1,003liberoSedcursusanteliberoSedcursusante
1,004dapibusdiamSednisidapibusdiamSednisi
1,005NullaquissematNullaquissemat
1,006nibhelementumimperdietDuisnibhelementumimperdietDuis
1,007sagittisipsumPraesentmaurissagittisipsumPraesentmauris
1,008FuscenectellussedFuscenectellussed
1,009auguesemperportaMaurisauguesemperportaMauris
1,010massaVestibulumlaciniaarcumassaVestibulumlaciniaarcu
1,011egetnullaClassaptentegetnullaClassaptent
1,012tacitisociosquadlitoratacitisociosquadlitora
1,013torquentperconubianostratorquentperconubianostra
1,014perinceptoshimenaeosCurabiturperinceptoshimenaeosCurabitur
1,015sodalesligulainliberosodalesligulainlibero
196 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-2.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-3.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-4.html: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-5.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-6.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
7 | 8 |
9 | 10 | 11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-7.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 12 | 13 | 20 | 21 | 26 | 27 |
28 | 29 |
30 | 31 | 32 |
33 |
34 |
35 | -------------------------------------------------------------------------------- /chapter-07/Listing 7-8.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 10 | 11 | 18 | 19 | 24 | 25 |
26 | -------------------------------------------------------------------------------- /chapter-07/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-07/stylesheets/Listing 7-10.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | padding-top: 56px; 7 | height: 100%; 8 | } 9 | 10 | #main-container, 11 | #main-container .row { 12 | height: 100%; 13 | } 14 | 15 | .sidebar { 16 | padding-top: 10px; 17 | padding-bottom: 10px; 18 | background-color: #f5f5f5; 19 | border-right: 1px solid #eee; 20 | } 21 | -------------------------------------------------------------------------------- /chapter-07/stylesheets/Listing 7-12.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | padding-top: 56px; 7 | height: 100%; 8 | } 9 | 10 | #main-container, 11 | #main-container .row { 12 | height: 100%; 13 | } 14 | 15 | .sidebar { 16 | padding: 10px 0; 17 | background-color: #f5f5f5; 18 | border-right: 1px solid #eee; 19 | } 20 | 21 | .sidebar ul { 22 | margin-bottom: 20px; 23 | } 24 | 25 | .sidebar ul li { 26 | padding-left: 10px; 27 | min-height: 2.2rem; 28 | } 29 | -------------------------------------------------------------------------------- /chapter-07/stylesheets/Listing 7-13.css: -------------------------------------------------------------------------------- 1 | .sidebar ul li a { 2 | text-decoration: none; 3 | } 4 | 5 | /* Active
  • and , and for hover over NON-active
  • and */ 6 | .sidebar ul li.active, 7 | .sidebar ul li.active a, 8 | 9 | .sidebar ul li:hover, 10 | .sidebar ul li:hover a, 11 | .sidebar ul li a:hover { 12 | background-color: #428BCA; 13 | color: White; 14 | } 15 | 16 | .sidebar ul li:hover { 17 | cursor: pointer; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /chapter-07/stylesheets/Listing 7-16.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | padding-top: 56px; 7 | height: 100%; 8 | } 9 | 10 | #main-container, 11 | #main-container > .row { 12 | height: 100% 13 | } 14 | 15 | .sidebar { 16 | padding: 10px 0; 17 | background-color: #f5f5f5; 18 | border-right: 1px solid #eee; 19 | } 20 | 21 | .sidebar ul { 22 | margin-bottom: 20px; 23 | } 24 | 25 | .sidebar ul li { 26 | padding-left: 10px; 27 | padding-top: 5px; 28 | min-height: 2.2rem; 29 | } 30 | 31 | .sidebar ul li a { 32 | text-decoration: none; 33 | } 34 | 35 | /* Active
  • and , and for hover over NON-active
  • and */ 36 | .sidebar ul li.active, 37 | .sidebar ul li.active a, 38 | 39 | .sidebar ul li:hover, 40 | .sidebar ul li:hover a, 41 | .sidebar ul li a:hover { 42 | background-color: #428BCA; 43 | color: White; 44 | } 45 | 46 | .sidebar ul li:hover { 47 | cursor: pointer; 48 | } 49 | 50 | -------------------------------------------------------------------------------- /chapter-07/stylesheets/Listing 7-9.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | padding-top: 10px; 3 | padding-bottom: 10px; 4 | background-color: #f5f5f5; 5 | border-right: 1px solid #eee; 6 | } 7 | -------------------------------------------------------------------------------- /chapter-07/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Twitter Bootstrap Forms Reference Page 15 | 16 | 17 | 18 | 19 |
    20 | 21 | 22 |
    23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-10.html: -------------------------------------------------------------------------------- 1 |
    2 | Input Groups 3 |
    4 |
    5 | 6 |
    7 |
    8 | 9 |
    10 |
    11 | @ 12 |
    13 | 14 |
    15 | 16 |
    17 | 18 |
    19 | .00 20 |
    21 |
    22 | 23 |
    24 |
    25 | $ 26 |
    27 | 28 |
    29 | .00 30 |
    31 |
    32 | 33 |
    34 |
    35 |
    36 | 37 |
    38 |
    39 | 40 |
    41 | 42 |
    43 |
    44 |
    45 | 46 |
    47 |
    48 | 49 |
    50 |
    51 |
    52 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-11.html: -------------------------------------------------------------------------------- 1 |
    2 | Input & Button Groups 3 |
    4 |
    5 | 6 |
    7 |
    8 |
    9 | 10 |
    11 | 12 |
    13 |
    14 |
    15 |
    16 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-2.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    Sign In

    4 |

    Sign in today for better experience.

    5 | 6 |
    7 |
    8 | 9 | 10 |
    11 | 12 |
    13 | 14 | 15 |
    16 | 17 |
    18 |
    19 | 20 | 21 |
    22 | 23 | 26 |
    27 | 28 |
    29 |
    30 | 31 |
    32 | 33 |
    34 | 35 |
    36 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-3.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Sign In

    3 |

    Sign in today for better experience.

    4 | 5 |
    6 |
    7 | 8 |
    9 | 10 | Example block-level help text here. 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 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-4.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 | 6 | 7 |
    8 | 9 |
    10 | 11 | 12 |
    13 | 14 |
    15 | 16 | 19 |
    20 | 21 | 22 |
    23 |
    24 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-5.html: -------------------------------------------------------------------------------- 1 |

    Other Form Elements

    2 |
    3 | 4 |
    5 |
    6 | Help Text 7 |
    8 |
    9 | 10 |
    11 | 12 |
    13 | 14 | Give your company VAT number. Enter the VIES VAT number with the two char prefix indicating your country. 15 |
    16 |
    17 |
    18 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-6.html: -------------------------------------------------------------------------------- 1 |
    2 | Readonly Plain Text 3 |
    4 |
    5 | 6 |
    7 | 8 |
    9 | 10 |
    11 |
    12 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-7.html: -------------------------------------------------------------------------------- 1 |
    2 | Select Boxes 3 |
    4 |
    5 | 6 |
    7 | 8 | 9 |
    10 | 16 |
    17 |
    18 | 19 |
    20 | 21 | 22 |
    23 | 29 |
    30 |
    31 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-8.html: -------------------------------------------------------------------------------- 1 |
    2 | Input Validation 3 |
    4 |
    5 | 6 |
    7 | 8 |
    9 | 10 |
    11 | Nice! 12 |
    13 |
    14 |
    15 | 16 |
    17 | 18 |
    19 | 20 |
    21 | You have to give your password 22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /chapter-08/Listing 8-9.html: -------------------------------------------------------------------------------- 1 |
    2 | Size of Input Controls 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 | -------------------------------------------------------------------------------- /chapter-08/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Modal Dialogs 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Modal Dialogs 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-2.html: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Modal Dialogs 15 | 16 | 17 | 18 | 19 | 20 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Modal Dialogs 15 | 16 | 17 | 18 | 19 | 20 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Modal Dialogs 15 | 16 | 17 | 18 | 19 | 20 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Modal Dialogs 15 | 16 | 17 | 18 | 19 | 20 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Modal Dialogs 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /chapter-09/Listing 9-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Modal Dialogs 15 | 16 | 17 | 18 | 19 | 20 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /chapter-09/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-09/images/chios-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-09/images/chios-4.jpg -------------------------------------------------------------------------------- /chapter-09/images/elafonisos-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-09/images/elafonisos-2.jpg -------------------------------------------------------------------------------- /chapter-09/images/ithaki-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-09/images/ithaki-1.jpg -------------------------------------------------------------------------------- /chapter-09/images/karpathos-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-09/images/karpathos-3.jpg -------------------------------------------------------------------------------- /chapter-09/images/zakynthos-shipwreck.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-09/images/zakynthos-shipwreck.jpg -------------------------------------------------------------------------------- /chapter-09/javascripts/Listing 9-11.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $('.modal').on('show.bs.modal', function(event){ 3 | var $buttonClicked = $(event.relatedTarget); 4 | 5 | $(this).find('.modal-body').html("

    " + $buttonClicked.html() + " Clicked!

    "); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /chapter-09/javascripts/Listing 9-9.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('.modal').modal({ 3 | backdrop: 'static', 4 | keyboard: false, 5 | show: false 6 | }); 7 | 8 | $('#open-modal-button').on('click', function() { 9 | $('.modal').modal('show'); 10 | return false; 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /chapter-09/javascripts/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-09/javascripts/open-dialog.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('#open-modal-button').on('click', function() { 3 | $('.modal').modal(); 4 | return false; 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /chapter-09/javascripts/related-target.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $('.modal').on('show.bs.modal', function(event){ 3 | var $buttonClicked = $(event.relatedTarget); 4 | 5 | $(this).find('.modal-body').html("

    " + $buttonClicked.html() + " Clicked!

    "); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /chapter-09/javascripts/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-09/javascripts/stylesheets/main.css: -------------------------------------------------------------------------------- 1 | img { 2 | padding: 10px 10px; 3 | width: 100%; 4 | height: 250px; 5 | } 6 | -------------------------------------------------------------------------------- /chapter-09/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-09/stylesheets/main.css: -------------------------------------------------------------------------------- 1 | img { 2 | padding: 10px 10px; 3 | width: 100%; 4 | height: 250px; 5 | } 6 | -------------------------------------------------------------------------------- /chapter-10/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-10/javascripts/Listing 10-3.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('body').scrollspy({ 3 | target: '#navbar' 4 | }) 5 | }); 6 | -------------------------------------------------------------------------------- /chapter-10/javascripts/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-10/stylesheets/Listing 10-2.css: -------------------------------------------------------------------------------- 1 | h1, h2 { 2 | padding-top: 56px; 3 | margin-top: -56px; 4 | } 5 | -------------------------------------------------------------------------------- /chapter-10/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-11/Listing 11-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Tooltips and Popovers 15 | 16 | 17 |
    18 |

    Drones

    19 | 20 |

    HK 251 Whirlwind Brushless Quadcopter Review

    21 | 22 |

    23 | The XK 251 is a RTF mid-sized (250 mm diagonal) quadcopter 24 | featuring brushless motors and carbon fiber arms and landing gear. 25 | Brushless motors are more efficient and more powerful than the brushed variety typically found on toy-grade models. 26 | They also have a much longer life span. 27 | 28 | Here is an 29 | FAQ relating to the difference between brushed and brushless motors. 30 | 31 | The XK 251 weighs in at 215 grams meaning that no FAA registration is needed. It is powered by a small 2s (7.4v) battery. 32 |

    33 | 34 |
    35 | Drone Image 36 |
    37 |
    38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /chapter-11/Listing 11-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Popover Example Page 15 | 16 | 17 |
    18 |

    Drones

    19 | 20 |

    HK 251 Whirlwind Brushless Quadcopter Review

    21 | 22 |

    23 | The XK 251 is an RTF 24 | 29 | 30 | 31 | mid-sized (250 mm diagonal) 32 | quadcopter 33 | 37 | 38 | 39 | featuring brushless motors and carbon fiber arms and landing gear. 40 | Brushless motors are more efficient and more powerful than the brushed variety typically found on toy-grade models. 41 | They also have a much longer life span. 42 | 43 | Here is an 44 | FAQ relating to the difference between brushed and brushless motors. 45 | 46 | The XK 251 weighs in at 215 grams meaning that no FAA registration is needed. It is powered by a small 2s (7.4v) battery. 47 |

    48 | 49 |
    50 | Drone Image 51 |
    52 |
    53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /chapter-11/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-11/images/drone-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/practical-bootstrap/4ca06d9a35b0542c5d00a67ab70e071e1c79b19c/chapter-11/images/drone-image.jpg -------------------------------------------------------------------------------- /chapter-11/javascripts/Listing 11-2.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('[data-toggle=tooltip]').tooltip({ 3 | delay: { 4 | show: 3000, // 3 seconds 5 | hide: 1000 // 1 second 6 | } 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /chapter-11/javascripts/Listing 11-5.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('[data-toggle=popover]').popover({ 3 | html: true 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /chapter-11/javascripts/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /chapter-11/stylesheets/Listing 11-4.css: -------------------------------------------------------------------------------- 1 | a[data-toggle=popover] { 2 | text-decoration: none; 3 | } 4 | -------------------------------------------------------------------------------- /chapter-11/stylesheets/desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | ConfirmFileOp=0 3 | IconResource=C:\Program Files\Google\Drive File Stream\42.0.11.0\GoogleDriveFS.exe,21 4 | -------------------------------------------------------------------------------- /errata.md: -------------------------------------------------------------------------------- 1 | # Errata for *Book Title* 2 | 3 | On **page xx** [Summary of error]: 4 | 5 | Details of error here. Highlight key pieces in **bold**. 6 | 7 | *** 8 | 9 | On **page xx** [Summary of error]: 10 | 11 | Details of error here. Highlight key pieces in **bold**. 12 | 13 | *** --------------------------------------------------------------------------------