Bootstrap 3 Snippets

下载次数:232,802

更新时间:2016-12-14 16:58:10

插件作者:JasonMortonNZ

版本支持:sublime text 2,sublime text 3

系统支持: Windows,OS X,Linux

所属分类:snippets

曾用名称:--

插件介绍:Twitter Bootstrap 3 Snippets Plugin for Sublime Text 2/3

详细介绍: --

readme:

							

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 “<” 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

License

Bootstrap 3 - Sublime Plugin is open-sourced software licensed under the MIT license.

language syntax snippets color scheme linting theme auto-complete text manipulation formatting javascript build system utilities completions syntax file navigation php python html go markdown search testing code navigation documentation git ruby language text navigation autocomplete vcs utils lua coffeescript latex sass build highlighting text selection java diff scala terminal addon preview todo scss js Completion automation snippet comments nsis svn file creation formatter project sidebar commands console test less repl indent code sharing C hg monokai clipboard file open perl tasks nodejs sync android C++ react japanese editor json markup code style Jasmine editor emulation es6 font diff/merge material jsx syntax highlight docs translate textile code generation debugging sql google node minification laravel typescript cursors manipulation golang save workspace haskell emacs file logs command line wordpress templating compare matlab precompiler watch xml window hexadecimal difference st3 ember jade stylus notes backup indentation browser share rust julia ide make debug angular groovy 中文 unit test converter vhdl utility plugin development unicode restructuredtext apicloud coding Clang spec ftp icons lisp text format grails remote collaboration merge R rubymotion framework file comparison codex sublime svg dark email CSS commit open files stata ruby on rails logger pattern writing convert cli fullscreen validate copy calculator coffee hint icon_fonts code Debugger preferences automate colour input method intellisense converting tidy bash package oracle conflicts pandoc