mirror of
https://github.com/pojokcodeid/nvim-lazy.git
synced 2025-06-22 00:49:01 +02:00
update cmd line
This commit is contained in:
asep komarudin
parent
67a507d530
commit
8c55f6b749
214 changed files with 48553 additions and 48489 deletions
7885
snippets/B5-Snippets/snippets/bootstrap.json
Normal file
7885
snippets/B5-Snippets/snippets/bootstrap.json
Normal file
File diff suppressed because it is too large
Load diff
1
snippets/B5-Snippets/snippets/config.json
Normal file
1
snippets/B5-Snippets/snippets/config.json
Normal file
File diff suppressed because one or more lines are too long
580
snippets/B5-Snippets/snippets/oldsnippets.json
Normal file
580
snippets/B5-Snippets/snippets/oldsnippets.json
Normal file
|
|
@ -0,0 +1,580 @@
|
|||
{
|
||||
"Bootstrap 5 container": {
|
||||
"prefix": "b5-contain",
|
||||
"body": [
|
||||
"<div class=\"container${1|-fluid, ,-sm,-md,-lg,-xl,-xxl|}${2| ,overflow-hidden|} ${3|px-1,px-2,px-3,px-4,px-5|} ${4|gy-1,gy-2,gy-3,gy-4,gy-5|}\">",
|
||||
"b5-row${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 container"
|
||||
},
|
||||
"Bootstrap 5 row": {
|
||||
"prefix": "b5-row",
|
||||
"body": [
|
||||
"<div class=\"row ${1| ,row-cols-2,row-cols-3, auto,justify-content-md-center,md,lg,xl,xxl|}\">",
|
||||
"b5${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 row"
|
||||
},
|
||||
"Bootstrap 5 col": {
|
||||
"prefix": "b5-col",
|
||||
"body": [
|
||||
" <div class=\"col${1| ,-1,-2,-3,-4,-5,-6,-sm,-md,-lg,-xl,-xxl|}${2| ,-auto,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12|}\">",
|
||||
" b5${0}",
|
||||
" </div>"
|
||||
],
|
||||
"description": "Bootstrap 5 col"
|
||||
},
|
||||
"Bootstrap 5 Navbar": {
|
||||
"prefix": "b5-navbar-default",
|
||||
"body": [
|
||||
"<nav class=\"navbar ${1|navbar-expand-lg,navbar-expand- |} ${2|navbar-light bg-light,navbar-dark bg-dark, navbar-dark bg-primary|}\">",
|
||||
" <div class=\"container-fluid\">",
|
||||
" <a class=\"navbar-brand\" href=\"${3|#, |}\">",
|
||||
" <img src=\"${4|https://hansmcmurdy.com/JavaScript-First/logo.svg, |}\" width=\"30\" height=\"30\" alt=\"\" loading=\"lazy\">",
|
||||
" </a>",
|
||||
" <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"${5|#navbarNavAltMarkup, |}\" aria-controls=\"${5|#navbarNavAltMarkup, |}\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
|
||||
" <span class=\"navbar-toggler-icon\"></span>",
|
||||
" </button>",
|
||||
" <div class=\"collapse navbar-collapse\" id=\"${5|#navbarNavAltMarkup, |}\">",
|
||||
" <div class=\"navbar-nav\">",
|
||||
" b5-nl${0}",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</nav>"
|
||||
],
|
||||
"description": "Bootstrap 5 Navbar"
|
||||
},
|
||||
"Bootstrap 5 nav-item": {
|
||||
"prefix": "b5-nav-item",
|
||||
"body": [
|
||||
"<li class=\"${1|nav-item,dropdown-item, |}\">",
|
||||
" <a class=\"${2|nav-link,nav-link active, |}\" aria-current=\"${3|page, |}\" href=\"${4|#, |}\">${5|Home,About,Blog,Contact, |}</a>",
|
||||
"</li>"
|
||||
],
|
||||
"description": "Bootstrap 5 nav-item"
|
||||
},
|
||||
"Bootstrap 5 navlink": {
|
||||
"prefix": "b5-navlink",
|
||||
"body": [
|
||||
"<a class=\"nav-link\" ${1| aria-disabled=\"false\",disabled tabindex=\"-1\" aria-disabled=\"true\"|} href=\"${2|#, |}\">${3|Home,About,Blog,Contact, |}</a>",
|
||||
""
|
||||
],
|
||||
"description": "Bootstrap 5 navlink"
|
||||
},
|
||||
"Bootstrap 5 nav-dropdown toggle": {
|
||||
"prefix": "b5-navdd-toggle",
|
||||
"body": [
|
||||
"<a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"${1|navbarDropdownMenuLink, |}\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">",
|
||||
"b5-n${0}",
|
||||
"</a>"
|
||||
],
|
||||
"description": "Bootstrap 5 nav-dropdown toggle"
|
||||
},
|
||||
"Bootstrap 5 nav-dropdown": {
|
||||
"prefix": "b5-navdropdown",
|
||||
"body": [
|
||||
"<ul class=\"dropdown-menu\" aria-labelledby=\"${1|navbarDropdownMenuLink, |}\">",
|
||||
"b5-n${0}",
|
||||
"</ul>"
|
||||
],
|
||||
"description": "Bootstrap 5 nav-dropdown"
|
||||
},
|
||||
"Bootstrap 5 Card": {
|
||||
"prefix": "b5-card",
|
||||
"body": [
|
||||
"<div class=\"card\" style=\"width:${1|18rem;, |}\">",
|
||||
" <img src=\"${2|https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60, |}\" class=\"card-img-top\" alt=\"...\">",
|
||||
" <div class=\"card-body\">",
|
||||
" <h5 class=\"card-title\">${3|Card title, |}</h5>",
|
||||
" <h6 class=\"card-subtitle ${4|mb-2 text-muted, |} \">${5|Card subtitle, |}</h6>",
|
||||
" <p class=\"card-text\">${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}</p>",
|
||||
" b5${0}",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 Card"
|
||||
},
|
||||
"Bootstrap 5 Block Quote": {
|
||||
"prefix": "b5-quote",
|
||||
"body": [
|
||||
" <blockquote class=\"blockquote ${1|mb-0, |}\">",
|
||||
" <p>${2|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante., | }</p>",
|
||||
" <footer class=\"blockquote-footer\">Someone famous in <cite title=\"Source Title\">Source Title</cite></footer>",
|
||||
" </blockquote>"
|
||||
],
|
||||
"description": "Bootstrap 5 Block Quote"
|
||||
},
|
||||
"Link BTN": {
|
||||
"prefix": "b5-btn",
|
||||
"body": [
|
||||
"<a class=\"btn btn-${2|primary,secondary,success,danger,warning,info,light,dark|}\" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
|
||||
],
|
||||
"description": "Link BTN"
|
||||
},
|
||||
"BTN-Outline": {
|
||||
"prefix": "b5-btn-o",
|
||||
"body": [
|
||||
"<a class=\"btn btn-outline-${2|primary,secondary,success,danger,warning,info,light,dark|}\" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
|
||||
],
|
||||
"description": "Link BTN"
|
||||
},
|
||||
"Button Group": {
|
||||
"prefix": "b5-btn-gp",
|
||||
"body": [
|
||||
"<div class=\"btn-group ${2| ,btn-group-vertical,btn-group-sm,btn-group-lg,h1|} ${3|m,p|}${4|t,r,b,l,x,y|}${5|auto,0,1,2,3,4,5|}\" role=\"group\" aria-label=\"${1:Basic example}\">",
|
||||
" b5-btn${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Button Group"
|
||||
},
|
||||
"Bootstrap 5 BTN Reveal": {
|
||||
"prefix": "b5-btn-reveal",
|
||||
"body": [
|
||||
"<button class=\"btn btn-primary\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${1|collapseExample, |}\" aria-expanded=\"false\" aria-controls=\"${1|collapseExample, |}\">",
|
||||
" ${2|Button with data-target, |}",
|
||||
"</button>",
|
||||
"<div class=\"collapse\" id=\"${1|collapseExample, |}\">",
|
||||
" <div class=\"card card-body\">",
|
||||
" ${3|Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident., |}",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 BTN Reveal"
|
||||
},
|
||||
"Pagination": {
|
||||
"prefix": "b5-pagination",
|
||||
"body": [
|
||||
"<nav aria-label=\"${10:Page navigation example}\">",
|
||||
" <ul class=\"pagination ${1|pagination-sm,pagination-lg;|}\">",
|
||||
" <li class=\"page-item\">",
|
||||
" <a class=\"page-link\" href=\"#\" aria-label=\"Previous\">",
|
||||
" <span aria-hidden=\"true\">${2|Previous,«|}</span>",
|
||||
" </a>",
|
||||
" </li>",
|
||||
" <li class=\"page-item\"><a class=\"page-link\" href=\"#\">1</a></li>",
|
||||
" <li class=\"page-item\"><a class=\"page-link\" href=\"#\">2</a></li>",
|
||||
" ${0}",
|
||||
" <li class=\"page-item\">",
|
||||
" <a class=\"page-link\" href=\"#\" aria-label=\"Next\">",
|
||||
" <span aria-hidden=\"true\">${3|Next,»|}</span>",
|
||||
" </a>",
|
||||
" </li>",
|
||||
" </ul>",
|
||||
"</nav>"
|
||||
],
|
||||
"description": "Pagination"
|
||||
},
|
||||
"Utility Text": {
|
||||
"prefix": "b5-txt",
|
||||
"body": [
|
||||
"<${1|div,p,h1|} class=\"text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|italic,normal,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6|lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}\">",
|
||||
"${9:Left aligned text on all viewport sizes.}",
|
||||
"</${1|div,p,h1|}>"
|
||||
],
|
||||
"description": "Text Utility"
|
||||
},
|
||||
"Utility Borders": {
|
||||
"prefix": "b5-borders",
|
||||
"body": [
|
||||
"<${1|div,p,h1|} class=\"border${1| ,-0,-top,-right,-bottom,-left,-top-0,-right-0,-bottom-0,-left-0|} border-${2|white,primary,secondary,success,danger,warning,info,light,dark|} ${3| ,rounded,rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,rounded-pill|} ${4| ,rounded-sm,rounded-lg|}\">",
|
||||
"${10:Left aligned text on all viewport sizes.}",
|
||||
"</${1|div,p,h1|}>"
|
||||
],
|
||||
"description": "Utility Borders"
|
||||
},
|
||||
"Utility Spacing": {
|
||||
"prefix": "b5-Spacing",
|
||||
"body": [
|
||||
"<${1|div,p,h1|} class=\"${2|m,p|}${3|t,r,b,l,x,y|}${3|auto,0,1,2,3,4,5|} \">",
|
||||
"${0}",
|
||||
"</${1|div,p,h1|}>"
|
||||
],
|
||||
"description": "Utility Spacing"
|
||||
},
|
||||
"Modal-BTN": {
|
||||
"prefix": "b5-modal-btn",
|
||||
"body": [
|
||||
"<button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}\" data-toggle=\"modal\" data-target=\"#${2:exampleModal}\">",
|
||||
" ${3:Launch demo modal}",
|
||||
"</button>"
|
||||
],
|
||||
"description": "Modal-Body"
|
||||
},
|
||||
"Modal-body": {
|
||||
"prefix": "b5-modal-body",
|
||||
"body": [
|
||||
"<div class=\"modal fade\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
|
||||
" <div class=\"modal-dialog\">",
|
||||
" <div class=\"modal-content\">",
|
||||
" <div class=\"modal-header\">",
|
||||
" <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
|
||||
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
|
||||
" <span aria-hidden=\"true\">×</span>",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" <div class=\"modal-body\">",
|
||||
" ${0}",
|
||||
" </div>",
|
||||
" ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"description": "Modal-Body"
|
||||
},
|
||||
"Modal-Footer": {
|
||||
"prefix": "b5-modal-footer",
|
||||
"body": [
|
||||
"<div class=\"modal fade ${6|modal-sm,modal-lg,modal-xl|}\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
|
||||
" <div class=\"modal-dialog ${5|modal-dialog-centered, modal-dialog-scrollable|}\">",
|
||||
" <div class=\"modal-content\">",
|
||||
" <div class=\"modal-header\">",
|
||||
" <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
|
||||
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
|
||||
" <span aria-hidden=\"true\">×</span>",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" <div class=\"modal-body\">",
|
||||
" ${0}",
|
||||
" </div>",
|
||||
" ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"description": "Modal-BTN"
|
||||
},
|
||||
"badge": {
|
||||
"prefix": "b5-badge",
|
||||
"body": [
|
||||
"<span class=\"badge ${1|rounded-pill,secondary,success|} bg-${2|primary,secondary,success,danger,warning,info,light,dark|} ${3| ,text-dark}\">${4:Primary}</span>"
|
||||
],
|
||||
"description": "badge"
|
||||
},
|
||||
"tooltips": {
|
||||
"prefix": "b5-tooltip",
|
||||
"body": [
|
||||
"<button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}\" data-toggle=\"tooltip\" data-html=\"${3|false,true|}\" data-placement=\"${2|top,right,bottom,left|}\" title=\"${2:Tooltip on top}\">",
|
||||
" ${2:Tooltip on top}",
|
||||
"</button>"
|
||||
],
|
||||
"description": "tooltips"
|
||||
},
|
||||
"alert": {
|
||||
"prefix": "b5-alert",
|
||||
"body": [
|
||||
"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|}\" role=\"alert\">",
|
||||
" ${2:A simple primary alert—check it out!}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "alert"
|
||||
},
|
||||
"alert big": {
|
||||
"prefix": "b5-alert-big",
|
||||
"body": [
|
||||
"<div class=\"alert alert-${1|primary,secondary,success,danger,warning,info,light,dark|} alert-dismissible fade show\" role=\"alert\">",
|
||||
"<h4 class=\"alert-heading\">$2:Well done!}</h4>",
|
||||
" <strong>${3:Holy guacamole!}</strong> ",
|
||||
" <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\">",
|
||||
" <span aria-hidden=\"true\">×</span>",
|
||||
" </button>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "alert big"
|
||||
},
|
||||
"breadcumb": {
|
||||
"prefix": "b5-breadcumb",
|
||||
"body": [
|
||||
"<${1:nav} class=\"breadcrumb\" aria-label=\"breadcrumb\">",
|
||||
" <${2:ol}>",
|
||||
" <li class=\"${3|breadcrumb-item|, breadcrumb-item active}\"><a href=\"${5}\">${6:Library}</a></li>",
|
||||
" </${2:ol|}>",
|
||||
"</${1:nav}>"
|
||||
],
|
||||
"description": "breadcumb"
|
||||
},
|
||||
"Progress Bar": {
|
||||
"prefix": "b5-progress",
|
||||
"body": [
|
||||
"<div class=\"progress\">",
|
||||
" <div class=\"${1|progress-bar,progress-bar progress-bar-striped|} bg-${2|success,info,success,warning,wardanger}}\" role=\"progressbar\" style=\"width: ${3|25,50,75,100, |}%;\"",
|
||||
" aria-valuenow=\"${3|25,50,75,100, |}\" aria-valuemin=\"${4:0}\" aria-valuemax=\"${5:100}\" ${6| ,progress-bar-animated}>${6:Description}</div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Progress Bar"
|
||||
},
|
||||
"Bootstrap 5 carousel": {
|
||||
"prefix": "b5-carousel",
|
||||
"body": [
|
||||
"<div id=\"${1:slider1}\" class=\"carousel slide\" data-ride=\"carousel\">",
|
||||
" <ol class=\"carousel-indicators\">",
|
||||
" <li data-target=\"#${1:slider1}\" data-slide-to=\"0\" class=\"active\"></li>",
|
||||
" <li data-target=\"#${1:slider1}\" data-slide-to=\"1\"></li>",
|
||||
" <li data-target=\"#${1:slider1}\" data-slide-to=\"2\"></li>",
|
||||
" </ol>",
|
||||
" <div class=\"carousel-inner\">",
|
||||
" b5-carousel-item${0}",
|
||||
" </div>",
|
||||
" <a class=\"carousel-control-prev\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"prev\">",
|
||||
" <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>",
|
||||
" <span class=\"sr-only\">Previous</span>",
|
||||
" </a>",
|
||||
" <a class=\"carousel-control-next\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"next\">",
|
||||
" <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>",
|
||||
" <span class=\"sr-only\">Next</span>",
|
||||
" </a>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"description": "Bootstrap 5 carousel"
|
||||
},
|
||||
"Bootstrap 5 carousel item": {
|
||||
"prefix": "b5-carousel-item",
|
||||
"body": [
|
||||
" <div class=\"${1|carousel-item,carousel-item active|}\">",
|
||||
" <img src=\"${2|https://images.unsplash.com/photo-1518384491952-3f4731b5f9cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60,https://images.unsplash.com/photo-1580821810660-5486b8e980a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60|}\" class=\"d-block w-100\" alt=\"${3:The developer is an asshole and didn't want to help you, I'm sorry about that.}\">",
|
||||
" </div>"
|
||||
],
|
||||
"description": "Bootstrap 5 carousel item"
|
||||
},
|
||||
"Bootstrap 5 scripts": {
|
||||
"prefix": "b5-$",
|
||||
"body": [
|
||||
"<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
|
||||
"<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
|
||||
"${1|<script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>, |}"
|
||||
],
|
||||
"description": "Adds the cnd for the css scripts and has an option to use popper."
|
||||
},
|
||||
"Offcanvas Scripts": {
|
||||
"prefix": "b5-$-offcanvas-scripts",
|
||||
"body": [
|
||||
"<style>",
|
||||
" html,body {overflow-x: hidden; /* Prevent scroll on narrow devices */}",
|
||||
" body {padding-top: 56px;}",
|
||||
"",
|
||||
" @media (max-width: 991.98px) {",
|
||||
" .offcanvas-collapse {",
|
||||
" position: fixed;",
|
||||
" top: 56px; /* Height of navbar */",
|
||||
" bottom: 0;",
|
||||
" left: 100%;",
|
||||
" width: 100%;",
|
||||
" padding-right: 1rem;",
|
||||
" padding-left: 1rem;",
|
||||
" overflow-y: auto;",
|
||||
" visibility: hidden;",
|
||||
" background-color: #343a40;",
|
||||
" transition: transform .3s ease-in-out, visibility .3s ease-in-out;",
|
||||
" }",
|
||||
" .offcanvas-collapse.open {",
|
||||
" visibility: visible;",
|
||||
" transform: translateX(-100%);",
|
||||
" }",
|
||||
" }",
|
||||
"",
|
||||
" .nav-scroller {",
|
||||
" position: relative;",
|
||||
" z-index: 2;",
|
||||
" height: 2.75rem;",
|
||||
" overflow-y: hidden;",
|
||||
" }",
|
||||
"",
|
||||
" .nav-scroller .nav {",
|
||||
" display: flex;",
|
||||
" flex-wrap: nowrap;",
|
||||
" padding-bottom: 1rem;",
|
||||
" margin-top: -1px;",
|
||||
" overflow-x: auto;",
|
||||
" color: rgba(255, 255, 255, .75);",
|
||||
" text-align: center;",
|
||||
" white-space: nowrap;",
|
||||
" -webkit-overflow-scrolling: touch;",
|
||||
" }",
|
||||
"",
|
||||
" .nav-underline .nav-link {",
|
||||
" padding-top: .75rem;",
|
||||
" padding-bottom: .75rem;",
|
||||
" font-size: .875rem;",
|
||||
" color: #6c757d;",
|
||||
" }",
|
||||
"",
|
||||
" .nav-underline .nav-link:hover {",
|
||||
" color: #007bff;",
|
||||
" }",
|
||||
"",
|
||||
" .nav-underline .active {",
|
||||
" font-weight: 500;",
|
||||
" color: #343a40;",
|
||||
" }",
|
||||
"",
|
||||
" .text-white-50 { color: rgba(255, 255, 255, .5); }",
|
||||
"",
|
||||
" .bg-purple { background-color: #6f42c1; }",
|
||||
"</style>",
|
||||
"<script type=\"text/javascript\">",
|
||||
" (function () {",
|
||||
" 'use strict'",
|
||||
" document.querySelector('[data-toggle=\"offcanvas\"]').addEventListener('click', function () {",
|
||||
" document.querySelector('.offcanvas-collapse').classList.toggle('open')",
|
||||
" })",
|
||||
" })()",
|
||||
" </script>"
|
||||
],
|
||||
"description": "Offcanvas Scripts"
|
||||
},
|
||||
"Bootstrap 5 HTML Template": {
|
||||
"prefix": "!b5-$",
|
||||
"body": [
|
||||
"<!DOCTYPE html>",
|
||||
"<html lang=\"en\">",
|
||||
"<head>",
|
||||
" <meta charset=\"UTF-8\">",
|
||||
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
|
||||
" <title>${1:Bootstrap Site}</title>",
|
||||
" <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
|
||||
" <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
|
||||
" <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
|
||||
"</head>",
|
||||
"<body>",
|
||||
"<h1>Hello-Bootstrap</h1>",
|
||||
"</body>",
|
||||
"</html>"
|
||||
],
|
||||
"description": "An HTML Boilerplate with Bootstrap 5"
|
||||
},
|
||||
"Offcanvas Template": {
|
||||
"prefix": "b5-$-offcanvas",
|
||||
"body": [
|
||||
"<!doctype html>",
|
||||
"<html lang=\"en\">",
|
||||
" <head>",
|
||||
" <meta charset=\"utf-8\">",
|
||||
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
|
||||
" <meta name=\"author\" content=\"Hans McMurdy\">",
|
||||
" <title>Bootstrap 5 Offcanvas Template · Bootstrap</title>",
|
||||
" <meta name=\"title\" content=\"#JavaScriptFirst\">",
|
||||
" <meta name=\"description\" content=\"Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First\">",
|
||||
" <!-- Bootstrap core CSS -->",
|
||||
" <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
|
||||
" <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
|
||||
" <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
|
||||
" <!-- Favicons -->",
|
||||
"",
|
||||
" <meta name=\"theme-color\" content=\"#7952b3\">",
|
||||
" <style>",
|
||||
" .bd-placeholder-img {",
|
||||
" font-size: 1.125rem;",
|
||||
" text-anchor: middle;",
|
||||
" -webkit-user-select: none;",
|
||||
" -moz-user-select: none;",
|
||||
" -ms-user-select: none;",
|
||||
" user-select: none;",
|
||||
" }",
|
||||
" @media (min-width: 768px) {",
|
||||
" .bd-placeholder-img-lg {",
|
||||
" font-size: 3.5rem;",
|
||||
" }",
|
||||
" }",
|
||||
" </style>",
|
||||
" <style>",
|
||||
" /* Prevent scroll on narrow devices */",
|
||||
" html,body {overflow-x: hidden; }",
|
||||
" body {padding-top: 56px;}",
|
||||
" @media (max-width: 991.98px) {",
|
||||
" .offcanvas-collapse {",
|
||||
" position: fixed;",
|
||||
" top: 56px; /* Height of navbar */",
|
||||
" bottom: 0;",
|
||||
" left: 100%;",
|
||||
" width: 100%;",
|
||||
" padding-right: 1rem;",
|
||||
" padding-left: 1rem;",
|
||||
" overflow-y: auto;",
|
||||
" visibility: hidden;",
|
||||
" background-color: #343a40;",
|
||||
" transition: transform .3s ease-in-out, visibility .3s ease-in-out;",
|
||||
" }",
|
||||
" .offcanvas-collapse.open {",
|
||||
" visibility: visible;",
|
||||
" transform: translateX(-100%);",
|
||||
" }",
|
||||
" }",
|
||||
" .nav-scroller {",
|
||||
" position: relative;",
|
||||
" z-index: 2;",
|
||||
" height: 2.75rem;",
|
||||
" overflow-y: hidden;",
|
||||
" }",
|
||||
" .nav-scroller .nav {",
|
||||
" display: flex;",
|
||||
" flex-wrap: nowrap;",
|
||||
" padding-bottom: 1rem;",
|
||||
" margin-top: -1px;",
|
||||
" overflow-x: auto;",
|
||||
" color: rgba(255, 255, 255, .75);",
|
||||
" text-align: center;",
|
||||
" white-space: nowrap;",
|
||||
" -webkit-overflow-scrolling: touch;",
|
||||
" }",
|
||||
" .nav-underline .nav-link {",
|
||||
" padding-top: .75rem;",
|
||||
" padding-bottom: .75rem;",
|
||||
" font-size: .875rem;",
|
||||
" color: #6c757d;",
|
||||
" }",
|
||||
" .nav-underline .nav-link:hover {color: #007bff;}",
|
||||
" .nav-underline .active {font-weight: 500;color: #343a40;}",
|
||||
" .text-white-50 { color: rgba(255, 255, 255, .5); }",
|
||||
" .bg-purple { background-color: #6f42c1; }",
|
||||
" </style>",
|
||||
" </head>",
|
||||
" <body class=\"bg-light\">",
|
||||
" <nav class=\"navbar navbar-expand-lg fixed-top navbar-dark bg-dark\">",
|
||||
" <div class=\"container-fluid\">",
|
||||
" <a class=\"navbar-brand\" href=\"#\">Offcanvas navbar</a>",
|
||||
" <button class=\"navbar-toggler p-0 border-0\" type=\"button\" data-toggle=\"offcanvas\">",
|
||||
" <span class=\"navbar-toggler-icon\"></span>",
|
||||
" </button>",
|
||||
" <div class=\"navbar-collapse offcanvas-collapse\" id=\"navbarsExampleDefault\">",
|
||||
" <ul class=\"navbar-nav mr-auto mb-2 mb-lg-0\">",
|
||||
" <li class=\"nav-item active\">",
|
||||
" <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
|
||||
" </li>",
|
||||
" <li class=\"nav-item\">",
|
||||
" <a class=\"nav-link\" href=\"#\">About</a>",
|
||||
" </li>",
|
||||
" </ul>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </nav>",
|
||||
" ",
|
||||
" <main class=\"container\">",
|
||||
" <div class=\"d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm\">",
|
||||
" <img class=\"mr-3\" src=\"https://hansmcmurdy.com/JavaScript-First/logo.svg\" alt=\"\" width=\"48\" height=\"48\">",
|
||||
" <div class=\"lh-1\">",
|
||||
" <h6 class=\"mb-0 text-white lh-1\">#JavaScriptFirst</h6>",
|
||||
" <small>Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript.</small>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"",
|
||||
" </main>",
|
||||
" <script type=\"text/javascript\">",
|
||||
" (function () {",
|
||||
" 'use strict'",
|
||||
" document.querySelector('[data-toggle=\"offcanvas\"]').addEventListener('click', function () {",
|
||||
" document.querySelector('.offcanvas-collapse').classList.toggle('open')",
|
||||
" })",
|
||||
" })()",
|
||||
" </script>",
|
||||
" </body>",
|
||||
"</html>"
|
||||
],
|
||||
"description": "Offcanvas Template"
|
||||
}
|
||||
}
|
||||
7885
snippets/B5-Snippets/snippets/snippets.json
Normal file
7885
snippets/B5-Snippets/snippets/snippets.json
Normal file
File diff suppressed because it is too large
Load diff
19
snippets/B5-Snippets/snippets/types/breadcrumb.json
Normal file
19
snippets/B5-Snippets/snippets/types/breadcrumb.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"breadcrumb": {
|
||||
"prefix": "b5-breadcrumb",
|
||||
"body": [
|
||||
"<${1:nav} class=\"breadcrumb\" aria-label=\"breadcrumb\">",
|
||||
" <ol>",
|
||||
" <li class=\"${2|breadcrumb-item, breadcrumb-item active|}\"><a href=\"${3:Link}\">${4:Library}</a></li>",
|
||||
" b5${0}",
|
||||
" </ol>",
|
||||
"</${1:nav}>"
|
||||
],
|
||||
"description": "breadcrumb"
|
||||
},
|
||||
"breadcrumb item": {
|
||||
"prefix": "b5-breadcrumb-item",
|
||||
"body": ["<li class=\"${1|breadcrumb-item, breadcrumb-item active|}\"><a href=\"${2:Link}\">${3:Library}</a></li>"],
|
||||
"description": "breadcrumb"
|
||||
}
|
||||
}
|
||||
41
snippets/B5-Snippets/snippets/types/buttons.json
Normal file
41
snippets/B5-Snippets/snippets/types/buttons.json
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"Button": {
|
||||
"prefix": "b5-btn",
|
||||
"body": [
|
||||
"<a class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|} btn-${2|sm,lg|} \" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
|
||||
],
|
||||
"description": "Create a basic button."
|
||||
},
|
||||
"Call to Action Button": {
|
||||
"prefix": "b5-btn-cta",
|
||||
"body": [
|
||||
"<a class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|} btn-${2|sm,lg|} \" href=\"${3|#, ,tel:123-456-7890,mailto:someone@yoursite.com,bunny.mp4|}\" ${4| ,disabled,dowload|} role=\"button\">${5|Link, ,call,mail|}</a>"
|
||||
],
|
||||
"description": "Create a CTA Button and drive your customer experience forward. \n Options: \n 1. Call\n 2. Email\n"
|
||||
},
|
||||
"BTN-Outline": {
|
||||
"prefix": "b5-btn-o",
|
||||
"body": [
|
||||
"<a class=\"btn btn-outline-${2|primary,secondary,success,danger,warning,info,light,dark|}\" href=\"${3|#, |}\" role=\"button\">${4| ,Link|}</a>"
|
||||
],
|
||||
"description": "Link BTN"
|
||||
},
|
||||
"Close Button": {
|
||||
"prefix": "b5-btn-close",
|
||||
"body": [
|
||||
"<button type=\"button\" class=\"close\" ${1| ,disabled|} aria-label=\"Close\">",
|
||||
" <span aria-hidden=\"true\">×</span>",
|
||||
"</button>"
|
||||
],
|
||||
"description": "Close Button"
|
||||
},
|
||||
"Button Group": {
|
||||
"prefix": "b5-btn-gp",
|
||||
"body": [
|
||||
"<div class=\"btn-group ${2| ,btn-group-vertical,btn-group-sm,btn-group-lg,h1|} ${3|!spacing,!color,!font,!shadow|}\" role=\"group\" aria-label=\"${1:Basic example}\">",
|
||||
" b5-btn${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Button Group"
|
||||
}
|
||||
}
|
||||
17
snippets/B5-Snippets/snippets/types/cards.json
Normal file
17
snippets/B5-Snippets/snippets/types/cards.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"Bootstrap 5 Card": {
|
||||
"prefix": "b5-card",
|
||||
"body": [
|
||||
"<div class=\"card\" style=\"width:${1|18rem;, |}\">",
|
||||
" <img src=\"${2|https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60, |}\" class=\"card-img-top\" alt=\"...\">",
|
||||
" <div class=\"card-body\">",
|
||||
" <h5 class=\"card-title\">${3|Card title, |}</h5>",
|
||||
" <h6 class=\"card-subtitle ${4|mb-2 text-muted, |} \">${5|Card subtitle, |}</h6>",
|
||||
" <p class=\"card-text\">${6|Some quick example text to build on the card title and make up the bulk of the card's content., |}</p>",
|
||||
" b5${0}",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 Card"
|
||||
}
|
||||
}
|
||||
36
snippets/B5-Snippets/snippets/types/carousel.json
Normal file
36
snippets/B5-Snippets/snippets/types/carousel.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"Bootstrap 5 carousel": {
|
||||
"prefix": "b5-carousel",
|
||||
"body": [
|
||||
"<div id=\"${1:slider1}\" class=\"carousel slide\" data-ride=\"carousel\">",
|
||||
" <ol class=\"carousel-indicators\">",
|
||||
" <li data-target=\"#${1:slider1}\" data-slide-to=\"0\" class=\"active\"></li>",
|
||||
" <li data-target=\"#${1:slider1}\" data-slide-to=\"1\"></li>",
|
||||
" <li data-target=\"#${1:slider1}\" data-slide-to=\"2\"></li>",
|
||||
" </ol>",
|
||||
" <div class=\"carousel-inner\">",
|
||||
" b5-carousel-item${0}",
|
||||
" </div>",
|
||||
" <a class=\"carousel-control-prev\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"prev\">",
|
||||
" <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>",
|
||||
" <span class=\"sr-only\">Previous</span>",
|
||||
" </a>",
|
||||
" <a class=\"carousel-control-next\" href=\"#${1:slider1}\" role=\"button\" data-slide=\"next\">",
|
||||
" <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>",
|
||||
" <span class=\"sr-only\">Next</span>",
|
||||
" </a>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"description": "Bootstrap 5 carousel"
|
||||
},
|
||||
"Bootstrap 5 carousel item": {
|
||||
"prefix": "b5-carousel-item",
|
||||
"body": [
|
||||
" <div class=\"${1|carousel-item,carousel-item active|}\">",
|
||||
" <img src=\"${2|https://images.unsplash.com/photo-1518384491952-3f4731b5f9cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60,https://images.unsplash.com/photo-1580821810660-5486b8e980a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60|}\" class=\"d-block w-100\" alt=\"${3:The developer is an asshole and didn't want to help you, I'm sorry about that.}\">",
|
||||
" </div>"
|
||||
],
|
||||
"description": "Bootstrap 5 carousel item"
|
||||
}
|
||||
}
|
||||
39
snippets/B5-Snippets/snippets/types/collapse.json
Normal file
39
snippets/B5-Snippets/snippets/types/collapse.json
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"Button Reveal": {
|
||||
"prefix": "b5-btn-reveal",
|
||||
"body": [
|
||||
"<button class=\"btn btn-primary\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${1|collapseExample, |}\" aria-expanded=\"false\" aria-controls=\"${1|collapseExample, |}\">",
|
||||
" ${2|Button with data-target, |}",
|
||||
"</button>",
|
||||
"<div class=\"collapse\" id=\"${1|collapseExample, |}\">",
|
||||
" <div class=\"card card-body\">",
|
||||
" ${3|Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident., |}",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Button Reveal"
|
||||
},
|
||||
"Accordion Example": {
|
||||
"prefix": "accordion-example",
|
||||
"body": [
|
||||
"<div class=\"accordion\" id=\"${1:accordionExample}\">",
|
||||
" <div class=\"card\">",
|
||||
" <div class=\"card-header\" id=\"headingOne\">",
|
||||
" <h2 class=\"mb-0\">",
|
||||
" <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${2:collapseOne}\" aria-expanded=\"true\" aria-controls=\"${2:collapseOne}\">",
|
||||
" Collapsible Group Item #1",
|
||||
" </button>",
|
||||
" </h2>",
|
||||
" </div>",
|
||||
"",
|
||||
" <div id=\"${2:collapseOne}\" class=\"collapse show\" aria-labelledby=\"headingOne\" data-parent=\"#${1:accordionExample}\">",
|
||||
" <div class=\"card-body\">",
|
||||
" Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Accordion Example"
|
||||
}
|
||||
}
|
||||
12
snippets/B5-Snippets/snippets/types/content.json
Normal file
12
snippets/B5-Snippets/snippets/types/content.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"figure": {
|
||||
"prefix": "b5-figure",
|
||||
"body": [
|
||||
"<figure class=\"figure\">",
|
||||
" <img src=\"${1:https://placehold.it/400x300}\" class=\"figure-img img-fluid rounded\" alt=\"...\">",
|
||||
" <figcaption class=\"figure-caption\">${2:A caption for the above image.}</figcaption>",
|
||||
"</figure>"
|
||||
],
|
||||
"description": "figure"
|
||||
}
|
||||
}
|
||||
3939
snippets/B5-Snippets/snippets/types/fonts.json
Normal file
3939
snippets/B5-Snippets/snippets/types/fonts.json
Normal file
File diff suppressed because it is too large
Load diff
72
snippets/B5-Snippets/snippets/types/forms.json
Normal file
72
snippets/B5-Snippets/snippets/types/forms.json
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
{
|
||||
"form": {
|
||||
"prefix": "b5-form",
|
||||
"body": [
|
||||
"<form class=\"row g-3 needs-validation\" novalidate>",
|
||||
" <div class=\"col-md-4\">",
|
||||
" <label for=\"validationCustom01\" class=\"form-label\">First name</label>",
|
||||
" <input type=\"text\" class=\"form-control\" id=\"validationCustom01\" value=\"Mark\" required>",
|
||||
" <div class=\"valid-feedback\">",
|
||||
" Looks good!",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-md-4\">",
|
||||
" <label for=\"validationCustom02\" class=\"form-label\">Last name</label>",
|
||||
" <input type=\"text\" class=\"form-control\" id=\"validationCustom02\" value=\"Otto\" required>",
|
||||
" <div class=\"valid-feedback\">",
|
||||
" Looks good!",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-md-4\">",
|
||||
" <label for=\"validationCustomUsername\" class=\"form-label\">Username</label>",
|
||||
" <div class=\"input-group\">",
|
||||
" <span class=\"input-group-text\" id=\"inputGroupPrepend\">@</span>",
|
||||
" <input type=\"text\" class=\"form-control\" id=\"validationCustomUsername\" aria-describedby=\"inputGroupPrepend\" required>",
|
||||
" <div class=\"invalid-feedback\">",
|
||||
" Please choose a username.",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-md-6\">",
|
||||
" <label for=\"validationCustom03\" class=\"form-label\">City</label>",
|
||||
" <input type=\"text\" class=\"form-control\" id=\"validationCustom03\" required>",
|
||||
" <div class=\"invalid-feedback\">",
|
||||
" Please provide a valid city.",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-md-3\">",
|
||||
" <label for=\"validationCustom04\" class=\"form-label\">State</label>",
|
||||
" <select class=\"form-select\" id=\"validationCustom04\" required>",
|
||||
" <option selected disabled value=\"\">Choose...</option>",
|
||||
" <option>...</option>",
|
||||
" </select>",
|
||||
" <div class=\"invalid-feedback\">",
|
||||
" Please select a valid state.",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-md-3\">",
|
||||
" <label for=\"validationCustom05\" class=\"form-label\">Zip</label>",
|
||||
" <input type=\"text\" class=\"form-control\" id=\"validationCustom05\" required>",
|
||||
" <div class=\"invalid-feedback\">",
|
||||
" Please provide a valid zip.",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-12\">",
|
||||
" <div class=\"form-check\">",
|
||||
" <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"invalidCheck\" required>",
|
||||
" <label class=\"form-check-label\" for=\"invalidCheck\">",
|
||||
" Agree to terms and conditions",
|
||||
" </label>",
|
||||
" <div class=\"invalid-feedback\">",
|
||||
" You must agree before submitting.",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class=\"col-12\">",
|
||||
" <button class=\"btn btn-primary\" type=\"submit\">Submit form</button>",
|
||||
" </div>",
|
||||
"</form>"
|
||||
],
|
||||
"description": "form"
|
||||
}
|
||||
}
|
||||
29
snippets/B5-Snippets/snippets/types/grid.json
Normal file
29
snippets/B5-Snippets/snippets/types/grid.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"Bootstrap 5 container": {
|
||||
"prefix": "b5-contain",
|
||||
"body": [
|
||||
"<div class=\"container${1|-fluid, ,-sm,-md,-lg,-xl,-xxl|} ${2|!direction,!justify,!align,!fill,!grow-shrink,!flex-wrap,!flex-order|} ${3|!spacing,!shadow,!color,!font,overflow-hidden|}\">",
|
||||
"\tb5-row${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 container"
|
||||
},
|
||||
"Bootstrap 5 row": {
|
||||
"prefix": "b5-row",
|
||||
"body": [
|
||||
"<div class=\"row ${1| ,row-cols-2,row-cols-3, auto,justify-content-md-center,|}\">",
|
||||
"\tb5-col${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 row"
|
||||
},
|
||||
"Bootstrap 5 col": {
|
||||
"prefix": "b5-col",
|
||||
"body": [
|
||||
"<div class=\"col${1| ,-1,-2,-3,-4,-5,-6,-sm,-md,-lg,-xl,-xxl|}${2| ,-auto,-1,-2,-3,-4,-5,-6,-7,-8,-9,-10,-11,-12|}\">",
|
||||
" b5-col${0}",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Bootstrap 5 col"
|
||||
}
|
||||
}
|
||||
43
snippets/B5-Snippets/snippets/types/list-group.json
Normal file
43
snippets/B5-Snippets/snippets/types/list-group.json
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"tablist": {
|
||||
"prefix": "b5-tablist",
|
||||
"body": [
|
||||
"<!-- List group -->",
|
||||
"<div class=\"list-group\" id=\"myList\" role=\"tablist\">",
|
||||
" <a class=\"list-group-item list-group-item-action active\" data-toggle=\"list\" href=\"#home\" role=\"tab\">Home</a>",
|
||||
" <a class=\"list-group-item list-group-item-action\" data-toggle=\"list\" href=\"#profile\" role=\"tab\">Profile</a>",
|
||||
" <a class=\"list-group-item list-group-item-action\" data-toggle=\"list\" href=\"#messages\" role=\"tab\">Messages</a>",
|
||||
" <a class=\"list-group-item list-group-item-action\" data-toggle=\"list\" href=\"#settings\" role=\"tab\">Settings</a>",
|
||||
"</div>",
|
||||
"",
|
||||
"<!-- Tab panes -->",
|
||||
"<div class=\"tab-content\">",
|
||||
" <div class=\"tab-pane active\" id=\"home\" role=\"tabpanel\">...</div>",
|
||||
" <div class=\"tab-pane\" id=\"profile\" role=\"tabpanel\">...</div>",
|
||||
" <div class=\"tab-pane\" id=\"messages\" role=\"tabpanel\">...</div>",
|
||||
" <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">...</div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "tablist"
|
||||
},
|
||||
"list-group-badge": {
|
||||
"prefix": "b5-list-group-badge",
|
||||
"body": [
|
||||
"<ul class=\"list-group\">",
|
||||
" <li class=\"list-group-item d-flex justify-content-between align-items-center\">",
|
||||
" Cras justo odio",
|
||||
" <span class=\"badge bg-primary rounded-pill\">14</span>",
|
||||
" </li>",
|
||||
" <li class=\"list-group-item d-flex justify-content-between align-items-center\">",
|
||||
" Dapibus ac facilisis in",
|
||||
" <span class=\"badge bg-primary rounded-pill\">2</span>",
|
||||
" </li>",
|
||||
" <li class=\"list-group-item d-flex justify-content-between align-items-center\">",
|
||||
" Morbi leo risus",
|
||||
" <span class=\"badge bg-primary rounded-pill\">1</span>",
|
||||
" </li>",
|
||||
"</ul>"
|
||||
],
|
||||
"description": "list-group-badge"
|
||||
}
|
||||
}
|
||||
57
snippets/B5-Snippets/snippets/types/modal.json
Normal file
57
snippets/B5-Snippets/snippets/types/modal.json
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"Modal-BTN": {
|
||||
"prefix": "b5-modal-btn",
|
||||
"body": [
|
||||
"<button type=\"button\" class=\"btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}\" data-toggle=\"modal\" data-target=\"#${2:exampleModal}\">",
|
||||
" ${3:Launch demo modal}",
|
||||
"</button>"
|
||||
],
|
||||
"description": "Modal-Body"
|
||||
},
|
||||
"Modal-body": {
|
||||
"prefix": "b5-modal-body",
|
||||
"body": [
|
||||
"<div class=\"modal fade\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
|
||||
" <div class=\"modal-dialog\">",
|
||||
" <div class=\"modal-content\">",
|
||||
" <div class=\"modal-header\">",
|
||||
" <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
|
||||
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
|
||||
" <span aria-hidden=\"true\">×</span>",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" <div class=\"modal-body\">",
|
||||
" ${0}",
|
||||
" </div>",
|
||||
" ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"description": "Modal-Body"
|
||||
},
|
||||
"Modal-Footer": {
|
||||
"prefix": "b5-modal-footer",
|
||||
"body": [
|
||||
"<div class=\"modal fade ${6|modal-sm,modal-lg,modal-xl|}\" id=\"${1:staticBackdrop}\" data-backdrop=\"static\" data-keyboard=\"false\" tabindex=\"-1\" aria-labelledby=\"${1:staticBackdrop}\" aria-hidden=\"true\">",
|
||||
" <div class=\"modal-dialog ${5|modal-dialog-centered, modal-dialog-scrollable|}\">",
|
||||
" <div class=\"modal-content\">",
|
||||
" <div class=\"modal-header\">",
|
||||
" <h5 class=\"modal-title\" id=\"${2:staticBackdropLabel}\">${3:Modal title}</h5>",
|
||||
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">",
|
||||
" <span aria-hidden=\"true\">×</span>",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" <div class=\"modal-body\">",
|
||||
" ${0}",
|
||||
" </div>",
|
||||
" ${4| ,<div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button></div>|}",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"description": "Modal-BTN"
|
||||
}
|
||||
}
|
||||
110
snippets/B5-Snippets/snippets/types/navigation.json
Normal file
110
snippets/B5-Snippets/snippets/types/navigation.json
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
{
|
||||
"Bootstrap 5 Navbar Defaul": {
|
||||
"prefix": "b5-navbar-default",
|
||||
"body": [
|
||||
" <nav class=\"navbar ${2|navbar-expand-sm,navbar-expand-md,navbar-expand-lg|} navbar-${3|light,dark|} bg-${4|primary,secondary,success,danger,warning,info,light,dark|}\">",
|
||||
" <div class=\"container-fluid\">",
|
||||
" <a class=\"navbar-brand\" href=\"#\">${4:Navbar}</a>",
|
||||
" <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#${1:navbarID}\"",
|
||||
" aria-controls=\"${1:navbarID}\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
|
||||
" <span class=\"navbar-toggler-icon\"></span>",
|
||||
" </button>",
|
||||
" <div class=\"collapse navbar-collapse\" id=\"${1:navbarID}\">",
|
||||
" <div class=\"navbar-nav\">",
|
||||
" <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>",
|
||||
" ${0}",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" </nav>"
|
||||
],
|
||||
"description": "Bootstrap 5 Navbar Defaul"
|
||||
},
|
||||
"Bootstrap 5 nav-item":{
|
||||
"prefix":"b5-nav-item",
|
||||
"body":[
|
||||
"<li class=\"${1|nav-item,dropdown-item, |}\">",
|
||||
" <a class=\"${2|nav-link,nav-link active, |}\" aria-current=\"${3|page, |}\" href=\"${4|#, |}\">${5|Home,About,Blog,Contact, |}</a>",
|
||||
"</li>"
|
||||
],
|
||||
"description":"Bootstrap 5 nav-item"
|
||||
},
|
||||
"Bootstrap 5 navlink":{
|
||||
"prefix":"b5-navlink",
|
||||
"body":[
|
||||
"<a class=\"nav-link\" ${1| aria-disabled=\"false\",disabled tabindex=\"-1\" aria-disabled=\"true\"|} href=\"${2|#, |}\">${3|Home,About,Blog,Contact, |}</a>",
|
||||
""
|
||||
],
|
||||
"description":"Bootstrap 5 navlink"
|
||||
},
|
||||
"Bootstrap 5 nav-dropdown toggle":{
|
||||
"prefix":"b5-navdd-toggle",
|
||||
"body":[
|
||||
"<a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"${1|navbarDropdownMenuLink, |}\" role=\"button\" data-toggle=\"dropdown\" aria-expanded=\"false\">",
|
||||
"b5-n${0}",
|
||||
"</a>"
|
||||
],
|
||||
"description":"Bootstrap 5 nav-dropdown toggle"
|
||||
},
|
||||
"Bootstrap 5 nav-dropdown":{
|
||||
"prefix":"b5-navdropdown",
|
||||
"body":[
|
||||
"<ul class=\"dropdown-menu\" aria-labelledby=\"${1|navbarDropdownMenuLink, |}\">",
|
||||
"b5-n${0}",
|
||||
"</ul>"
|
||||
],
|
||||
"description":"Bootstrap 5 nav-dropdown"
|
||||
},
|
||||
"Nav Bottom":{
|
||||
"prefix":"b5-Nav-bottom",
|
||||
"body":[
|
||||
"<nav class=\"navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark\">",
|
||||
" <div class=\"container-fluid\">",
|
||||
" <a class=\"navbar-brand\" href=\"#\">Bottom navbar</a>",
|
||||
" <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
|
||||
" <span class=\"navbar-toggler-icon\"></span>",
|
||||
" </button>",
|
||||
" <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">",
|
||||
" <ul class=\"navbar-nav\">",
|
||||
" <li class=\"nav-item active\">",
|
||||
" <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
|
||||
" </li>",
|
||||
" <li class=\"nav-item\">",
|
||||
" <a class=\"nav-link\" href=\"#\">Link</a>",
|
||||
" </li>",
|
||||
" <li class=\"nav-item\">",
|
||||
" <a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>",
|
||||
" </li>",
|
||||
" <li class=\"nav-item dropup\">",
|
||||
" <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"dropdown10\" data-toggle=\"dropdown\" aria-expanded=\"false\">Dropup</a>",
|
||||
" <ul class=\"dropdown-menu\" aria-labelledby=\"dropdown10\">",
|
||||
" <li><a class=\"dropdown-item\" href=\"#\">Action</a></li>",
|
||||
" <li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>",
|
||||
" <li><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>",
|
||||
" </ul>",
|
||||
" </li>",
|
||||
" </ul>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</nav>"
|
||||
],
|
||||
"description":"Nav Bottom"
|
||||
},
|
||||
"Scrollspy":{
|
||||
"prefix":"b5-scrollspy",
|
||||
"body":[
|
||||
"<nav id=\"${1:navbar-example2}\" class=\"navbar navbar-light bg-light px-3\">",
|
||||
" <a class=\"navbar-brand\" href=\"#\">Navbar</a>",
|
||||
" <ul class=\"nav nav-pills\">",
|
||||
" <li class=\"nav-item\">",
|
||||
" <a class=\"nav-link\" href=\"#${2:fat}\">@fat</a>",
|
||||
" </li>",
|
||||
" </ul>",
|
||||
"</nav>",
|
||||
"<div data-spy=\"scroll\" data-target=\"#${1:navbar-example2}\" data-offset=\"0\">",
|
||||
" <h4 id=\"${2:fat}\">@fat</h4>",
|
||||
"</div>"
|
||||
],
|
||||
"description":"Scrollspy"
|
||||
}
|
||||
}
|
||||
25
snippets/B5-Snippets/snippets/types/pagination.json
Normal file
25
snippets/B5-Snippets/snippets/types/pagination.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"Pagination": {
|
||||
"prefix": "b5-pagination",
|
||||
"body": [
|
||||
"<nav aria-label=\"${10:Page navigation example}\">",
|
||||
" <ul class=\"pagination ${1|pagination-sm,pagination-lg;|}\">",
|
||||
" <li class=\"page-item\">",
|
||||
" <a class=\"page-link\" href=\"#\" aria-label=\"Previous\">",
|
||||
" <span aria-hidden=\"true\">${2|Previous,«|}</span>",
|
||||
" </a>",
|
||||
" </li>",
|
||||
" <li class=\"page-item\"><a class=\"page-link\" href=\"#\">1</a></li>",
|
||||
" <li class=\"page-item\"><a class=\"page-link\" href=\"#\">2</a></li>",
|
||||
" ${0}",
|
||||
" <li class=\"page-item\">",
|
||||
" <a class=\"page-link\" href=\"#\" aria-label=\"Next\">",
|
||||
" <span aria-hidden=\"true\">${3|Next,»|}</span>",
|
||||
" </a>",
|
||||
" </li>",
|
||||
" </ul>",
|
||||
"</nav>"
|
||||
],
|
||||
"description": "Pagination"
|
||||
}
|
||||
}
|
||||
12
snippets/B5-Snippets/snippets/types/progressbar.json
Normal file
12
snippets/B5-Snippets/snippets/types/progressbar.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"Progress Bar": {
|
||||
"prefix": "b5-progress",
|
||||
"body": [
|
||||
"<div class=\"progress\">",
|
||||
" <div class=\"${1|progress-bar,progress-bar progress-bar-striped|} bg-${2|success,info,success,warning,wardanger}}\" role=\"progressbar\" style=\"width: ${3|25,50,75,100, |}%;\"",
|
||||
" aria-valuenow=\"${3|25,50,75,100, |}\" aria-valuemin=\"${4:0}\" aria-valuemax=\"${5:100}\" ${6| ,progress-bar-animated}>${6:Description}</div>",
|
||||
"</div>"
|
||||
],
|
||||
"description": "Progress Bar"
|
||||
}
|
||||
}
|
||||
2510
snippets/B5-Snippets/snippets/types/templates.json
Normal file
2510
snippets/B5-Snippets/snippets/types/templates.json
Normal file
File diff suppressed because it is too large
Load diff
155
snippets/B5-Snippets/snippets/types/utility.json
Normal file
155
snippets/B5-Snippets/snippets/types/utility.json
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
{
|
||||
"Utilities": {
|
||||
"prefix": "!utility",
|
||||
"body": [
|
||||
"${1|!spacing,!shadow,!color,!font,!flex,!direction,!justify,!align,!display|}"
|
||||
],
|
||||
"description": "Utilities: Forgot a utility? \n Read about them: \n\n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/api/"
|
||||
},
|
||||
"Padding / Margin": {
|
||||
"prefix": "!spacing",
|
||||
"body": [
|
||||
"${1|m,p|}${3|x,y,t,r,b,l|}-${4|auto,0,1,2,3,4,5|}"
|
||||
],
|
||||
"description": "Quickly add Padding & Margins any class."
|
||||
},
|
||||
"Color": {
|
||||
"prefix": "!color",
|
||||
"body": [
|
||||
"${2|text,bg|}-${3|primary,secondary,success,danger,warning,info,light,dark|}"
|
||||
],
|
||||
"description": "Quickly add color utility classes to any class."
|
||||
},
|
||||
"Font": {
|
||||
"prefix": "!font",
|
||||
"body": [
|
||||
"text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|italic,normal,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6| ,lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}"
|
||||
],
|
||||
"description": "Quickly add font utility classes to any class."
|
||||
},
|
||||
"Shadow": {
|
||||
"prefix": "!shadow",
|
||||
"body": [
|
||||
"shadow${1| ,-sm,-lg|} bg-${2|white,light,dark,primary,secondary,success,danger,warning,info|} ${3|m,p|}${3|t,r,b,l,x,y|}${4|auto,0,1,2,3,4,5|}"
|
||||
],
|
||||
"description": "Add shadow to any class"
|
||||
},
|
||||
"Utility Paper Shadow": {
|
||||
"prefix": "b5-shadow",
|
||||
"body": [
|
||||
"<div class=\"shadow${1| ,-sm,-lg|} p-3 mb-5 bg-${2|primary,secondary,success,danger,warning,info,light,dark|} ${3|!spacing,!color,!font|} \">${0}</div>"
|
||||
],
|
||||
"description": "Utility Paper Shadow"
|
||||
},
|
||||
"Utility Color": {
|
||||
"prefix": "b5-color",
|
||||
"body": [
|
||||
"${2|text,bg|}${3|primary,secondary,success,danger,warning,info,light,dark|}"
|
||||
],
|
||||
"description": "Text Utility"
|
||||
},
|
||||
"Utility Text": {
|
||||
"prefix": "b5-txt",
|
||||
"body": [
|
||||
"<${1|div,p,h1|} class=\"text-${2|sm,md,lg,xl|}-${3|left,center,right|} lh-${4|base,1,sm,lg|} font-${5|normal,italic,weight-normal,weight-bold,weight-bolder,weight-light,weight-lighter|} text-${6|none,lowercase,uppercase,capitalize|} text-${7|decoration-none,decoration-underline,decoration-line-through|} text-${8|reset,break,monospace|}\">",
|
||||
"${9:Left aligned text on all viewport sizes.}",
|
||||
"</${1|div,p,h1|}>"
|
||||
],
|
||||
"description": "Text Utility"
|
||||
},
|
||||
"Utility Borders": {
|
||||
"prefix": "b5-borders",
|
||||
"body": [
|
||||
"<${1|div,p|} class=\"border${2| ,-0,-top,-right,-bottom,-left,-top-0,-right-0,-bottom-0,-left-0|} border-${3|white,primary,secondary,success,danger,warning,info,light,dark|} ${5| ,!round|}\">",
|
||||
"${10:Left aligned text on all viewport sizes.}",
|
||||
"</${1|div,p|}>"
|
||||
],
|
||||
"description": "Utility Borders"
|
||||
},
|
||||
"Round - Round out any edge.": {
|
||||
"prefix": "!round",
|
||||
"body": [
|
||||
"${1|rounded,rounded-top,rounded-right,rounded-bottom,rounded-left,rounded-circle,rounded-pill|} ${2|rounded-sm,rounded-lg|}"
|
||||
],
|
||||
"description": "Round - Round out any edge."
|
||||
},
|
||||
"Utility Spacing": {
|
||||
"prefix": "b5-spacing",
|
||||
"body": [
|
||||
"<${1|div,p,h1|} class=\"${2|m,p|}${3|t,r,b,l,x,y|}${4|auto,0,1,2,3,4,5|} \">",
|
||||
"${0}",
|
||||
"</${1|div,p,h1|}>"
|
||||
],
|
||||
"description": "Utility Spacing"
|
||||
},
|
||||
"Display Utilities:": {
|
||||
"prefix": "!display",
|
||||
"body": [
|
||||
"d-${2|flex,inline-flex,none,block,inline,inline-block,table,table-cell,table-row|} "
|
||||
],
|
||||
"description": "Display Utilities:"
|
||||
},
|
||||
"Utilities MQ:": {
|
||||
"prefix": "!MQ",
|
||||
"body": [
|
||||
"${1|-sm-,-md,-lg-,-xl-,-xxl-|}"
|
||||
],
|
||||
"description": "Display Utilities:"
|
||||
},
|
||||
"Flex Utility": {
|
||||
"prefix": "!flex",
|
||||
"body": [
|
||||
"d${1|-,!MQ|}${2|flex,inline-flex|} ${3| ,!direction,!justify,!align,!fill,!grow-shrink,!flex-wrap,!flex-order|}"
|
||||
],
|
||||
"description": "Flex Utility: Create a flexbox container and transform direct children elements into flex items. \n\n Ends with an options to continue with other flex utilities,!direction,!justify,!align."
|
||||
},
|
||||
"Flex Direction": {
|
||||
"prefix": "!direction",
|
||||
"body": [
|
||||
"flex${1|-,!MQ|}${2|row,row-reverse,column,column-reverse|}"
|
||||
],
|
||||
"description": "Flex Direction: Set the direction of flex items in a flex container with direction utilities"
|
||||
},
|
||||
"justify-content": {
|
||||
"prefix": "!justify",
|
||||
"body": [
|
||||
"justify-content${1|-,!MQ|}${2|start,end,center,between,around,evenly|}"
|
||||
],
|
||||
"description": "justify-content: \n change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column) \n Read the docs: \n\n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/#justify-content \n\n "
|
||||
},
|
||||
"Flex-Align": {
|
||||
"prefix": "!align",
|
||||
"body": [
|
||||
"align-${1|items,self,content|}${2|-,!MQ|}${3|start,end,center,baseline,stretch,around|}"
|
||||
],
|
||||
"description": "Flex-Align: \n Read the docs: \n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/#align-items \n\n 1. align-items: change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n\n 2. align-self: change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n\n 3. align-content: align flex items together on the cross axis. \n\n NOTE: CENTER & AROUND only apply to align Content."
|
||||
},
|
||||
"!fill": {
|
||||
"prefix": "!fill",
|
||||
"body": [
|
||||
"flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}"
|
||||
],
|
||||
"description": "!fill - use on sibling elements to force them into widths equal to their content"
|
||||
},
|
||||
"!grow-shrink": {
|
||||
"prefix": "!grow-shrink",
|
||||
"body": [
|
||||
"flex${1|-,!MQ|}-${2|grow,shrink|}-${3|0,1|}"
|
||||
],
|
||||
"description": "!grow-shrink - utilities to toggle a flex item’s ability to grow to fill available space"
|
||||
},
|
||||
"!flex-wrap": {
|
||||
"prefix": "!flex-wrap",
|
||||
"body": [
|
||||
"flex-${1|-,!MQ|}${2|wrap,nowrap,wrap-reverse|}"
|
||||
],
|
||||
"description": "!flex-wrap - utilities to toggle a flex item’s ability to grow to fill available space."
|
||||
},
|
||||
"!flex-order": {
|
||||
"prefix": "!flex-order",
|
||||
"body": [
|
||||
"order-${1|-,!MQ|}${2|1,2,3,4,5,first,last|}"
|
||||
],
|
||||
"description": "Flex Order - Change the visual order of specific flex items with a handful of order utilities."
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue