You are on page 1of 8

GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.

com/JasonMortonNZ/bs3-sublime-plugin

Features Explore Pricing Sign in or Sign up

JasonMortonNZ / bs3-sublime-plugin 91 952 316

Code Issues 10 Pull requests 5 Projects 0 Wiki Pulse Graphs

Twitter Bootstrap 3 Snippets Plugin for Sublime Text 2/3

123 commits 2 branches 10 releases 22 contributors

JasonMortonNZ Merge pull request #97 from afhaque/master … Latest commit cb504e5 on 13 Mar 2016

alerts Correct indentation 2 years ago

badges Updated indentation of all files 4 years ago

breadcrumbs Updated indentation of all files 4 years ago

buttons Updated indentation of all files 4 years ago

carousel Correct indentation 2 years ago

cdn Added https to jquery cdn reference to correct broken link in bs3-cdn a year ago

clearfix Updated indentation of all files 4 years ago

form Bug fixes, new snippets and updates 2 years ago

grid Added Fluid Class To Col 2 years ago

icons Add aria-hidden to glyphicon snippet 2 years ago

images Updated indentation of all files 4 years ago

input-groups Adding input-group snippets 2 years ago

jumbotron Update bs3-jumbotron.sublime-snippet 3 years ago

labels Updated indentation of all files 4 years ago

link-buttons Add link-button snippets 2 years ago

list-groups Updated indentation of all files 4 years ago

local Bug fixes, new snippets and updates 2 years ago

media Updated indentation of all files 4 years ago

messages Update 1-1-6.txt 2 years ago

modal Bug fixes, new snippets and updates 2 years ago

navigation Add container divs for the other navbar snippets 2 years ago

pageheader Correct indentation 2 years ago

pagination Update bs3-pagination-small.sublime-snippet 2 years ago

panels Correct indentation 2 years ago

table Updated indentation of all files 4 years ago

tabs Correct indentation 2 years ago

template Merge pull request #88 from sgtphips/master a year ago

wells Updated Bootstrap CDN to 3.2 and included well snippet. Also updated … 3 years ago

README.md Updated README with info on hanging '<' character a year ago

messages.json Bug fixes, new snippets and updates 2 years ago

1 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

README.md

Bootstrap 3 - Sublime Plugin


A sublime plugin complete with Bootstrap 3 snippets

Feel free to let me know what else you want added via:

Twitter @JasonMortonNZ
Issues

What's included - contents


Installation
CDN
Local
Templates
Forms
Tables
Input
Alerts
Badges
Breadcrumbs
Buttons
Carousel
Grid
Images
Icons
Labels
Pagination
Navigation
Panels
List Groups
Media Objects
Icons
Clearfix
Wells
Tabs
Input Groups
License

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.

2 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

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

3 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

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

4 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

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

5 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

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

6 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

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

7 de 8 20/03/2017 10:41 a.m.


GitHub - JasonMortonNZ/bs3-sublime-plugin: Twitter Bootstrap 3 S... https://github.com/JasonMortonNZ/bs3-sublime-plugin

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

© 2017 GitHub, Inc. Terms Privacy Security Status Help Contact GitHub API Training Shop Blog About

8 de 8 20/03/2017 10:41 a.m.

You might also like