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

ComponentSnippet codeCDN link (both CSS & JS)bs3-cdnCDN link (CSS only)bs3-cdn:cssCDN link (JS only)bs3-cdn:js

Local

ComponentSnippet codeLink to local bootstrap filesbs3-local

Templates

ComponentSnippet codeHTML5 Template Layoutbs3-template:html5

Forms

ComponentSnippet codeFormbs3-formInline Formbs3-form:inlineHorizontal Formbs3-form:horizontal

Tables

ComponentSnippet codeTablebs3-tableBordered Tablebs3-table:borderedCondensed Tablebs3-table:condensedHover Tablebs3-table:hoverStriped Tablebs3-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

ComponentSnippet codeOptionsLabelbs3-input:label Text Inputbs3-input:text:hEmail Inputbs3-input:email:hPassword Inputbs3-input:password:hHidden Inputbs3-input:hidden:hUrl Inputbs3-input:url:hColor Inputbs3-input:color:hNumber Inputbs3-input:number:hRange Inputbs3-input:range:hDate Inputbs3-input:date:hWeek Inputbs3-input:week:hMonth Inputbs3-input:month:hTime Inputbs3-input:time:hTel Inputbs3-input:tel:hSearch Inputbs3-input:search:hReset Inputbs3-input:reset:hSubmit Inputbs3-input:submit:hCheckbox Inputbs3-input:checkbox:hRadio Box Inputbs3-input:radio:hSelect Boxbs3-select:hTextareabs3-textarea:h

Alerts

ComponentSnippet codeAlert Box (Default)bs3-alertDanger Alert Boxbs3-alert:dangerInfo Alert Boxbs3-alert:infoSuccess Alert Boxbs3-alert:successWarning Alert Boxbs3-alert:warning

Badges

ComponentSnippet codeBadge (Default)bs3-badge

Breadcrumbs

ComponentSnippet codeBreadcrumbsbs3-breadcrumbs

Carousel

ComponentSnippet codeCarouselbs3-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

ComponentSnippet codeOptionsButtonbs3-button*Block Buttonbs3-block-button*Mini Buttonbs3-xs-button*Small Buttonbs3-sm-button*Large Buttonbs3-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

ComponentSnippet codeOptionsColumnbs3-col:1-12Rowbs3-row Containerbs3-container 

Icons

ComponentSnippet codeGlyphiconbs3-icon:glyphiconIcon (Font Awesome)bs3-icon

Images

ComponentSnippet codeThumbnailbs3-thumbnailThumbnail with contentbs3-thumbnail:content

Labels

ComponentSnippet codeLabelbs3-labelDanger Labelbs3-label:dangerInfo Labelbs3-label:infoSuccess Labelbs3-label:successWarning Labelbs3-label:warning

Pagination

ComponentSnippet codePagerbs3-pagerAligned Pagerbs3-pager:alignedPaginationbs3-paginationPagination:smallbs3-pagination:smPagination:largebs3-pagination:lg

Navigation

ComponentSnippet codeNavbar (basic navbar)bs3-navbarNavbar Brand Elementbs3-navbar:brandNavbar Buttonbs3-navbar:buttonNavbar Formbs3-navbar:formNavbar Linkbs3-navbar:linkNavbar Textbs3-navbar:textNavbar Fixed-Bottonbs3-navbar:fixed-bottomNavbar Fixed-Topbs3-navbar:fixed-topNavbar Inversebs3-navbar:inverseNavbar Responsivebs3-navbar:responsiveNavbar Static-Topbs3-navbar:static-top

Jumbotron

ComponentSnippet codeJumbotron (ex Hero Unit)bs3-jumbotron

Panels

ComponentSnippet codePanelbs3-panelPanel (contextual)bs3-panel:{warning,success,info,danger,primary}Panel (with heading)bs3-panel:headingPanel (with footer)bs3-panel:footer

List-groups

ComponentSnippet codeList groupbs3-list-groupList group (with badges)bs3-list-group:badgesList group (linked list)bs3-list-group:linkedList group (with content)bs3-list-group:content

Media Objects

ComponentSnippet codeMedia Objectbs3-media-object

Clearfix

ComponentSnippet codeClearfixbs3-clearfix

Wells

ComponentSnippet codeWellbs3-wellWell (small)bs3-well:smWell (large)bs3-well:lg

Tabs

ComponentSnippet codeTabs panebs3-tabs

Input-groups

ComponentSnippet codeInput groupbs3-input-groupInput group(addon & text-field)bs3-input-group:addon:textInput group (addon)bs3-input-group-addonInput group (button)bs3-input-group-btnInput group (text-field & btn)bs3-input-group:text:btn