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
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d26a7ecba2a64a4f6cdc5543e45009032b619d49
4
- data.tar.gz: c56078e47877581c66d7ecbd757eaa9c4a7d5466
3
+ metadata.gz: b84895736c9806c8826396aa6dfad6dccfd6650a
4
+ data.tar.gz: eb13c3f17ea3600da6cce7267ccf7175ae552cc4
5
5
  SHA512:
6
- metadata.gz: ef91a9aaafd0d224c7e4cc105f1b4f937c7991819ef393f4719c106b0b72a3b8732fe5f93eea4e00fbe807e7e5f9100c4f6c8711e77d138042859e880e34cf55
7
- data.tar.gz: aa756124ce259c50a11fd685629eccd37e0ff3b27c0562081a785a82048c21b34030ad3c217aa6eb19ad87c4c6a10da87524b03d8da06917f7ffa1c1ac7ad3e4
6
+ metadata.gz: 62f96c7567635c3f2dfb0d192bd698134531ad4738263b66c336d7b9be4c94101a55e550ca86ab5d8d96c7eaf11ae4275a0eec689f6e021105291746d4d7c6c5
7
+ data.tar.gz: ec6f479e9128f158f8497d1639a4124cba97d582ae903b88614ca60d98846d614ccd1297eced13100111bc879a3dd4b496038edce2969851ad1095da7cd7ebf6
data/MIT-LICENSE CHANGED
@@ -1,4 +1,4 @@
1
- Copyright 2014 Code and Effect Inc.
1
+ Copyright 2018 Code and Effect Inc.
2
2
 
3
3
  Permission is hereby granted, free of charge, to any person obtaining
4
4
  a copy of this software and associated documentation files (the
data/README.md CHANGED
@@ -1,12 +1,14 @@
1
1
  # Effective Style Guide
2
2
 
3
- Ensure that your custom CSS theme looks good with all Twitter Bootstrap3 html components.
3
+ Ensure that your custom CSS theme looks good with all Twitter Bootstrap html components.
4
4
 
5
- Creates a `/styleguide` page that renders the correct HTML for all bootstrap3 (v3.2.0) components.
5
+ Creates a `/styleguide` page that renders the correct HTML for all bootstrap4 (v4.0.0) components.
6
6
 
7
- Use this page to ensure that your custom CSS theme looks good with the bootstrap3 components.
7
+ Creates a `/styleguide/bootstrap3` page that renders the correct HTML for all bootstrap3 (v3.2.0) components.
8
8
 
9
- Create a `_my_component.html.erb` partial in the `views/effective/style_guide/` directory to add your own custom components.
9
+ Use this page to ensure that your custom CSS theme looks good with the bootstrap components.
10
+
11
+ Create a `_my_component.html.erb` partial in the `views/effective/style_guide/` or `views/effective/style_guide_bootstrap3/` directory to add your own custom components.
10
12
 
11
13
  Works with simple_form to ensure that the generated form HTML matches the bootstrap3 HTML.
12
14
 
@@ -37,15 +39,20 @@ You must include the Twitter Bootstrap3 Javascript and CSS assets on your own.
37
39
 
38
40
  ## Usage
39
41
 
40
- Visit `/styleguide` to test how the bootstrap3 components look with your site's design (css theme).
42
+ Visit `/styleguide` to test how the bootstrap4 components look with your site's design (css theme).
43
+
44
+ Visit `/styleguide/bootstrap3` to test how the bootstrap3 components look with your site's design (css theme).
41
45
 
42
46
 
43
47
  ### Add Custom Components
44
48
 
45
- Create a `_my_component.html.erb` partial in the `views/effective/style_guide/` directory.
49
+ Create a `_my_component.html.erb` partial in the `views/effective/style_guide/` or `views/effective/style_guide_bootstrap3/` directory.
46
50
 
47
51
  This file will be automatically detected and included in the `/styleguide` page.
48
52
 
53
+ ### effective_bootstrap
54
+
55
+ Checkout effective_bootstrap (https://github.com/code-and-effect/effective_bootstrap) for an effective bootstrap4 experience.
49
56
 
50
57
  ### simple_form
51
58
 
@@ -146,7 +153,6 @@ rescue_from Effective::AccessDenied do |exception|
146
153
  end
147
154
  ```
148
155
 
149
-
150
156
  ### Permissions
151
157
 
152
158
  The permissions you actually want to define are as follows (using CanCan):
@@ -157,7 +163,6 @@ if user.is?(:admin)
157
163
  end
158
164
  ```
159
165
 
160
-
161
166
  ## License
162
167
 
163
168
  MIT License. Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)
@@ -181,4 +186,3 @@ rake spec
181
186
  5. Bonus points for test coverage
182
187
  6. Create new Pull Request
183
188
 
184
-
@@ -8,11 +8,26 @@ module Effective
8
8
  name[1...name.index('.') || name.length] # remove the _ and .html.haml
9
9
  end.uniq.sort
10
10
 
11
- @partials.delete('effective_datatable') unless defined?(EffectiveDatatables)
11
+ @partials = @partials.reject { |p| p.start_with?('_') } # Remove any double __ partials
12
12
 
13
13
  @page_title ||= 'Style Guide'
14
14
 
15
- EffectiveStyleGuide.authorized?(self, :show, Effective::StyleGuide.new())
15
+ EffectiveStyleGuide.authorize!(self, :show, Effective::StyleGuide.new())
16
+ end
17
+
18
+ def bootstrap3
19
+ @partials = view_paths.map { |path| Dir["#{path}/effective/style_guide_bootstrap3/_**"] }.flatten.map do |path|
20
+ name = File.basename(path)
21
+ name[1...name.index('.') || name.length] # remove the _ and .html.haml
22
+ end.uniq.sort
23
+
24
+ @partials = @partials.reject { |p| p.start_with?('_') } # Remove any double __ partials
25
+
26
+ @page_title ||= 'Style Guide'
27
+
28
+ EffectiveStyleGuide.authorize!(self, :show, Effective::StyleGuide.new())
29
+
30
+ render 'effective/style_guide_bootstrap3/show'
16
31
  end
17
32
 
18
33
  end
@@ -3,13 +3,25 @@ module Effective
3
3
  acts_as_asset_box files: 1..6
4
4
 
5
5
  ATTRIBUTES = [
6
- :id, :title, :email, :password, :number, :range, :category, :content, :phone,
7
- :archived, :drink, :food, :price, :updated_at, :publish_on, :static_text
6
+ :id, :title, :email, :password, :number, :range, :category, :content, :phone, :fax, :cell,
7
+ :url, :color, :option1, :option2, :option3, :details,
8
+ :archived, :drink, :food, :price, :updated_at, :publish_on, :static_text,
9
+ :start_at, :end_at, :date, :time
8
10
  ]
9
11
 
10
12
  attr_accessor *ATTRIBUTES
11
13
  validates *ATTRIBUTES, presence: true
12
14
 
15
+ def initialize(*args)
16
+ super
17
+
18
+ self.color = 'black'
19
+ end
20
+
21
+ def id
22
+ object_id
23
+ end
24
+
13
25
  def self.columns
14
26
  @columns ||= []
15
27
  end
@@ -0,0 +1,45 @@
1
+ <div class="alert alert-success" role="alert">
2
+ This is a success alert—check it out!
3
+ </div>
4
+ <div class="alert alert-danger" role="alert">
5
+ This is a danger alert—check it out!
6
+ </div>
7
+ <div class="alert alert-warning" role="alert">
8
+ This is a warning alert—check it out!
9
+ </div>
10
+ <div class="alert alert-info" role="alert">
11
+ This is a info alert—check it out!
12
+ </div>
13
+
14
+ <br>
15
+
16
+ <div class="alert alert-success" role="alert">
17
+ This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
18
+ </div>
19
+ <div class="alert alert-danger" role="alert">
20
+ This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
21
+ </div>
22
+ <div class="alert alert-warning" role="alert">
23
+ This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
24
+ </div>
25
+ <div class="alert alert-info" role="alert">
26
+ This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
27
+ </div>
28
+
29
+ <br>
30
+
31
+ <div class="alert alert-success" role="alert">
32
+ <h4 class="alert-heading">Well done!</h4>
33
+ <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
34
+ <hr>
35
+ <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
36
+ </div>
37
+
38
+ <br>
39
+
40
+ <div class="alert alert-warning alert-dismissible fade show" role="alert">
41
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
42
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
43
+ <span aria-hidden="true">&times;</span>
44
+ </button>
45
+ </div>
@@ -0,0 +1,45 @@
1
+ <h1>Example heading <span class="badge badge-secondary">New</span></h1>
2
+ <h2>Example heading <span class="badge badge-secondary">New</span></h2>
3
+ <h3>Example heading <span class="badge badge-secondary">New</span></h3>
4
+ <h4>Example heading <span class="badge badge-secondary">New</span></h4>
5
+ <h5>Example heading <span class="badge badge-secondary">New</span></h5>
6
+ <h6>Example heading <span class="badge badge-secondary">New</span></h6>
7
+
8
+ <p><br></p>
9
+
10
+ <button type="button" class="btn btn-primary">
11
+ Notifications <span class="badge badge-light">4</span>
12
+ </button>
13
+
14
+ <p><br></p>
15
+
16
+ <span class="badge badge-primary">Primary</span>
17
+ <span class="badge badge-secondary">Secondary</span>
18
+ <span class="badge badge-success">Success</span>
19
+ <span class="badge badge-danger">Danger</span>
20
+ <span class="badge badge-warning">Warning</span>
21
+ <span class="badge badge-info">Info</span>
22
+ <span class="badge badge-light">Light</span>
23
+ <span class="badge badge-dark">Dark</span>
24
+
25
+ <p><br></p>
26
+
27
+ <span class="badge badge-pill badge-primary">Primary</span>
28
+ <span class="badge badge-pill badge-secondary">Secondary</span>
29
+ <span class="badge badge-pill badge-success">Success</span>
30
+ <span class="badge badge-pill badge-danger">Danger</span>
31
+ <span class="badge badge-pill badge-warning">Warning</span>
32
+ <span class="badge badge-pill badge-info">Info</span>
33
+ <span class="badge badge-pill badge-light">Light</span>
34
+ <span class="badge badge-pill badge-dark">Dark</span>
35
+
36
+ <p><br></p>
37
+
38
+ <a href="#" class="badge badge-primary">Primary</a>
39
+ <a href="#" class="badge badge-secondary">Secondary</a>
40
+ <a href="#" class="badge badge-success">Success</a>
41
+ <a href="#" class="badge badge-danger">Danger</a>
42
+ <a href="#" class="badge badge-warning">Warning</a>
43
+ <a href="#" class="badge badge-info">Info</a>
44
+ <a href="#" class="badge badge-light">Light</a>
45
+ <a href="#" class="badge badge-dark">Dark</a>
@@ -0,0 +1,20 @@
1
+ <nav aria-label="breadcrumb">
2
+ <ol class="breadcrumb">
3
+ <li class="breadcrumb-item active" aria-current="page">Home</li>
4
+ </ol>
5
+ </nav>
6
+
7
+ <nav aria-label="breadcrumb">
8
+ <ol class="breadcrumb">
9
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
10
+ <li class="breadcrumb-item active" aria-current="page">Library</li>
11
+ </ol>
12
+ </nav>
13
+
14
+ <nav aria-label="breadcrumb">
15
+ <ol class="breadcrumb">
16
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
17
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
18
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
19
+ </ol>
20
+ </nav>
@@ -0,0 +1,87 @@
1
+ <button type="button" class="btn btn-primary">Primary</button>
2
+ <button type="button" class="btn btn-secondary">Secondary</button>
3
+ <button type="button" class="btn btn-success">Success</button>
4
+ <button type="button" class="btn btn-danger">Danger</button>
5
+ <button type="button" class="btn btn-warning">Warning</button>
6
+ <button type="button" class="btn btn-info">Info</button>
7
+ <button type="button" class="btn btn-light">Light</button>
8
+ <button type="button" class="btn btn-dark">Dark</button>
9
+ <button type="button" class="btn btn-link">Link</button>
10
+
11
+ <p><br></p>
12
+
13
+ <a class="btn btn-primary" href="#" role="button">Link</a>
14
+ <button class="btn btn-primary" type="submit">Button</button>
15
+ <input class="btn btn-primary" type="button" value="Input">
16
+ <input class="btn btn-primary" type="submit" value="Submit">
17
+ <input class="btn btn-primary" type="reset" value="Reset">
18
+
19
+ <p><br></p>
20
+
21
+ <button type="button" class="btn btn-outline-primary">Primary</button>
22
+ <button type="button" class="btn btn-outline-secondary">Secondary</button>
23
+ <button type="button" class="btn btn-outline-success">Success</button>
24
+ <button type="button" class="btn btn-outline-danger">Danger</button>
25
+ <button type="button" class="btn btn-outline-warning">Warning</button>
26
+ <button type="button" class="btn btn-outline-info">Info</button>
27
+ <button type="button" class="btn btn-outline-light">Light</button>
28
+ <button type="button" class="btn btn-outline-dark">Dark</button>
29
+
30
+ <p><br></p>
31
+
32
+ <button type="button" class="btn btn-primary btn-lg">Large button</button>
33
+ <button type="button" class="btn btn-secondary btn-lg">Large button</button>
34
+
35
+ <p><br></p>
36
+
37
+ <button type="button" class="btn btn-primary btn-sm">Small button</button>
38
+ <button type="button" class="btn btn-secondary btn-sm">Small button</button>
39
+
40
+ <p><br></p>
41
+
42
+ <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
43
+ <button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
44
+
45
+ <p><br></p>
46
+
47
+ <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
48
+ <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
49
+
50
+ <p><br></p>
51
+
52
+ <button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
53
+ <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
54
+
55
+ <p><br></p>
56
+
57
+ <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
58
+ <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
59
+
60
+ <p><br></p>
61
+
62
+ <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
63
+ Single toggle
64
+ </button>
65
+
66
+ <p><br></p>
67
+
68
+ <div class="btn-group-toggle" data-toggle="buttons">
69
+ <label class="btn btn-secondary active">
70
+ <input type="checkbox" checked autocomplete="off"> Checked
71
+ </label>
72
+ </div>
73
+
74
+ <p><br></p>
75
+
76
+
77
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
78
+ <label class="btn btn-secondary active">
79
+ <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
80
+ </label>
81
+ <label class="btn btn-secondary">
82
+ <input type="radio" name="options" id="option2" autocomplete="off"> Radio
83
+ </label>
84
+ <label class="btn btn-secondary">
85
+ <input type="radio" name="options" id="option3" autocomplete="off"> Radio
86
+ </label>
87
+ </div>
@@ -0,0 +1,90 @@
1
+ <div class="btn-group" role="group" aria-label="Basic example">
2
+ <button type="button" class="btn btn-secondary">Left</button>
3
+ <button type="button" class="btn btn-secondary">Middle</button>
4
+ <button type="button" class="btn btn-secondary">Right</button>
5
+ </div>
6
+
7
+ <p><br></p>
8
+
9
+ <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
10
+ <div class="btn-group mr-2" role="group" aria-label="First group">
11
+ <button type="button" class="btn btn-secondary">1</button>
12
+ <button type="button" class="btn btn-secondary">2</button>
13
+ <button type="button" class="btn btn-secondary">3</button>
14
+ <button type="button" class="btn btn-secondary">4</button>
15
+ </div>
16
+ <div class="btn-group mr-2" role="group" aria-label="Second group">
17
+ <button type="button" class="btn btn-secondary">5</button>
18
+ <button type="button" class="btn btn-secondary">6</button>
19
+ <button type="button" class="btn btn-secondary">7</button>
20
+ </div>
21
+ <div class="btn-group" role="group" aria-label="Third group">
22
+ <button type="button" class="btn btn-secondary">8</button>
23
+ </div>
24
+ </div>
25
+
26
+ <p><br></p>
27
+
28
+ <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
29
+ <div class="btn-group mr-2" role="group" aria-label="First group">
30
+ <button type="button" class="btn btn-secondary">1</button>
31
+ <button type="button" class="btn btn-secondary">2</button>
32
+ <button type="button" class="btn btn-secondary">3</button>
33
+ <button type="button" class="btn btn-secondary">4</button>
34
+ </div>
35
+ <div class="input-group">
36
+ <div class="input-group-prepend">
37
+ <div class="input-group-text" id="btnGroupAddon">@</div>
38
+ </div>
39
+ <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
40
+ </div>
41
+ </div>
42
+
43
+ <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
44
+ <div class="btn-group" role="group" aria-label="First group">
45
+ <button type="button" class="btn btn-secondary">1</button>
46
+ <button type="button" class="btn btn-secondary">2</button>
47
+ <button type="button" class="btn btn-secondary">3</button>
48
+ <button type="button" class="btn btn-secondary">4</button>
49
+ </div>
50
+ <div class="input-group">
51
+ <div class="input-group-prepend">
52
+ <div class="input-group-text" id="btnGroupAddon2">@</div>
53
+ </div>
54
+ <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
55
+ </div>
56
+ </div>
57
+
58
+ <p><br></p>
59
+
60
+ <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
61
+ <button type="button" class="btn btn-secondary">1</button>
62
+ <button type="button" class="btn btn-secondary">2</button>
63
+
64
+ <div class="btn-group" role="group">
65
+ <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
66
+ Dropdown
67
+ </button>
68
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
69
+ <a class="dropdown-item" href="#">Dropdown link</a>
70
+ <a class="dropdown-item" href="#">Dropdown link</a>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <p><br></p>
76
+
77
+ <div class="btn-group-vertical">
78
+ <button type="button" class="btn btn-secondary">1</button>
79
+ <button type="button" class="btn btn-secondary">2</button>
80
+
81
+ <div class="btn-group" role="group">
82
+ <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
83
+ Dropdown
84
+ </button>
85
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
86
+ <a class="dropdown-item" href="#">Dropdown link</a>
87
+ <a class="dropdown-item" href="#">Dropdown link</a>
88
+ </div>
89
+ </div>
90
+ </div>
@@ -0,0 +1,496 @@
1
+ <div class="card" style="width: 18rem;">
2
+ <img class="card-img-top" src="http://placehold.it/286x180" alt="Card image cap">
3
+ <div class="card-body">
4
+ <h5 class="card-title">Card title</h5>
5
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
6
+ <a href="#" class="btn btn-primary">Go somewhere</a>
7
+ </div>
8
+ </div>
9
+
10
+ <p><br></p>
11
+
12
+ <div class="card">
13
+ <div class="card-body">
14
+ This is some text within a card body.
15
+ </div>
16
+ </div>
17
+
18
+ <p><br></p>
19
+
20
+ <div class="card" style="width: 18rem;">
21
+ <div class="card-body">
22
+ <h5 class="card-title">Card title</h5>
23
+ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
24
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
25
+ <a href="#" class="card-link">Card link</a>
26
+ <a href="#" class="card-link">Another link</a>
27
+ </div>
28
+ </div>
29
+
30
+ <p><br></p>
31
+
32
+ <div class="card" style="width: 18rem;">
33
+ <img class="card-img-top" src="http://placehold.it/286x180" alt="Card image cap">
34
+ <div class="card-body">
35
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
36
+ </div>
37
+ </div>
38
+
39
+ <p><br></p>
40
+
41
+ <div class="card" style="width: 18rem;">
42
+ <ul class="list-group list-group-flush">
43
+ <li class="list-group-item">Cras justo odio</li>
44
+ <li class="list-group-item">Dapibus ac facilisis in</li>
45
+ <li class="list-group-item">Vestibulum at eros</li>
46
+ </ul>
47
+ </div>
48
+
49
+ <p><br></p>
50
+
51
+ <div class="card" style="width: 18rem;">
52
+ <div class="card-header">
53
+ Featured
54
+ </div>
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">Vestibulum at eros</li>
59
+ </ul>
60
+ </div>
61
+
62
+ <p><br></p>
63
+
64
+ <div class="card" style="width: 18rem;">
65
+ <img class="card-img-top" src="http://placehold.it/286x180" alt="Card image cap">
66
+ <div class="card-body">
67
+ <h5 class="card-title">Card title</h5>
68
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
69
+ </div>
70
+ <ul class="list-group list-group-flush">
71
+ <li class="list-group-item">Cras justo odio</li>
72
+ <li class="list-group-item">Dapibus ac facilisis in</li>
73
+ <li class="list-group-item">Vestibulum at eros</li>
74
+ </ul>
75
+ <div class="card-body">
76
+ <a href="#" class="card-link">Card link</a>
77
+ <a href="#" class="card-link">Another link</a>
78
+ </div>
79
+ </div>
80
+
81
+ <p><br></p>
82
+
83
+ <div class="card">
84
+ <div class="card-header">
85
+ Featured
86
+ </div>
87
+ <div class="card-body">
88
+ <h5 class="card-title">Special title treatment</h5>
89
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
90
+ <a href="#" class="btn btn-primary">Go somewhere</a>
91
+ </div>
92
+ </div>
93
+
94
+ <p><br></p>
95
+
96
+ <div class="card">
97
+ <h5 class="card-header">Featured</h5>
98
+ <div class="card-body">
99
+ <h5 class="card-title">Special title treatment</h5>
100
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
101
+ <a href="#" class="btn btn-primary">Go somewhere</a>
102
+ </div>
103
+ </div>
104
+
105
+ <p><br></p>
106
+
107
+ <div class="card">
108
+ <div class="card-header">
109
+ Quote
110
+ </div>
111
+ <div class="card-body">
112
+ <blockquote class="blockquote mb-0">
113
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
114
+ <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
115
+ </blockquote>
116
+ </div>
117
+ </div>
118
+
119
+ <p><br></p>
120
+
121
+ <div class="card text-center">
122
+ <div class="card-header">
123
+ Featured
124
+ </div>
125
+ <div class="card-body">
126
+ <h5 class="card-title">Special title treatment</h5>
127
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
128
+ <a href="#" class="btn btn-primary">Go somewhere</a>
129
+ </div>
130
+ <div class="card-footer text-muted">
131
+ 2 days ago
132
+ </div>
133
+ </div>
134
+
135
+ <p><br></p>
136
+
137
+ <div class="row">
138
+ <div class="col-sm-6">
139
+ <div class="card">
140
+ <div class="card-body">
141
+ <h5 class="card-title">Special title treatment</h5>
142
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
143
+ <a href="#" class="btn btn-primary">Go somewhere</a>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ <div class="col-sm-6">
148
+ <div class="card">
149
+ <div class="card-body">
150
+ <h5 class="card-title">Special title treatment</h5>
151
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
152
+ <a href="#" class="btn btn-primary">Go somewhere</a>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <p><br></p>
159
+
160
+ <div class="card" style="width: 18rem;">
161
+ <div class="card-body">
162
+ <h5 class="card-title">Special title treatment</h5>
163
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
164
+ <a href="#" class="btn btn-primary">Go somewhere</a>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="card text-center" style="width: 18rem;">
169
+ <div class="card-body">
170
+ <h5 class="card-title">Special title treatment</h5>
171
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
172
+ <a href="#" class="btn btn-primary">Go somewhere</a>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="card text-right" style="width: 18rem;">
177
+ <div class="card-body">
178
+ <h5 class="card-title">Special title treatment</h5>
179
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
180
+ <a href="#" class="btn btn-primary">Go somewhere</a>
181
+ </div>
182
+ </div>
183
+
184
+ <p><br></p>
185
+
186
+ <div class="card text-center">
187
+ <div class="card-header">
188
+ <ul class="nav nav-tabs card-header-tabs">
189
+ <li class="nav-item">
190
+ <a class="nav-link active" href="#">Active</a>
191
+ </li>
192
+ <li class="nav-item">
193
+ <a class="nav-link" href="#">Link</a>
194
+ </li>
195
+ <li class="nav-item">
196
+ <a class="nav-link disabled" href="#">Disabled</a>
197
+ </li>
198
+ </ul>
199
+ </div>
200
+ <div class="card-body">
201
+ <h5 class="card-title">Special title treatment</h5>
202
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
203
+ <a href="#" class="btn btn-primary">Go somewhere</a>
204
+ </div>
205
+ </div>
206
+
207
+ <p><br></p>
208
+
209
+ <div class="card mb-3">
210
+ <img class="card-img-top" src="http://placehold.it/1151x180" alt="Card image cap">
211
+ <div class="card-body">
212
+ <h5 class="card-title">Card title</h5>
213
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
214
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
215
+ </div>
216
+ </div>
217
+ <div class="card">
218
+ <div class="card-body">
219
+ <h5 class="card-title">Card title</h5>
220
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
221
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
222
+ </div>
223
+ <img class="card-img-bottom" src="http://placehold.it/1151x180" alt="Card image cap">
224
+ </div>
225
+
226
+ <p><br></p>
227
+
228
+ <div class="card bg-dark text-white">
229
+ <img class="card-img" src="http://placehold.it/1151x680" alt="Card image">
230
+ <div class="card-img-overlay">
231
+ <h5 class="card-title">Card title</h5>
232
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
233
+ <p class="card-text">Last updated 3 mins ago</p>
234
+ </div>
235
+ </div>
236
+
237
+ <p><br></p>
238
+
239
+ <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
240
+ <div class="card-header">Header</div>
241
+ <div class="card-body">
242
+ <h5 class="card-title">Primary card title</h5>
243
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
244
+ </div>
245
+ </div>
246
+ <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
247
+ <div class="card-header">Header</div>
248
+ <div class="card-body">
249
+ <h5 class="card-title">Secondary card title</h5>
250
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
251
+ </div>
252
+ </div>
253
+ <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
254
+ <div class="card-header">Header</div>
255
+ <div class="card-body">
256
+ <h5 class="card-title">Success card title</h5>
257
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
258
+ </div>
259
+ </div>
260
+ <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
261
+ <div class="card-header">Header</div>
262
+ <div class="card-body">
263
+ <h5 class="card-title">Danger card title</h5>
264
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
265
+ </div>
266
+ </div>
267
+ <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
268
+ <div class="card-header">Header</div>
269
+ <div class="card-body">
270
+ <h5 class="card-title">Warning card title</h5>
271
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
272
+ </div>
273
+ </div>
274
+ <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
275
+ <div class="card-header">Header</div>
276
+ <div class="card-body">
277
+ <h5 class="card-title">Info card title</h5>
278
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
279
+ </div>
280
+ </div>
281
+
282
+ <p><br></p>
283
+
284
+ <div class="card border-primary mb-3" style="max-width: 18rem;">
285
+ <div class="card-header">Header</div>
286
+ <div class="card-body text-primary">
287
+ <h5 class="card-title">Primary card title</h5>
288
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
289
+ </div>
290
+ </div>
291
+ <div class="card border-secondary mb-3" style="max-width: 18rem;">
292
+ <div class="card-header">Header</div>
293
+ <div class="card-body text-secondary">
294
+ <h5 class="card-title">Secondary card title</h5>
295
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
296
+ </div>
297
+ </div>
298
+ <div class="card border-success mb-3" style="max-width: 18rem;">
299
+ <div class="card-header">Header</div>
300
+ <div class="card-body text-success">
301
+ <h5 class="card-title">Success card title</h5>
302
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
303
+ </div>
304
+ </div>
305
+ <div class="card border-danger mb-3" style="max-width: 18rem;">
306
+ <div class="card-header">Header</div>
307
+ <div class="card-body text-danger">
308
+ <h5 class="card-title">Danger card title</h5>
309
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
310
+ </div>
311
+ </div>
312
+ <div class="card border-warning mb-3" style="max-width: 18rem;">
313
+ <div class="card-header">Header</div>
314
+ <div class="card-body text-warning">
315
+ <h5 class="card-title">Warning card title</h5>
316
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
317
+ </div>
318
+ </div>
319
+ <div class="card border-info mb-3" style="max-width: 18rem;">
320
+ <div class="card-header">Header</div>
321
+ <div class="card-body text-info">
322
+ <h5 class="card-title">Info card title</h5>
323
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
324
+ </div>
325
+ </div>
326
+
327
+ <p><br></p>
328
+
329
+ <div class="card border-success mb-3" style="max-width: 18rem;">
330
+ <div class="card-header bg-transparent border-success">Header</div>
331
+ <div class="card-body text-success">
332
+ <h5 class="card-title">Success card title</h5>
333
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
334
+ </div>
335
+ <div class="card-footer bg-transparent border-success">Footer</div>
336
+ </div>
337
+
338
+ <p><br></p>
339
+
340
+ <div class="card-group">
341
+ <div class="card">
342
+ <img class="card-img-top" src="http://placehold.it/383x180" alt="Card image cap">
343
+ <div class="card-body">
344
+ <h5 class="card-title">Card title</h5>
345
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
346
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
347
+ </div>
348
+ </div>
349
+ <div class="card">
350
+ <img class="card-img-top" src="http://placehold.it/383x180" alt="Card image cap">
351
+ <div class="card-body">
352
+ <h5 class="card-title">Card title</h5>
353
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
354
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
355
+ </div>
356
+ </div>
357
+ <div class="card">
358
+ <img class="card-img-top" src="http://placehold.it/383x180" alt="Card image cap">
359
+ <div class="card-body">
360
+ <h5 class="card-title">Card title</h5>
361
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
362
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <p><br></p>
368
+
369
+ <div class="card-group">
370
+ <div class="card">
371
+ <img class="card-img-top" src="http://placehold.it/383x180" alt="Card image cap">
372
+ <div class="card-body">
373
+ <h5 class="card-title">Card title</h5>
374
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
375
+ </div>
376
+ <div class="card-footer">
377
+ <small class="text-muted">Last updated 3 mins ago</small>
378
+ </div>
379
+ </div>
380
+ <div class="card">
381
+ <img class="card-img-top" src="http://placehold.it/383x180" alt="Card image cap">
382
+ <div class="card-body">
383
+ <h5 class="card-title">Card title</h5>
384
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
385
+ </div>
386
+ <div class="card-footer">
387
+ <small class="text-muted">Last updated 3 mins ago</small>
388
+ </div>
389
+ </div>
390
+ <div class="card">
391
+ <img class="card-img-top" src="http://placehold.it/383x180" alt="Card image cap">
392
+ <div class="card-body">
393
+ <h5 class="card-title">Card title</h5>
394
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
395
+ </div>
396
+ <div class="card-footer">
397
+ <small class="text-muted">Last updated 3 mins ago</small>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <p><br></p>
403
+
404
+ <div class="card-deck">
405
+ <div class="card">
406
+ <img class="card-img-top" src="http://placehold.it/362x200" alt="Card image cap">
407
+ <div class="card-body">
408
+ <h5 class="card-title">Card title</h5>
409
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
410
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
411
+ </div>
412
+ </div>
413
+ <div class="card">
414
+ <img class="card-img-top" src="http://placehold.it/362x200" alt="Card image cap">
415
+ <div class="card-body">
416
+ <h5 class="card-title">Card title</h5>
417
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
418
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
419
+ </div>
420
+ </div>
421
+ <div class="card">
422
+ <img class="card-img-top" src="http://placehold.it/362x200" alt="Card image cap">
423
+ <div class="card-body">
424
+ <h5 class="card-title">Card title</h5>
425
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
426
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <p><br></p>
432
+
433
+ <div class="card-columns">
434
+ <div class="card">
435
+ <img class="card-img-top" src="http://placehold.it/286x180" alt="Card image cap">
436
+ <div class="card-body">
437
+ <h5 class="card-title">Card title that wraps to a new line</h5>
438
+ <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
439
+ </div>
440
+ </div>
441
+ <div class="card p-3">
442
+ <blockquote class="blockquote mb-0 card-body">
443
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
444
+ <footer class="blockquote-footer">
445
+ <small class="text-muted">
446
+ Someone famous in <cite title="Source Title">Source Title</cite>
447
+ </small>
448
+ </footer>
449
+ </blockquote>
450
+ </div>
451
+ <div class="card">
452
+ <img class="card-img-top" src="http://placehold.it/286x180" alt="Card image cap">
453
+ <div class="card-body">
454
+ <h5 class="card-title">Card title</h5>
455
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
456
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
457
+ </div>
458
+ </div>
459
+ <div class="card bg-primary text-white text-center p-3">
460
+ <blockquote class="blockquote mb-0">
461
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
462
+ <footer class="blockquote-footer">
463
+ <small>
464
+ Someone famous in <cite title="Source Title">Source Title</cite>
465
+ </small>
466
+ </footer>
467
+ </blockquote>
468
+ </div>
469
+ <div class="card text-center">
470
+ <div class="card-body">
471
+ <h5 class="card-title">Card title</h5>
472
+ <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
473
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
474
+ </div>
475
+ </div>
476
+ <div class="card">
477
+ <img class="card-img" src="http://placehold.it/286x180" alt="Card image">
478
+ </div>
479
+ <div class="card p-3 text-right">
480
+ <blockquote class="blockquote mb-0">
481
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
482
+ <footer class="blockquote-footer">
483
+ <small class="text-muted">
484
+ Someone famous in <cite title="Source Title">Source Title</cite>
485
+ </small>
486
+ </footer>
487
+ </blockquote>
488
+ </div>
489
+ <div class="card">
490
+ <div class="card-body">
491
+ <h5 class="card-title">Card title</h5>
492
+ <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
493
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
494
+ </div>
495
+ </div>
496
+ </div>