sublime bootstrap snippets

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 Templates Forms Tables Input Alerts Badges Breadcrumbs Buttons Carousel Grid Images Icons Labels Pagination Navigation Panels List Groups Media Objects Icons Clearfix Wells License 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.

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 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 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:small Pagination:large bs3-pagination:large 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

转载于:https://my.oschina.net/u/1421356/blog/349740

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值