bs3-sublime-plugin

Ⅰ. 插件描述

Twitter Bootstrap 3 Snippets Plugin for Sublime Text 2/3

Ⅱ. 基本信息

创建日期：  2013-07-01
使用用户：  2
Github星：  1013
插件作者：  Jason Morton

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加: 
Plugin 'jasonmortonnz/bs3-sublime-plugin'
… 然后在Vim中运行以下命令: 
:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加: 
NeoBundle 'jasonmortonnz/bs3-sublime-plugin'
… 然后在Vim中运行以下命令: 
:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加: 
Plug 'jasonmortonnz/bs3-sublime-plugin'
… 然后在Vim中运行以下命令: 
:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令: 
cd ~/.vim/bundle
git clone https://github.com/jasonmortonnz/bs3-sublime-plugin

Ⅳ. 文档说明

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.

  1. 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
  2. Clone the repository into your Sublime Text 2/3 packages directory.
    `git clone https://github.com/JasonMortonNZ/bs3-sublime-plugin.git
  3. 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 the bs3-input:radio snippet.

Be sure you have enabled "bs" in your Preferences.sublime-settings:

"auto_complete_triggers": [{"selector": "text.html", "characters": "bs3"}]

Note: If you experience any issues with a leading "<" please look at this issue thread for some potential solutions.

CDN

ComponentSnippet code
CDN link (both CSS & JS)bs3-cdn
CDN link (CSS only)bs3-cdn:css
CDN link (JS only)bs3-cdn:js

Local

ComponentSnippet code
Link to local bootstrap filesbs3-local

Templates

ComponentSnippet code
HTML5 Template Layoutbs3-template:html5

Forms

ComponentSnippet code
Formbs3-form
Inline Formbs3-form:inline
Horizontal Formbs3-form:horizontal

Tables

ComponentSnippet code
Tablebs3-table
Bordered Tablebs3-table:bordered
Condensed Tablebs3-table:condensed
Hover Tablebs3-table:hover
Striped 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 codeOptions
Labelbs3-input:label
Text Inputbs3-input:text:h
Email Inputbs3-input:email:h
Password Inputbs3-input:password:h
Hidden Inputbs3-input:hidden:h
Url Inputbs3-input:url:h
Color Inputbs3-input:color:h
Number Inputbs3-input:number:h
Range Inputbs3-input:range:h
Date Inputbs3-input:date:h
Week Inputbs3-input:week:h
Month Inputbs3-input:month:h
Time Inputbs3-input:time:h
Tel Inputbs3-input:tel:h
Search Inputbs3-input:search:h
Reset Inputbs3-input:reset:h
Submit Inputbs3-input:submit:h
Checkbox Inputbs3-input:checkbox:h
Radio Box Inputbs3-input:radio:h
Select Boxbs3-select:h
Textareabs3-textarea:h

Alerts

ComponentSnippet code
Alert Box (Default)bs3-alert
Danger Alert Boxbs3-alert:danger
Info Alert Boxbs3-alert:info
Success Alert Boxbs3-alert:success
Warning Alert Boxbs3-alert:warning

Badges

ComponentSnippet code
Badge (Default)bs3-badge

Breadcrumbs

ComponentSnippet code
Breadcrumbsbs3-breadcrumbs

Carousel

ComponentSnippet code
Carouselbs3-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 codeOptions
Buttonbs3-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 codeOptions
Columnbs3-col:1-12
Rowbs3-row
Containerbs3-container

Icons

ComponentSnippet code
Glyphiconbs3-icon:glyphicon
Icon (Font Awesome)bs3-icon

Images

ComponentSnippet code
Thumbnailbs3-thumbnail
Thumbnail with contentbs3-thumbnail:content

Labels

ComponentSnippet code
Labelbs3-label
Danger Labelbs3-label:danger
Info Labelbs3-label:info
Success Labelbs3-label:success
Warning Labelbs3-label:warning

Pagination

ComponentSnippet code
Pagerbs3-pager
Aligned Pagerbs3-pager:aligned
Paginationbs3-pagination
Pagination:smallbs3-pagination:sm
Pagination:largebs3-pagination:lg

Navigation

ComponentSnippet code
Navbar (basic navbar)bs3-navbar
Navbar Brand Elementbs3-navbar:brand
Navbar Buttonbs3-navbar:button
Navbar Formbs3-navbar:form
Navbar Linkbs3-navbar:link
Navbar Textbs3-navbar:text
Navbar Fixed-Bottonbs3-navbar:fixed-bottom
Navbar Fixed-Topbs3-navbar:fixed-top
Navbar Inversebs3-navbar:inverse
Navbar Responsivebs3-navbar:responsive
Navbar Static-Topbs3-navbar:static-top

Jumbotron

ComponentSnippet code
Jumbotron (ex Hero Unit)bs3-jumbotron

Panels

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

List-groups

ComponentSnippet code
List groupbs3-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

ComponentSnippet code
Media Objectbs3-media-object

Clearfix

ComponentSnippet code
Clearfixbs3-clearfix

Wells

ComponentSnippet code
Wellbs3-well
Well (small)bs3-well:sm
Well (large)bs3-well:lg

Tabs

ComponentSnippet code
Tabs panebs3-tabs

Input-groups

ComponentSnippet code
Input groupbs3-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.

添加新评论