A sublime plugin complete with Twitter Bootstrap 3 snippets
Feel free to let me know what else you want added via:
- Twitter @JasonMortonNZ
- Issues
- CDN
- Templates
- Forms
- Tables
- Input
- Alerts
- Badges
- Breadcrumbs
- Buttons
- Grid
- Images
- Icons
- Labels
- Pagination
- Navigation
- Panels
- List Groups
- Media Objects
- Icons
- Clearfix
- License
Component | Snippet code |
---|---|
CDN link (both CSS & JS) | bs3-cdn |
CDN link (CSS only) | bs3-cdn:css |
CDN link (JS only) | bs3-cdn:js |
Component | Snippet code |
---|---|
HTML5 Template Layout | bs3-template:html5 |
Component | Snippet code |
---|---|
Form | bs3-form |
Inline Form | bs3-form:inline |
Horizontal Form | bs3-form:horizontal |
Component | Snippet code |
---|---|
Table | bs3-table |
Bordered Table | bs3-table:bordered |
Condensed Table | bs3-table:condensed |
Hover Table | bs3-table:hover |
Striped Table | bs3-table:striped |
Note: you can add " :h " to the end of any input field snippet to make it compatible with Twitter Bootstrap 3 horizontal forms. E.g.
- bs3-input:text:h
- bs3-input:hidden:h
Component | Snippet code | Options |
---|---|---|
Label | bs3-input:label | |
Text Input | bs3-input:text | :h |
Email Input | bs3-input:email | :h |
Password Input | bs3-input:password | :h |
Hidden Input | bs3-input:hidden | :h |
Url Input | bs3-input:url | :h |
Color Input | bs3-input:color | :h |
Number Input | bs3-input:number | :h |
Range Input | bs3-input:range | :h |
Date Input | bs3-input:date | :h |
Week Input | bs3-input:week | :h |
Month Input | bs3-input:month | :h |
Time Input | bs3-input:time | :h |
Tel Input | bs3-input:tel | :h |
Search Input | bs3-input:search | :h |
Reset Input | bs3-input:reset | :h |
Submit Input | bs3-input:submit | :h |
Checkbox Input | bs3-input:checkbox | :h |
Radio Box Input | bs3-input:radio | :h |
Component | Snippet code |
---|---|
Alert Box (Default) | bs3-alert |
Danger Alert Box | bs3-alert:danger |
Info Alert Box | bs3-alert:info |
Success Alert Box | bs3-alert:success |
Warning Alert Box | bs3-alert:warning |
Component | Snippet code |
---|---|
Badge (Default) | bs3-badge |
Component | Snippet code |
---|---|
Breadcrumbs | bs3-breadcrumbs |
Note: all button snippets below can have any of the following options append to the end of the snippet *.
- :danger
- :default
- :disabled
- :info
- :primary
- :success
- :warning
An example:
- bs3-button:success
- bs3-large-button:disabled
- bs3-block-button:warning
Component | Snippet code | Options |
---|---|---|
Button | bs3-button | * |
Block Button | bs3-block-button | * |
Mini Button | bs3-xs-button | * |
Small Button | bs3-sm-button | * |
Large Button | bs3-lg-button | * |
Note: The bs3-col snippet can be used both on its own or with the addition of a colon followed by the number of columns required: E.g.
- bs3-col
- bs3-col:6
- bs3-col:12
Component | Snippet code | Options |
---|---|---|
Column | bs3-col | :1-12 |
Row | bs3-row | |
Container | bs3-container |
Component | Snippet code |
---|---|
Glyphicon | bs3-icon:glyphicon |
Icon (Font Awesome) | bs3-icon |
Component | Snippet code |
---|---|
Thumbnail | bs3-thumbnail |
Thumbnail with content | bs3-thumbnail:content |
Component | Snippet code |
---|---|
Label | bs3-label |
Danger Label | bs3-label:danger |
Info Label | bs3-label:info |
Success Label | bs3-label:success |
Warning Label | bs3-label:warning |
Component | Snippet code |
---|---|
Pager | bs3-pager |
Aligned Pager | bs3-pager:aligned |
Pagination | bs3-pagination |
Pagination:small | bs3-pagination:small |
Pagination:large | bs3-pagination:large |
Component | Snippet code |
---|---|
Navbar (basic navbar) | bs3-navbar |
Navbar Brand Element | bs3-navbar:brand |
Navbar Button | bs3-navbar:button |
Navbar Form | bs3-navbar:form |
Navbar Link | bs3-navbar:link |
Navbar Text | bs3-navbar:text |
Navbar Fixed-Botton | bs3-navbar:fixed-bottom |
Navbar Fixed-Top | bs3-navbar:fixed-top |
Navbar Inverse | bs3-navbar:inverse |
Navbar Responsive | bs3-navbar:responsive |
Navbar Static-Top | bs3-navbar:static-top |
Component | Snippet code |
---|---|
Jumbotron (ex Hero Unit) | bs3-jumbotron |
Component | Snippet code |
---|---|
Panel | bs3-panel |
Panel (contextual) | bs3-panel:{warning,success,info,danger,primary} |
Panel (with heading) | bs3-panel:heading |
Panel (with footer) | bs3-panel:footer |
Component | Snippet code |
---|---|
List group | bs3-list-group |
List group (with badges) | bs3-list-group:badges |
List group (linked list) | bs3-list-group:linked |
List group (with content) | bs3-list-group:content |
Component | Snippet code |
---|---|
Media Object | bs3-media-object |
Component | Snippet code |
---|---|
Clearfix | bs3-clearfix |
Twitter Bootstrap 3 - Sublime Plugin is open-sourced software licensed under the MIT license.