Code Monkey home page Code Monkey logo

bootstrap-3-snippets's Introduction

Bootstrap 3 Snippets

A set of Bootstrap 3 Snippets for Visual Studio Code.

Create a new HTML document and type 'bs3' to see all available snippets.

Available Snippets

Alerts

Trigger Description
bs3-alert Alert Box (Default)
bs3-alert:danger Danger Alert Box
bs3-alert:info Info Alert Box
bs3-alert:success Success Alert Box
bs3-alert:warning Warning Alert Box

Badges

Trigger Description
bs3-badge Badge (Default)

Breadcrumbs

Trigger Description
bs3-breadcrumbs Breadcrumbs

Buttons

Trigger Description
bs3-button Button
bs3-button:default Default Button
bs3-button:danger Danger Button
bs3-button:disabled Disabled Button
bs3-button:info Info Button
bs3-button:primary Primary Button
bs3-button:success Success Button
bs3-button:warning Warning Button

Buttons: Block

Trigger Description
bs3-block-button Block Button
bs3-block-button:default Default Block Button
bs3-block-button:danger Danger Block Button
bs3-block-button:disabled Disabled Block Button
bs3-block-button:info Info Block Button
bs3-block-button:primary Primary Block Button
bs3-block-button:success Success Block Button
bs3-block-button:warning Warning Block Button

Buttons: Block Link

Trigger Description
bs3-block-link-button Block Link Button
bs3-block-link-button:default Default Block Link Button
bs3-block-link-button:danger Danger Block Link Button
bs3-block-link-button:disabled Disabled Block Link Button
bs3-block-link-button:info Info Block Link Button
bs3-block-link-button:primary Primary Block Link Button
bs3-block-link-button:success Success Block Link Button
bs3-block-link-button:warning Warning Block Link Button

Buttons: Extra Small

Trigger Description
bs3-xs-button Extra Small Button
bs3-xs-button:default Extra Small Default Button
bs3-xs-button:danger Extra Small Danger Button
bs3-xs-button:disabled Extra Small Disabled Button
bs3-xs-button:info Extra Small Info Button
bs3-xs-button:primary Extra Small Primary Button
bs3-xs-button:success Extra Small Success Button
bs3-xs-button:warning Extra Small Warning Button

Buttons: Extra Small Link

Trigger Description
bs3-xs-link-button Extra Small Link Button
bs3-xs-link-button:default Default Extra Small Link Button
bs3-xs-link-button:danger Danger Extra Small Link Button
bs3-xs-link-button:disabled Disabled Extra Small Link Button
bs3-xs-link-button:info Info Extra Small Link Button
bs3-xs-link-button:primary Primary Extra Small Link Button
bs3-xs-link-button:success Success Extra Small Link Button
bs3-xs-link-button:warning Warning Extra Small Link Button

Buttons: Small

Trigger Description
bs3-sm-button Small Button
bs3-sm-button:default Small Default Button
bs3-sm-button:danger Small Danger Button
bs3-sm-button:disabled Small Disabled Button
bs3-sm-button:info Small Info Button
bs3-sm-button:primary Small Primary Button
bs3-sm-button:success Small Success Button
bs3-sm-button:warning Small Warning Button

Buttons: Small Link

Trigger Description
bs3-sm-link-button Small Link Button
bs3-sm-link-button:default Default Small Link Button
bs3-sm-link-button:danger Danger Small Link Button
bs3-sm-link-button:disabled Disabled Small Link Button
bs3-sm-link-button:info Info Small Link Button
bs3-sm-link-button:primary Primary Small Link Button
bs3-sm-link-button:success Success Small Link Button
bs3-sm-link-button:warning Warning Small Link Button

Buttons: Large

Trigger Description
bs3-lg-button Large Button
bs3-lg-button:default Large Default Button
bs3-lg-button:danger Large Danger Button
bs3-lg-button:disabled Large Disabled Button
bs3-lg-button:info Large Info Button
bs3-lg-button:primary Large Primary Button
bs3-lg-button:success Large Success Button
bs3-lg-button:warning Large Warning Button

Buttons: Large Link

Trigger Description
bs3-lg-link-button Large Link Button
bs3-lg-link-button:default Default Large Link Button
bs3-lg-link-button:danger Danger Large Link Button
bs3-lg-link-button:disabled Disabled Large Link Button
bs3-lg-link-button:info Info Large Link Button
bs3-lg-link-button:primary Primary Large Link Button
bs3-lg-link-button:success Success Large Link Button
bs3-lg-link-button:warning Warning Large Link Button

Buttons: Link

Trigger Description
bs3-link-button Link Button
bs3-link-button:default Default Link Button
bs3-link-button:danger Danger Link Button
bs3-link-button:disabled Disabled Link Button
bs3-link-button:info Info Link Button
bs3-link-button:primary Primary Link Button
bs3-link-button:success Success Link Button
bs3-link-button:warning Warning Link Button

Buttons: Groups & Toolbar

Trigger Description
bs3-group Button Group
bs3-group:vertical Vertical Button Group
bs3-link-group Link Button Group
bs3-link-group:vertical Vertical Link Button Group
bs3-toolbar Toolbar for Button Groups

Carousel

Trigger Description
bs3-carousel Carousel

CDN Links

Trigger Description
bs3-cdn CDN Hosted Bootstrap Link: CSS & JS
bs3-cdn:css CDN Hosted Bootstrap Link: CSS Only
bs3-cdn:js CDN Hosted Bootstrap Link: JS Only

Clearfix

Trigger Description
bs3-clearfix Clearfix

Forms

Trigger Description
bs3-form Form
bs3-form:horizontal Horizontal Form
bs3-form:inline Inline Form

Form Inputs (Fields) & Select

Trigger Description
bs3-form:label Form Input Label
bs3-input:hidden Hidden Input
bs3-input:checkbox Checkbox
bs3-input:color Color Input
bs3-input:color:h Color Input (Horizontal)
bs3-input:date Date Input
bs3-input:date:h Date Input (Horizontal)
bs3-input:email Email Input
bs3-input:email:h Email Input (Horizontal)
bs3-input:label Input Label
bs3-input:month Month Input
bs3-input:month:h Month Input (Horizontal)
bs3-input:number Number Input
bs3-input:number:h Number Input (Horizontal)
bs3-input:password Password Input
bs3-input:password:h Password Input (Horizontal)
bs3-input:radio Radio Input
bs3-input:range Range Input
bs3-input:range:h Range Input (Horizontal)
bs3-input:reset Reset Input
bs3-input:reset:h Reset Input (Horizontal)
bs3-input:search Search Input
bs3-input:search:h Search Input (Horizontal)
bs3-input:select Select Input
bs3-input:select:h Select Input (Horizontal)
bs3-input:submit Submit Button
bs3-input:tel Telephone Input
bs3-input:tel:h Telephone Input (Horizontal)
bs3-input:text Text Input
bs3-input:text:h Text Input (Horizontal)
bs3-input:time Time Input
bs3-input:time:h Time Input (Horizontal)
bs3-input:url URL Input
bs3-input:url:h URL Input (Horizontal)
bs3-input:week Week Input
bs3-input:week:h Week Input (Horizontal)
bs3-select Select
bs3-select:h Select (Horizontal)
bs3-textarea Textarea
bs3-textarea:h Textarea (Horizontal)

Form Input Groups

Trigger Description
bs3-input-group Input Group
bs3-input-group-addon Input Group (addon)
bs3-input-group:addon:text Input Group (addon & text-field)
bs3-input-group-btn Input Group (button)
bs3-input-group:text:btn Input Group (text-field & btn)

Grid: Container, Columns, Row

Trigger Description
bs3-container Container
bs3-col Column (no number specified)
bs3-col:1 1 Column
bs3-col:2 2 Columns
bs3-col:3 3 Columns
bs3-col:4 4 Columns
bs3-col:5 5 Columns
bs3-col:6 6 Columns
bs3-col:7 7 Columns
bs3-col:8 8 Columns
bs3-col:9 9 Columns
bs3-col:10 10 Columns
bs3-col:11 11 Columns
bs3-col:12 12 Columns
bs3-row Row
bs3-row-col Row & Column (no number specified)

Icons

Trigger Description
bs3-icon Icon
bs3-icon:glyphicon Glyphicon

Images

Trigger Description
bs3-image Responsive Image
bs3-thumbnail Thumbnail
bs3-thumbnail:content Thumbnail (with Content)

Jumbotron

Trigger Description
bs3-jumbotron Jumbotron

Labels

Trigger Description
bs3-label Label
bs3-label:danger Danger Label
bs3-label:default Default Label
bs3-label:info Info Label
bs3-label:success Success Label
bs3-label:warning Warning Label

List Groups

Trigger Description
bs3-list-group List Group
bs3-list-group:badges List Group (with Badges)
bs3-list-group:linked List Group (with Linked List)
bs3-list-group:content List Group (with Content)

Local

Trigger Description
bs3-local Local Bootstrap Link

Media Objects

Trigger Description
bs3-media-object Media Object

Modal

Trigger Description
bs3-modal Modal

Navigation

Trigger Description
bs3-navbar Navbar
bs3-navbar:basic Navbar (Basic)
bs3-navbar:brand Navbar Brand Element
bs3-navbar:button Navbar Button
bs3-navbar:form Navbar Form
bs3-navbar:link Navbar Link
bs3-navbar:links Navbar Links
bs3-navbar:text Navbar Text
bs3-navbar:fixed-bottom Navbar Fixed-Bottom
bs3-navbar:fixed-top Navbar Fixed-Top
bs3-navbar:inverse Navbar Inverse
bs3-navbar:responsive Navbar Responsive
bs3-navbar:static-top Navbar Static-Top

Page Header

Trigger Description
bs3-page-header Page Header

Pagination

Trigger Description
bs3-pager Pager
bs3-pager:aligned Aligned Pager
bs3-pagination Pagination
bs3-pagination:sm Pagination (Small)
bs3-pagination:lg Pagination (Large)

Panels

Trigger Description
bs3-panel Panel
bs3-panel:heading Panel (with Heading)
bs3-panel:footer Panel (with Footer)
bs3-panel:table Panel (with Table)
bs3-panel:danger Panel (Danger)
bs3-panel:info Panel (Info)
bs3-panel:primary Panel (Primary)
bs3-panel:success Panel (Success)
bs3-panel:warning Panel (Warning)

Progress Bars

Trigger Description
bs3-progress Progress Bar
bs3-progress-striped Striped Progress Bar
bs3-progress:label Progress Bar with Label
bs3-progress-striped:label Striped Progress Bar with Label
bs3-progress:success Progress Bar (Success)
bs3-progress-striped:success Striped Progress Bar (Success)
bs3-progress:info Progress Bar (Info)
bs3-progress-striped:info Striped Progress Bar (Info)
bs3-progress:warning Progress Bar (Warning)
bs3-progress-striped:warning Striped Progress Bar (Warning)
bs3-progress:danger Progress Bar (Danger)
bs3-progress-striped:danger Striped Progress Bar (Danger)

Tables

Trigger Description
bs3-table Table
bs3-table:bordered Bordered Table
bs3-table:condensed Condensed Table
bs3-table:hover Hover Table
bs3-table:responsive Responsive Table
bs3-table:striped Striped Table

Tabs

Trigger Description
bs3-tabs Tabs

Templates

Trigger Description
bs3-template:html5 HTML5 Template Layout

Wells

Trigger Description
bs3-well Well
bs3-well:sm Small Well
bs3-well:lg Large Well

Source

Github

All snippets have been sourced from the Bootstrap 3 - Sublime Plugin

License

This Visual Studio Code extension is open-source software licensed under the MIT license.

bootstrap-3-snippets's People

Contributors

alex-doe avatar arturolinares avatar braiscarrion avatar gregory-yet avatar hassoon3 avatar isaacsomething avatar kevinrambaud avatar manoel-freitas avatar njacek avatar publicvar avatar shaychoo avatar stevehobbsdev avatar tonbz avatar tutkun avatar wcwhitehead avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap-3-snippets's Issues

Suggestion does not work on typing bs3

In Version 1.5.3 it doesn't work.

It may interfere with an other addon.

I type bs3 and there are no suggestions. If I tab, an opening and a closing tag are created.

some suggestions

It can't be used in the blade template of laravel. Can you make a setting that supports expansion?

Minor: Submit button template error in offset class

    <div class="form-group">
        <div class="col-sm-10 col-offset-2">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>

Should be using col-sm-offset-2

ps. Really appreciate the snippets pack.

bs3-template:html5 problem

When using bs3-template:html5, cdn links came without "http" parts. So it does not work. Change it please.

support for bootstrap 4

This is a request more than an issue.

Is it possible to add bootstrap4 snippets aswell along with bootstrap 3 in a separate repo?

Extension seems not working

I have a fresh install of visual studio code, I installed vetur extension and this plugin and I'm trying to use in a vue/vue-html file but the autocompletion/snippets doesn't seem to work.

I can use it in blade files.

Am I missing something that I should be doing ?

Snippets Trigger

Hello, I'm using Visual Studio with Emmets and was wondering how to trigger the bs3 snippets? Thanks

Question: Converting Sublime snippets to VS Code

I'm working on a similar project to this one, where I'd like to produce a large number of snippets for Visual Studio Code. You mentioned that the Twitter Bootstrap 3 Snippets plugin is the source of these snippets, and I'm wondering how you converted from Sublime format to Visual Studio Code.

For example, the Sublime snippet is:

<snippet>
    <content><![CDATA[
<ol class="breadcrumb">
    <li>
        <a href="${1:#}">${2:Home}</a>
    </li>
    ${3:<li>
        <a href="#">Link</a>
    </li>}
    <li class="active">${4:Current}</li>
</ol>
]]></content>
    <tabTrigger>bs3-breadcrumbs</tabTrigger>
</snippet>

While in Visual Studio Code, everything inside CDATA has been collapsed into a single string with tab and line return characters.

\n<ol class=\"breadcrumb\">\n\t<li>\n\t\t<a href=\"${1:#}\">${2:Home}</a>\n\t</li>\n\t${3:<li>\n\t\t<a href=\"#\">Link</a>\n\t</li>}\n\t<li class=\"active\">${4:Current}</li>\n</ol>\n

Could you share how you went about doing this?

Language Support

Would love to see an option for other languages to be supported:

  • React (.jsx, .tsx)
  • Vue (.vue)
  • Blade (.blade.php)

Blank Lines

Hi,

Is there a way the for the extension not to add blank lines before and after the snippet expansion ?

I saw you have \n hardcoded into the snippet itself, but maybe a configuration setting could prevent from adding those extra blank lines. That way everyone could configure it to their liking...

TIA,
David

bs3-cdn:js output is brorken

When I use bs3-cdn:js snippet, it outputs this

snippet

Notice the extra reference to jquery cdn in the middle of the bootstrap cdn link.

Am I wrong and this is by design, or am I using the editor wrong?

Update: I think I see it. Line 226. The {1:3.3.4} I think should be {2:3.3.4}. I cloned this repo, made a branch, and tried to push the branch for a pull request I was going to make but got denied. :) No big deal, I am learning this git thing still. Thanks!

Do not show snippets inside PHP code scope

Is there a way to configure the extension so that it doesn't show inside "php code" scope?

Exmaple:

<html>

<?php

echo func_generate_header();
// here, inside the "code" scope, don't display bs3 snippets suggestions

?>

<body>

<!-- here, it can be useful, however -->

</body>
</html>

Warnings on extension load

When extension is loading, it reports warnings with unsupported languages (probably I don't have some the language extension installed)

[C:/Users/felipe.caputo/.vscode/extensions/wcwhitehead.bootstrap-3-snippets-0.0.8]: Unknown language in `contributes.snippets.language`. Provided value: ejs
[C:/Users/felipe.caputo/.vscode/extensions/wcwhitehead.bootstrap-3-snippets-0.0.8]: Unknown language in `contributes.snippets.language`. Provided value: latte

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.