Start typing <bs3 in html files and the autocomplete window opens. It matches fuzzily. So you can type <bs3radio to find the bs3-input:radio snippet.
Be sure you have enabled “<” and “bs” in your Preferences.sublime-settings:
"auto_complete_triggers": [{"selector": "text.html", "characters": "<"},{"selector": "text.html", "characters": "bs3"}]
CDN
| Component | Snippet code |
|---|
| CDN link (both CSS & JS) | bs3-cdn |
| CDN link (CSS only) | bs3-cdn:css |
| CDN link (JS only) | bs3-cdn:js |
Local
| Component | Snippet code |
|---|
| Link to local bootstrap files | bs3-local |
Templates
| Component | Snippet code |
|---|
| HTML5 Template Layout | bs3-template:html5 |
Forms
| Component | Snippet code |
|---|
| Form | bs3-form |
| Inline Form | bs3-form:inline |
| Horizontal Form | bs3-form:horizontal |
Tables
| 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 |
Input Fields (Form fields)
Note: you can add “ :h ” to the end of any input field snippet to make it compatible with 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 |
| Select Box | bs3-select | :h |
| Textarea | bs3-textarea | :h |
Alerts
| 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 |
Badges
| Component | Snippet code |
|---|
| Badge (Default) | bs3-badge |
Breadcrumbs
| Component | Snippet code |
|---|
| Breadcrumbs | bs3-breadcrumbs |
Carousel
| Component | Snippet code |
|---|
| Carousel | bs3-carousel |
Buttons
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 | * |
Grid
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 | |
Icons
| Component | Snippet code |
|---|
| Glyphicon | bs3-icon:glyphicon |
| Icon (Font Awesome) | bs3-icon |
Images
| Component | Snippet code |
|---|
| Thumbnail | bs3-thumbnail |
| Thumbnail with content | bs3-thumbnail:content |
Labels
| 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 |
Pagination
| Component | Snippet code |
|---|
| Pager | bs3-pager |
| Aligned Pager | bs3-pager:aligned |
| Pagination | bs3-pagination |
| Pagination:small | bs3-pagination:sm |
| Pagination:large | bs3-pagination:lg |
Navigation
| 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 |
Jumbotron
| Component | Snippet code |
|---|
| Jumbotron (ex Hero Unit) | bs3-jumbotron |
Panels
| 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 |
List-groups
| 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 |
Media Objects
| Component | Snippet code |
|---|
| Media Object | bs3-media-object |
Clearfix
| Component | Snippet code |
|---|
| Clearfix | bs3-clearfix |
Wells
| Component | Snippet code |
|---|
| Well | bs3-well |
| Well (small) | bs3-well:sm |
| Well (large) | bs3-well:lg |
Tabs
| Component | Snippet code |
|---|
| Tabs pane | bs3-tabs |
Input-groups
| Component | Snippet code |
|---|
| Input group | bs3-input-group |
| Input group(addon & text-field) | bs3-input-group:addon:text |
| Input group (addon) | bs3-input-group-addon |
| Input group (button) | bs3-input-group-btn |
| Input group (text-field & btn) | bs3-input-group:text:btn |
4
0
已为社区贡献1条内容
所有评论(0)