bootstrap Snippets使用方法

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