effective_style_guide 1.5.5 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/MIT-LICENSE +1 -1
  3. data/README.md +13 -9
  4. data/app/controllers/effective/style_guide_controller.rb +17 -2
  5. data/app/models/effective/style_guide.rb +14 -2
  6. data/app/views/effective/style_guide/_alerts.html +45 -0
  7. data/app/views/effective/style_guide/_badges.html +45 -0
  8. data/app/views/effective/style_guide/_breadcrumbs.html +20 -0
  9. data/app/views/effective/style_guide/_buttons.html +87 -0
  10. data/app/views/effective/style_guide/_buttons_group.html +90 -0
  11. data/app/views/effective/style_guide/_cards.html +496 -0
  12. data/app/views/effective/style_guide/_collapse.html +85 -0
  13. data/app/views/effective/style_guide/_dropdowns.html +177 -0
  14. data/app/views/effective/style_guide/_form_with.html.haml +77 -0
  15. data/app/views/effective/style_guide/_input_groups.html +300 -0
  16. data/app/views/effective/style_guide/_jumbotrons.html +18 -0
  17. data/app/views/effective/style_guide/_list_groups.html +156 -0
  18. data/app/views/effective/style_guide/_modals.html +81 -0
  19. data/app/views/effective/style_guide/_navs.html +204 -0
  20. data/app/views/effective/style_guide/_pagination.html +126 -0
  21. data/app/views/effective/style_guide/_progress.html +120 -0
  22. data/app/views/effective/style_guide/show.html.haml +14 -80
  23. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_alerts.html.haml +0 -0
  24. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_breadcrumbs.html.haml +0 -0
  25. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_buttons.html.haml +0 -0
  26. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_form_horizontal.html.haml +0 -0
  27. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_form_inline.html.haml +0 -0
  28. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_form_vertical.html.haml +0 -0
  29. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_jumbotron.html.haml +0 -0
  30. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_labels.html.haml +0 -0
  31. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_list_groups.html.haml +0 -0
  32. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_modals.html.haml +0 -0
  33. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_navs.html.haml +0 -0
  34. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_pagination.html.haml +0 -0
  35. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_panels.html.haml +0 -0
  36. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_progress_bars.html.haml +0 -0
  37. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_tables.html.haml +0 -0
  38. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_thumbnails.html.haml +3 -2
  39. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_typography.html.haml +0 -0
  40. data/app/views/effective/{style_guide → style_guide_bootstrap3}/_wells.html.haml +0 -0
  41. data/app/views/effective/style_guide_bootstrap3/show.html.haml +89 -0
  42. data/config/effective_style_guide.rb +14 -14
  43. data/config/routes.rb +2 -3
  44. data/lib/effective_style_guide.rb +20 -6
  45. data/lib/effective_style_guide/version.rb +1 -1
  46. metadata +41 -56
  47. data/Rakefile +0 -20
  48. data/app/datatables/effective_style_guide_datatable.rb +0 -45
  49. data/app/models/effective/datatables/style_guide.rb +0 -55
  50. data/app/views/effective/style_guide/_effective_datatable.html.haml +0 -9
data/app/views/effective/style_guide/_jumbotrons.html ADDED
@@ -0,0 +1,18 @@
1
+ <div class="jumbotron">
2
+ <h1 class="display-4">Hello, world!</h1>
3
+ <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
4
+ <hr class="my-4">
5
+ <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
6
+ <p class="lead">
7
+ <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
8
+ </p>
9
+ </div>
10
+
11
+ <br>
12
+
13
+ <div class="jumbotron jumbotron-fluid">
14
+ <div class="container">
15
+ <h1 class="display-4">Fluid jumbotron</h1>
16
+ <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
17
+ </div>
18
+ </div>
data/app/views/effective/style_guide/_list_groups.html ADDED
@@ -0,0 +1,156 @@
1
+ <ul class="list-group">
2
+ <li class="list-group-item">Cras justo odio</li>
3
+ <li class="list-group-item">Dapibus ac facilisis in</li>
4
+ <li class="list-group-item">Morbi leo risus</li>
5
+ <li class="list-group-item">Porta ac consectetur ac</li>
6
+ <li class="list-group-item">Vestibulum at eros</li>
7
+ </ul>
8
+
9
+ <p><br></p>
10
+
11
+ <ul class="list-group">
12
+ <li class="list-group-item active">Cras justo odio</li>
13
+ <li class="list-group-item">Dapibus ac facilisis in</li>
14
+ <li class="list-group-item">Morbi leo risus</li>
15
+ <li class="list-group-item">Porta ac consectetur ac</li>
16
+ <li class="list-group-item">Vestibulum at eros</li>
17
+ </ul>
18
+
19
+ <p><br></p>
20
+
21
+ <ul class="list-group">
22
+ <li class="list-group-item disabled">Cras justo odio</li>
23
+ <li class="list-group-item">Dapibus ac facilisis in</li>
24
+ <li class="list-group-item">Morbi leo risus</li>
25
+ <li class="list-group-item">Porta ac consectetur ac</li>
26
+ <li class="list-group-item">Vestibulum at eros</li>
27
+ </ul>
28
+
29
+ <p><br></p>
30
+
31
+ <div class="list-group">
32
+ <a href="#" class="list-group-item list-group-item-action active">
33
+ Cras justo odio
34
+ </a>
35
+ <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
36
+ <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
37
+ <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
38
+ <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
39
+ </div>
40
+
41
+ <p><br></p>
42
+
43
+ <div class="list-group">
44
+ <button type="button" class="list-group-item list-group-item-action active">
45
+ Cras justo odio
46
+ </button>
47
+ <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
48
+ <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
49
+ <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
50
+ <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
51
+ </div>
52
+
53
+ <p><br></p>
54
+
55
+ <ul class="list-group list-group-flush">
56
+ <li class="list-group-item">Cras justo odio</li>
57
+ <li class="list-group-item">Dapibus ac facilisis in</li>
58
+ <li class="list-group-item">Morbi leo risus</li>
59
+ <li class="list-group-item">Porta ac consectetur ac</li>
60
+ <li class="list-group-item">Vestibulum at eros</li>
61
+ </ul>
62
+
63
+ <p><br></p>
64
+
65
+ <ul class="list-group">
66
+ <li class="list-group-item">Dapibus ac facilisis in</li>
67
+ <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
68
+ <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
69
+ <li class="list-group-item list-group-item-success">This is a success list group item</li>
70
+ <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
71
+ <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
72
+ <li class="list-group-item list-group-item-info">This is a info list group item</li>
73
+ <li class="list-group-item list-group-item-light">This is a light list group item</li>
74
+ <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
75
+ </ul>
76
+
77
+ <p><br></p>
78
+
79
+ <div class="list-group">
80
+ <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
81
+ <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
82
+ <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
83
+ <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
84
+ <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
85
+ <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
86
+ <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
87
+ <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
88
+ <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
89
+ </div>
90
+
91
+ <p><br></p>
92
+
93
+ <ul class="list-group">
94
+ <li class="list-group-item d-flex justify-content-between align-items-center">
95
+ Cras justo odio
96
+ <span class="badge badge-primary badge-pill">14</span>
97
+ </li>
98
+ <li class="list-group-item d-flex justify-content-between align-items-center">
99
+ Dapibus ac facilisis in
100
+ <span class="badge badge-primary badge-pill">2</span>
101
+ </li>
102
+ <li class="list-group-item d-flex justify-content-between align-items-center">
103
+ Morbi leo risus
104
+ <span class="badge badge-primary badge-pill">1</span>
105
+ </li>
106
+ </ul>
107
+
108
+ <p><br></p>
109
+
110
+ <div class="list-group">
111
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
112
+ <div class="d-flex w-100 justify-content-between">
113
+ <h5 class="mb-1">List group item heading</h5>
114
+ <small>3 days ago</small>
115
+ </div>
116
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
117
+ <small>Donec id elit non mi porta.</small>
118
+ </a>
119
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
120
+ <div class="d-flex w-100 justify-content-between">
121
+ <h5 class="mb-1">List group item heading</h5>
122
+ <small class="text-muted">3 days ago</small>
123
+ </div>
124
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
125
+ <small class="text-muted">Donec id elit non mi porta.</small>
126
+ </a>
127
+ <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
128
+ <div class="d-flex w-100 justify-content-between">
129
+ <h5 class="mb-1">List group item heading</h5>
130
+ <small class="text-muted">3 days ago</small>
131
+ </div>
132
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
133
+ <small class="text-muted">Donec id elit non mi porta.</small>
134
+ </a>
135
+ </div>
136
+
137
+ <p><br></p>
138
+
139
+ <div class="row">
140
+ <div class="col-4">
141
+ <div class="list-group" id="list-tab" role="tablist">
142
+ <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
143
+ <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
144
+ <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
145
+ <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
146
+ </div>
147
+ </div>
148
+ <div class="col-8">
149
+ <div class="tab-content" id="nav-tabContent">
150
+ <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
151
+ <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
152
+ <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
153
+ <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
154
+ </div>
155
+ </div>
156
+ </div>
data/app/views/effective/style_guide/_modals.html ADDED
@@ -0,0 +1,81 @@
1
+ <!-- Button trigger modal -->
2
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
3
+ Launch demo modal
4
+ </button>
5
+
6
+ <!-- Modal -->
7
+ <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
8
+ <div class="modal-dialog" role="document">
9
+ <div class="modal-content">
10
+ <div class="modal-header">
11
+ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
12
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
13
+ <span aria-hidden="true">&times;</span>
14
+ </button>
15
+ </div>
16
+ <div class="modal-body">
17
+ ...
18
+ </div>
19
+ <div class="modal-footer">
20
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
21
+ <button type="button" class="btn btn-primary">Save changes</button>
22
+ </div>
23
+ </div>
24
+ </div>
25
+ </div>
26
+
27
+ <p><br></p>
28
+
29
+ <!-- Button trigger modal -->
30
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
31
+ Launch demo modal
32
+ </button>
33
+
34
+ <!-- Modal -->
35
+ <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
36
+ <div class="modal-dialog" role="document">
37
+ <div class="modal-content">
38
+ <div class="modal-header">
39
+ <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
40
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
41
+ <span aria-hidden="true">&times;</span>
42
+ </button>
43
+ </div>
44
+ <div class="modal-body">
45
+ ...
46
+ </div>
47
+ <div class="modal-footer">
48
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
49
+ <button type="button" class="btn btn-primary">Save changes</button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </div>
54
+
55
+ <p><br></p>
56
+
57
+ <!-- Button trigger modal -->
58
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
59
+ Launch demo modal
60
+ </button>
61
+
62
+ <!-- Modal -->
63
+ <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
64
+ <div class="modal-dialog modal-dialog-centered" role="document">
65
+ <div class="modal-content">
66
+ <div class="modal-header">
67
+ <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
68
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
69
+ <span aria-hidden="true">&times;</span>
70
+ </button>
71
+ </div>
72
+ <div class="modal-body">
73
+ ...
74
+ </div>
75
+ <div class="modal-footer">
76
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
77
+ <button type="button" class="btn btn-primary">Save changes</button>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
data/app/views/effective/style_guide/_navs.html ADDED
@@ -0,0 +1,204 @@
1
+ <ul class="nav">
2
+ <li class="nav-item">
3
+ <a class="nav-link active" href="#">Active</a>
4
+ </li>
5
+ <li class="nav-item">
6
+ <a class="nav-link" href="#">Link</a>
7
+ </li>
8
+ <li class="nav-item">
9
+ <a class="nav-link" href="#">Link</a>
10
+ </li>
11
+ <li class="nav-item">
12
+ <a class="nav-link disabled" href="#">Disabled</a>
13
+ </li>
14
+ </ul>
15
+
16
+ <p><br></p>
17
+
18
+ <nav class="nav">
19
+ <a class="nav-link active" href="#">Active</a>
20
+ <a class="nav-link" href="#">Link</a>
21
+ <a class="nav-link" href="#">Link</a>
22
+ <a class="nav-link disabled" href="#">Disabled</a>
23
+ </nav>
24
+
25
+ <p><br></p>
26
+
27
+ <ul class="nav justify-content-center">
28
+ <li class="nav-item">
29
+ <a class="nav-link active" href="#">Active</a>
30
+ </li>
31
+ <li class="nav-item">
32
+ <a class="nav-link" href="#">Link</a>
33
+ </li>
34
+ <li class="nav-item">
35
+ <a class="nav-link" href="#">Link</a>
36
+ </li>
37
+ <li class="nav-item">
38
+ <a class="nav-link disabled" href="#">Disabled</a>
39
+ </li>
40
+ </ul>
41
+
42
+ <p><br></p>
43
+
44
+ <ul class="nav justify-content-end">
45
+ <li class="nav-item">
46
+ <a class="nav-link active" href="#">Active</a>
47
+ </li>
48
+ <li class="nav-item">
49
+ <a class="nav-link" href="#">Link</a>
50
+ </li>
51
+ <li class="nav-item">
52
+ <a class="nav-link" href="#">Link</a>
53
+ </li>
54
+ <li class="nav-item">
55
+ <a class="nav-link disabled" href="#">Disabled</a>
56
+ </li>
57
+ </ul>
58
+
59
+ <p><br></p>
60
+
61
+ <ul class="nav flex-column">
62
+ <li class="nav-item">
63
+ <a class="nav-link active" href="#">Active</a>
64
+ </li>
65
+ <li class="nav-item">
66
+ <a class="nav-link" href="#">Link</a>
67
+ </li>
68
+ <li class="nav-item">
69
+ <a class="nav-link" href="#">Link</a>
70
+ </li>
71
+ <li class="nav-item">
72
+ <a class="nav-link disabled" href="#">Disabled</a>
73
+ </li>
74
+ </ul>
75
+
76
+ <p><br></p>
77
+
78
+ <nav class="nav flex-column">
79
+ <a class="nav-link active" href="#">Active</a>
80
+ <a class="nav-link" href="#">Link</a>
81
+ <a class="nav-link" href="#">Link</a>
82
+ <a class="nav-link disabled" href="#">Disabled</a>
83
+ </nav>
84
+
85
+ <p><br></p>
86
+
87
+ <ul class="nav nav-tabs">
88
+ <li class="nav-item">
89
+ <a class="nav-link active" href="#">Active</a>
90
+ </li>
91
+ <li class="nav-item">
92
+ <a class="nav-link" href="#">Link</a>
93
+ </li>
94
+ <li class="nav-item">
95
+ <a class="nav-link" href="#">Link</a>
96
+ </li>
97
+ <li class="nav-item">
98
+ <a class="nav-link disabled" href="#">Disabled</a>
99
+ </li>
100
+ </ul>
101
+
102
+ <p><br></p>
103
+
104
+ <ul class="nav nav-pills">
105
+ <li class="nav-item">
106
+ <a class="nav-link active" href="#">Active</a>
107
+ </li>
108
+ <li class="nav-item">
109
+ <a class="nav-link" href="#">Link</a>
110
+ </li>
111
+ <li class="nav-item">
112
+ <a class="nav-link" href="#">Link</a>
113
+ </li>
114
+ <li class="nav-item">
115
+ <a class="nav-link disabled" href="#">Disabled</a>
116
+ </li>
117
+ </ul>
118
+
119
+ <p><br></p>
120
+
121
+ <ul class="nav nav-pills nav-fill">
122
+ <li class="nav-item">
123
+ <a class="nav-link active" href="#">Active</a>
124
+ </li>
125
+ <li class="nav-item">
126
+ <a class="nav-link" href="#">Longer nav link</a>
127
+ </li>
128
+ <li class="nav-item">
129
+ <a class="nav-link" href="#">Link</a>
130
+ </li>
131
+ <li class="nav-item">
132
+ <a class="nav-link disabled" href="#">Disabled</a>
133
+ </li>
134
+ </ul>
135
+
136
+ <p><br></p>
137
+
138
+ <nav class="nav nav-pills nav-justified">
139
+ <a class="nav-link active" href="#">Active</a>
140
+ <a class="nav-link" href="#">Longer nav link</a>
141
+ <a class="nav-link" href="#">Link</a>
142
+ <a class="nav-link disabled" href="#">Disabled</a>
143
+ </nav>
144
+
145
+ <p><br></p>
146
+
147
+ <nav class="nav nav-pills nav-justified">
148
+ <a class="nav-item nav-link active" href="#">Active</a>
149
+ <a class="nav-item nav-link" href="#">Link</a>
150
+ <a class="nav-item nav-link" href="#">Link</a>
151
+ <a class="nav-item nav-link disabled" href="#">Disabled</a>
152
+ </nav>
153
+
154
+ <p><br></p>
155
+
156
+ <ul class="nav nav-tabs">
157
+ <li class="nav-item">
158
+ <a class="nav-link active" href="#">Active</a>
159
+ </li>
160
+ <li class="nav-item dropdown">
161
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
162
+ <div class="dropdown-menu">
163
+ <a class="dropdown-item" href="#">Action</a>
164
+ <a class="dropdown-item" href="#">Another action</a>
165
+ <a class="dropdown-item" href="#">Something else here</a>
166
+ <div class="dropdown-divider"></div>
167
+ <a class="dropdown-item" href="#">Separated link</a>
168
+ </div>
169
+ </li>
170
+ <li class="nav-item">
171
+ <a class="nav-link" href="#">Link</a>
172
+ </li>
173
+ <li class="nav-item">
174
+ <a class="nav-link disabled" href="#">Disabled</a>
175
+ </li>
176
+ </ul>
177
+
178
+ <p><br></p>
179
+
180
+ <ul class="nav nav-pills">
181
+ <li class="nav-item">
182
+ <a class="nav-link active" href="#">Active</a>
183
+ </li>
184
+ <li class="nav-item dropdown">
185
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
186
+ <div class="dropdown-menu">
187
+ <a class="dropdown-item" href="#">Action</a>
188
+ <a class="dropdown-item" href="#">Another action</a>
189
+ <a class="dropdown-item" href="#">Something else here</a>
190
+ <div class="dropdown-divider"></div>
191
+ <a class="dropdown-item" href="#">Separated link</a>
192
+ </div>
193
+ </li>
194
+ <li class="nav-item">
195
+ <a class="nav-link" href="#">Link</a>
196
+ </li>
197
+ <li class="nav-item">
198
+ <a class="nav-link disabled" href="#">Disabled</a>
199
+ </li>
200
+ </ul>
201
+
202
+ <p><br></p>
203
+
204
+