20 | $end$]]>
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Eric Lebetsamer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/form-group-horizontal-checkbox.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Checkbox group
7 | Eric Lebetsamer
8 | A form group that contains a checkbox, meant for use in a horizontal form.
9 | bs-form-group-horizontal-checkbox
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | label
18 | Text for the label
19 | My label
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 | $end$]]>
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/BootstrapSnippets/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Eric Lebetsamer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/tooltip.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Tooltip
7 | Eric Lebetsamer
8 | The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
9 | bs-tooltip
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | tooltip
18 | The text for the tooltip
19 | Some tooltip text!
20 |
21 |
22 | content
23 | The content for the tooltip link
24 | Hover over me
25 |
26 |
27 |
28 | $content$$end$]]>
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/progress-bar.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Progress bar
7 | Eric Lebetsamer
8 | Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
9 | bs-progress-bar
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | progress
18 | The percentage of progress
19 | 50
20 |
21 |
22 |
23 |
24 |
25 | $progress$% Complete
26 |
27 | $end$]]>
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/form-group-select.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Form group select
7 | Eric Lebetsamer
8 | A form group with a select dropdown and a label.
9 | bs-form-group-select
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the select
19 | form-group-select
20 |
21 |
22 | label
23 | Text for the label
24 | My label
25 |
26 |
27 |
28 |
29 |
30 |
31 | ]]>
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/VisualStudioGalleryDescription.html:
--------------------------------------------------------------------------------
1 |
Bootstrap Snippets for Visual Studio
2 |
The ultimate snippet pack for web developers using the Twitter Bootstrap framework
3 |
Contains a collection of Twitter Bootstrap snippets for Visual Studio 2012/2013/2015.
26 |
27 | $end$]]>
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/panel.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Panel
7 | Eric Lebetsamer
8 | While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
9 | bs-panel
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | heading
18 | The heading text for the panel
19 | Panel heading
20 |
21 |
22 | content
23 | The content for the panel
24 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
25 |
26 |
27 |
28 |
29 |
$heading$
30 |
31 | $content$
32 |
33 | $end$]]>
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/page-header.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Page header
7 | Eric Lebetsamer
8 | A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
9 | bs-page-header
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | heading
18 | The main text for the page header
19 | Example page header
20 |
21 |
22 | content
23 | The subtext for the page header
24 | Subtext for header
25 |
26 |
27 |
28 |
29 |
$heading$ $content$
30 | $end$]]>
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/form-group.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Form group
7 | Eric Lebetsamer
8 | A form group with an input and a label.
9 | bs-form-group
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the input
19 | form-group-input
20 |
21 |
22 | label
23 | Text for the label
24 | My label
25 |
26 |
27 | type
28 | Type of the input
29 | text
30 |
31 |
32 |
33 |
34 |
35 |
36 | $end$]]>
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/input-group.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Input group
7 | Eric Lebetsamer
8 | Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
9 | bs-input-group
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | addon
18 | The text for the addon
19 | @
20 |
21 |
22 | placeholder
23 | The placeholder text for the input
24 | Placecholder
25 |
26 |
27 |
28 |
29 | $addon$
30 |
31 | $end$]]>
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/form-group-inline.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Form group inline
7 | Eric Lebetsamer
8 | A form group with an input and a label, meant for use in an inline form.
9 | bs-form-group-inline
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the input
19 | form-group-input
20 |
21 |
22 | label
23 | Text for the label
24 | My label
25 |
26 |
27 | type
28 | Type of the input
29 | text
30 |
31 |
32 |
33 |
34 |
35 |
36 | $end$]]>
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/btn-dropdown-split.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Dropdown split button
7 | Eric Lebetsamer
8 | Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
9 | bs-btn-dropdown-split
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 |
18 |
22 |
29 | $end$]]>
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/form-group-horizontal.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Form group horizontal
7 | Eric Lebetsamer
8 | A form group with an input and a label, meant for use in a horizontal form.
9 | bs-form-group-horizontal
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the input
19 | form-group-input
20 |
21 |
22 | label
23 | Text for the label
24 | My label
25 |
26 |
27 | type
28 | Type of the input
29 | text
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | $end$]]>
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/popover.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Popover
7 | Eric Lebetsamer
8 | Add small overlays of content, like those on the iPad, to any element for housing secondary information.
9 | bs-popover
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | title
18 | The title for the popover
19 | Popover title
20 |
21 |
22 | popover
23 | The text for the popover
24 | And here's some amazing content. It's very engaging. Right?
25 |
26 |
27 | content
28 | The content for the popover link
29 | Click to toggle popover
30 |
31 |
32 |
33 | $content$$end$]]>
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/collapse.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Collapsible div
7 | Eric Lebetsamer
8 | Get base styles and flexible support for collapsible components like accordions and navigation.
9 | bs-collapse
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the collapse object
19 | collapse
20 |
21 |
22 | button
23 | The button text for the collapse object
24 | Open collapse
25 |
26 |
27 | content
28 | The content for the collapse object
29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30 |
31 |
32 |
33 |
34 | $button$
35 |
36 |
37 | $content$
38 |
$end$]]>
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/list-group.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | List group
7 | Eric Lebetsamer
8 | List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
9 | bs-list-group
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | content1
18 | Item 1 content
19 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
20 |
21 |
22 | content2
23 | Item 2 content
24 | Morbi eget libero quis metus consectetur semper.
25 |
26 |
27 | content3
28 | Item 3 content
29 | Suspendisse ullamcorper massa eget eleifend iaculis.
30 |
31 |
32 |
33 |
34 |
$end$]]>
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/form-horizontal.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Form horizontal
7 | Eric Lebetsamer
8 | Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
9 | bs-form-horizontal
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | $end$]]>
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/BootstrapSnippets.sln:
--------------------------------------------------------------------------------
1 |
2 | Microsoft Visual Studio Solution File, Format Version 12.00
3 | # Visual Studio 2013
4 | VisualStudioVersion = 12.0.31101.0
5 | MinimumVisualStudioVersion = 10.0.40219.1
6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BootstrapSnippets", "BootstrapSnippets\BootstrapSnippets.csproj", "{48710FDB-E703-4E3A-9092-4E37E30BEB40}"
7 | EndProject
8 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{D387F1BD-4860-41AF-9BEA-081C8A4A3F2D}"
9 | ProjectSection(SolutionItems) = preProject
10 | build.js = build.js
11 | change-log.md = change-log.md
12 | LICENSE = LICENSE
13 | package.json = package.json
14 | README.md = README.md
15 | snippet-listing-markdown.handlebars = snippet-listing-markdown.handlebars
16 | snippet-listing.md = snippet-listing.md
17 | VisualStudioGalleryDescription.html = VisualStudioGalleryDescription.html
18 | EndProjectSection
19 | EndProject
20 | Global
21 | GlobalSection(SolutionConfigurationPlatforms) = preSolution
22 | Debug|Any CPU = Debug|Any CPU
23 | Release|Any CPU = Release|Any CPU
24 | EndGlobalSection
25 | GlobalSection(ProjectConfigurationPlatforms) = postSolution
26 | {48710FDB-E703-4E3A-9092-4E37E30BEB40}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
27 | {48710FDB-E703-4E3A-9092-4E37E30BEB40}.Debug|Any CPU.Build.0 = Debug|Any CPU
28 | {48710FDB-E703-4E3A-9092-4E37E30BEB40}.Release|Any CPU.ActiveCfg = Release|Any CPU
29 | {48710FDB-E703-4E3A-9092-4E37E30BEB40}.Release|Any CPU.Build.0 = Release|Any CPU
30 | EndGlobalSection
31 | GlobalSection(SolutionProperties) = preSolution
32 | HideSolutionNode = FALSE
33 | EndGlobalSection
34 | EndGlobal
35 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/thumbnail.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Thumbnail
7 | Eric Lebetsamer
8 | Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
9 | bs-thumbnail
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | image
18 | The image for the thumbnail object
19 | http://placehold.it/64x64
20 |
21 |
22 | heading
23 | The caption heading for the thumbnail object
24 | Thumbnail caption heading
25 |
26 |
27 | content
28 | The caption content for the thumbnail object
29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.]]>
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
$heading$
39 | $content$
40 |
41 |
42 |
43 | $end$]]>
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/media-object.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Media object
7 | Eric Lebetsamer
8 | Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
9 | bs-media-object
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | image
18 | The image for the media object
19 | http://placehold.it/64x64
20 |
21 |
22 | heading
23 | The heading for the media object
24 | Media heading
25 |
26 |
27 | content
28 | The content for the media object
29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30 |
31 |
32 |
33 |
34 |
97 | $end$]]>
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/change-log.md:
--------------------------------------------------------------------------------
1 | Change log
2 | ==========
3 |
4 | Version 1.0.12
5 | --------------
6 |
7 | Bump Bootstrap version to 3.3.7
8 |
9 | Bump html5shiv to v3.7.3
10 |
11 | Bump jQuery version to 1.12.4
12 |
13 | Update snippets based on current bootstrap docs.
14 |
15 | Update snippets to use spaces instead of tabs (because the bootstrap docs/examples use spaces).
16 |
17 | Add `$end$` tags to all snippets to control cursor placement when snippet is inserted. Most snippets will place the cursor just at the end of the snippet.
18 |
19 | Version 1.0.11
20 | --------------
21 |
22 | Bump Bootstrap version to 3.3.5
23 |
24 | A big thanks to madskristensen@c6c6b24a5c93f666a2d35dd89aeb76d5d3f5468e for his pull request:
25 |
26 | 1. Added an icon for each snippets
27 | - Each icon works for both Light and Dark theme
28 | 2. Update the titles of each snippet
29 | - Removed _Bootstrap 3.x_ and change casing
30 | 3. Updated .csproj file so the VSIX project can be opened in VS2015 as well VS2013
31 |
32 |
33 | Version 1.0.10
34 | -------------
35 |
36 | Add missing snippets in to VSIX.
37 |
38 | Version 1.0.9
39 | -------------
40 |
41 | Bump Bootstrap version to 3.3.4.
42 | Removed support for Visual Studio Express SKUs. Couldn't get this to work.
43 |
44 | Version 1.0.8
45 | -------------
46 |
47 | Added support for Visual Studio Express 2012 for Web and Visual Studio Express 2013 for Web.
48 |
49 | Version 1.0.7
50 | -------------
51 |
52 | Updated snippet for media object and media list. Using new media-left and media-right classes instead of depreciated pull-left and pull-right.
53 |
54 | Version 1.0.6
55 | -------------
56 |
57 | Bump Bootstrap version to 3.3.2.
58 | Bump jQuery version from *1.11.1* to *1.11.2*.
59 | Add support for Visual Studio 2015 (thanks to Mads Kristensen for the [pull request](https://github.com/elebetsamer/bootstrap-snippets-visual-studio/pull/2))
60 |
61 | Version 1.0.5
62 | -------------
63 |
64 | Added the following snippets:
65 |
66 | * form-group-select.snippet
67 | * modal-lg.snippet
68 | * modal.sm.snippet
69 |
70 | Removed extra white space (tab indents) in a number of snippets.
71 |
72 |
73 | Version 1.0.4
74 | -------------
75 |
76 | Added miscellaneous files (change log, readme, etc) to visual studio solution as "Solution Items".
77 |
78 | **template.snippet**:
79 | Removed icon declaration as it wasn't supposed to be there.
80 | Added declaration for bootstrap version number. Defaults to version *3.2.0*.
81 | Changed from netdna.bootstrapcdn.com to maxcdn.bootstrapcdn.com.
82 | Changed url to not use specific protocol.
83 | Bump jQuery version from *1.11.0* to *1.11.1*.
84 | Bump html5shiv version from *3.7.0* to *3.7.2*.
85 |
86 | Version 1.0.3
87 | -------------
88 |
89 | Added the following snippets:
90 |
91 | * form.snippet
92 | * form-group.snippet
93 | * form-group-checkbox.snippet
94 | * form-group-horizontal.snippet
95 | * form-group-horizontal-checkbox.snippet
96 | * form-group-inline.snippet
97 | * form-group-radio.snippet
98 | * form-horizontal.snippet
99 | * form-inline.snippet
100 |
101 | Version 1.0.2
102 | -------------
103 |
104 | **modal.snippet**:
105 | Removed button to launch modal. Most of the time I just need the modal code without a button to launch it.
106 | Also added additional declarations for close-text and save-text.
107 |
108 | Version 1.0.1
109 | -------------
110 |
111 | **accordion.snippet**
112 | Small fix to make sure that the data-parent attribute is set to the id that is set as part of the snippet.
113 |
114 | Version 1.0
115 | -------------
116 |
117 | Initial version
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/accordion.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Accordion
7 | Eric Lebetsamer
8 | Extend the default collapse behavior to create an accordion with the panel component.
9 | bs-accordion
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the modal
19 | collapse
20 |
21 |
22 | heading1
23 | The heading for the first accordion object
24 | Accordion heading 1
25 |
26 |
27 | content1
28 | The content for the first accordion object
29 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30 |
31 |
32 | heading2
33 | The heading for the second accordion object
34 | Accordion heading 2
35 |
36 |
37 | content2
38 | The content for the second accordion object
39 | Morbi eget libero quis metus consectetur semper.
40 |
41 |
42 | heading3
43 | The heading for the third accordion object
44 | Accordion heading 3
45 |
46 |
47 | content3
48 | The content for the third accordion object
49 | Suspendisse ullamcorper massa eget eleifend iaculis.
50 |
51 |
52 |
53 |
54 |
96 | $end$]]>
97 |
98 |
99 |
100 |
--------------------------------------------------------------------------------
/BootstrapSnippets/Snippets/HTML/Bootstrap/carousel.snippet:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Carousel
7 | Eric Lebetsamer
8 | A generic plugin and component for cycling through elements like a carousel.
9 | bs-carousel
10 |
11 | Expansion
12 |
13 |
14 |
15 |
16 |
17 | id
18 | ID of the carousel
19 | my-carousel
20 |
21 |
22 | image1
23 | The image for the first item in the carousel
24 |
25 |
26 |
27 | heading1
28 | The heading for the first item in the carousel
29 | Caption heading 1
30 |
31 |
32 | content1
33 | The content for the first item in the carousel
34 | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
35 |
36 |
37 | image2
38 | The image for second item in the carousel
39 |
40 |
41 |
42 | heading2
43 | The heading for the second item in the carousel
44 | Caption heading 2
45 |
46 |
47 | content2
48 | The content for the second item in the carousel
49 | Morbi eget libero quis metus consectetur semper.
50 |
51 |
52 | image3
53 | The image for the third item in the carousel
54 |
55 |
56 |
57 | heading3
58 | The heading for the third item in the carousel
59 | Caption heading 3
60 |
61 |
62 | content3
63 | The content for the third item in the carousel
64 | Suspendisse ullamcorper massa eget eleifend iaculis.
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
6 | Accordion | bs-accordion | HTML | Extend the default collapse behavior to create an accordion with the panel component. |
id
ID of the modal Default value: collapse
heading1
The heading for the first accordion object Default value: Accordion heading 1
content1
The content for the first accordion object Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
heading2
The heading for the second accordion object Default value: Accordion heading 2
content2
The content for the second accordion object Default value: Morbi eget libero quis metus consectetur semper.
heading3
The heading for the third accordion object Default value: Accordion heading 3
content3
The content for the third accordion object Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
7 | Alert | bs-alert | HTML | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. |
content
The content for the alert Default value: <strong>Warning!</strong> Better check yourself, you're not looking too good.
8 | Badge | bs-badge | HTML | Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more. |
content
The content for the badge Default value: 1234
9 | Breadcrumb | bs-breadcrumb | HTML | Indicate the current page's location within a navigational hierarchy. |
None
10 | Dropdown button | bs-btn-dropdown | HTML | Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. |
None
11 | Dropdown split button | bs-btn-dropdown-split | HTML | Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. |
None
12 | Button group | bs-btn-group | HTML | Group a series of buttons together on a single line with the button group. |
None
13 | Toolbar | bs-btn-toolbar | HTML | Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components. |
None
14 | Carousel | bs-carousel | HTML | A generic plugin and component for cycling through elements like a carousel. |
id
ID of the carousel Default value: my-carousel
image1
The image for the first item in the carousel Default value: http://placehold.it/1200x675&text=First+slide
heading1
The heading for the first item in the carousel Default value: Caption heading 1
content1
The content for the first item in the carousel Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
image2
The image for second item in the carousel Default value: http://placehold.it/1200x675&text=Second+slide
heading2
The heading for the second item in the carousel Default value: Caption heading 2
content2
The content for the second item in the carousel Default value: Morbi eget libero quis metus consectetur semper.
image3
The image for the third item in the carousel Default value: http://placehold.it/1200x675&text=Third+slide
heading3
The heading for the third item in the carousel Default value: Caption heading 3
content3
The content for the third item in the carousel Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
15 | Collapsible div | bs-collapse | HTML | Get base styles and flexible support for collapsible components like accordions and navigation. |
id
ID of the collapse object Default value: collapse
button
The button text for the collapse object Default value: Open collapse
content
The content for the collapse object Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
16 | Form | bs-form | HTML | Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing. |
None
17 | Form group | bs-form-group | HTML | A form group with an input and a label. |
id
ID of the input Default value: form-group-input
label
Text for the label Default value: My label
type
Type of the input Default value: text
18 | Checkbox | bs-form-group-checkbox | HTML | A form group that contains a checkbox. |
label
Text for the label Default value: My label
19 | Form group horizontal | bs-form-group-horizontal | HTML | A form group with an input and a label, meant for use in a horizontal form. |
id
ID of the input Default value: form-group-input
label
Text for the label Default value: My label
type
Type of the input Default value: text
20 | Checkbox group | bs-form-group-horizontal-checkbox | HTML | A form group that contains a checkbox, meant for use in a horizontal form. |
label
Text for the label Default value: My label
21 | Form group inline | bs-form-group-inline | HTML | A form group with an input and a label, meant for use in an inline form. |
id
ID of the input Default value: form-group-input
label
Text for the label Default value: My label
type
Type of the input Default value: text
22 | Radio | bs-form-group-radio | HTML | A form group that contains a radio. |
label
Text for the label Default value: My label
23 | Form group select | bs-form-group-select | HTML | A form group with a select dropdown and a label. |
id
ID of the select Default value: form-group-select
label
Text for the label Default value: My label
24 | Form horizontal | bs-form-horizontal | HTML | Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row. |
None
25 | Form inline | bs-form-inline | HTML | Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide. |
None
26 | Glyphicon | bs-glyphicon | HTML | Glyphicons are graphics included with Bootstrap. |
icon
The name of the icon Default value: info-sign
27 | Input group | bs-input-group | HTML | Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control. |
addon
The text for the addon Default value: @
placeholder
The placeholder text for the input Default value: Placecholder
28 | Jumbotron | bs-jumbotron | HTML | A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. |
heading
The heading text for the jumbotron Default value: Jumbotron heading
content
The content for the jumbotron Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
29 | Label | bs-label | HTML | Easily highlight new or unread items by adding a <span class="label label-default"> to links, Bootstrap navs, and more. |
content
The content for the label Default value: Label content
30 | List group | bs-list-group | HTML | List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. |
content1
Item 1 content Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
content2
Item 2 content Default value: Morbi eget libero quis metus consectetur semper.
content3
Item 3 content Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
31 | Media list | bs-media-list | HTML | Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. |
image1
The image for the first media object Default value: http://placehold.it/64x64
heading1
The heading for the first media object Default value: Media heading 1
content1
The content for the first media object Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
image2
The image for second media object Default value: http://placehold.it/64x64
heading2
The heading for the second media object Default value: Media heading 2
content2
The content for the second media object Default value: Morbi eget libero quis metus consectetur semper.
image3
The image for the third media object Default value: http://placehold.it/64x64
heading3
The heading for the third media object Default value: Media heading 3
content3
The content for the third media object Default value: Suspendisse ullamcorper massa eget eleifend iaculis.
32 | Media object | bs-media-object | HTML | Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. |
image
The image for the media object Default value: http://placehold.it/64x64
heading
The heading for the media object Default value: Media heading
content
The content for the media object Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
33 | Modal | bs-modal | HTML | Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. |
id
ID of the modal Default value: myModal
title
Title of the modal Default value: Modal title
content
Content of the modal Default value: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
close-text
Text for the "close" button Default value: Close
save-text
Text for the "save" button Default value: Save
34 | Modal large | bs-modal-lg | HTML | Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. |
id
ID of the modal Default value: myModal
title
Title of the modal Default value: Modal title
content
Content of the modal Default value: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
close-text
Text for the "close" button Default value: Close
save-text
Text for the "save" button Default value: Save
35 | Modal small | bs-modal-sm | HTML | Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. |
id
ID of the modal Default value: myModal
title
Title of the modal Default value: Modal title
content
Content of the modal Default value: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
close-text
Text for the "close" button Default value: Close
save-text
Text for the "save" button Default value: Save
36 | Navigation pills | bs-nav-pills | HTML | Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style. |
None
37 | Navigation tabs | bs-nav-tabs | HTML | Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style. |
None
38 | Navigation bar | bs-navbar | HTML | Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. |
None
39 | Page header | bs-page-header | HTML | A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles). |
heading
The main text for the page header Default value: Example page header
content
The subtext for the page header Default value: Subtext for header
40 | Pager | bs-pager | HTML | Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. |
None
41 | Pagination | bs-pagination | HTML | Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative. |
None
42 | Panel | bs-panel | HTML | While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component. |
heading
The heading text for the panel Default value: Panel heading
content
The content for the panel Default value: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
43 | Popover | bs-popover | HTML | Add small overlays of content, like those on the iPad, to any element for housing secondary information. |
title
The title for the popover Default value: Popover title
popover
The text for the popover Default value: And here's some amazing content. It's very engaging. Right?
content
The content for the popover link Default value: Click to toggle popover
44 | Progress bar | bs-progress-bar | HTML | Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars. |
progress
The percentage of progress Default value: 50
45 | Thumbnail | bs-thumbnail | HTML | Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more. |
image
The image for the thumbnail object Default value: http://placehold.it/64x64
heading
The caption heading for the thumbnail object Default value: Thumbnail caption heading
content
The caption content for the thumbnail object Default value: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
46 | Tooltip | bs-tooltip | HTML | The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. |
tooltip
The text for the tooltip Default value: Some tooltip text!
content
The content for the tooltip link Default value: Hover over me