主要是标记下快捷方式及下载地址
https://github.com/JasonMortonNZ/bs3-sublime-plugin
转
本地下载
下载 “bs3-sublime-plugin.7z” bs3-sublime-plugin.7z – 已下载99次 – 13 KB
Bootstrap 3 – Sublime Plugin
A sublime plugin complete with Bootstrap 3 snippets
Feel free to let me know what else you want added via:
What’s included – contents
Installation
There are 3 methods for installing this plugin.
Search for “Bootstrap 3 Snippets” via the “Package Control: Install Packages” menu. Note: If you don’t have Sublime Package Control installed, you can find out how to install it here https://sublime.wbond.net/installation
Clone the repository into your Sublime Text 2/3 packages directory. `git clone https://github.com/JasonMortonNZ/bs3-sublime-plugin.git
Download the .zip file and unzip it into your Sublime Text 2/3 packages directory. Note: You can find your Sublime Text 2/3 packages directory by going to Preferences > Browse Packages.
Usage
Start typing <bs3 in html files and the autocomplete window opens. It matches fuzzily. So you can type <bs3radio to find thebs3-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 |
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 |
License
Bootstrap 3 – Sublime Plugin is open-sourced software licensed under the MIT license.