2011 lines
62 KiB
Plaintext
2011 lines
62 KiB
Plaintext
snippet bootstrapcdn Bootstrap
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
|
|
|
<!-- Optional theme -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
|
|
|
<!-- Latest compiled and minified JavaScript -->
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
|
|
|
|
|
snippet basictemplate Bootstrap
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Bootstrap 101 Template</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<h1>Hello, world!</h1>
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
snippet html5 Bootstrap
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
${1:...}
|
|
</html>
|
|
|
|
|
|
snippet viewport Bootstrap
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
snippet viewportnozoom Bootstrap
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
|
|
|
snippet container Bootstrap
|
|
<div class="container">
|
|
${1:...}
|
|
</div>
|
|
|
|
snippet containerfluid Bootstrap
|
|
<div class="container-fluid">
|
|
${1:...}
|
|
</div>
|
|
|
|
|
|
snippet row Bootstrap
|
|
<div class="row">
|
|
${1:...}
|
|
</div>
|
|
|
|
snippet colxs Bootstrap
|
|
<div class="col-xs-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colsm Bootstrap
|
|
<div class="col-sm-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colmd Bootstrap
|
|
<div class="col-md-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet collg Bootstrap
|
|
<div class="col-lg-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colxsoffset Bootstrap
|
|
<div class="col-xs-offset-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colsmoffset Bootstrap
|
|
<div class="col-sm-offset-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colmdoffset Bootstrap
|
|
<div class="col-md-offset-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet collgoffset Bootstrap
|
|
<div class="col-lg-offset-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colxspush Bootstrap
|
|
<div class="col-xs-push-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colsmpush Bootstrap
|
|
<div class="col-sm-push-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colmdpush Bootstrap
|
|
<div class="col-md-push-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet collgpush Bootstrap
|
|
<div class="col-lg-push-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colxspull Bootstrap
|
|
<div class="col-xs-pull-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colsmpull Bootstrap
|
|
<div class="col-sm-pull-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet colmdpull Bootstrap
|
|
<div class="col-md-pull-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet collgpull Bootstrap
|
|
<div class="col-lg-pull-${1:1}">
|
|
${2:...}
|
|
</div>
|
|
|
|
|
|
snippet h1 Bootstrap
|
|
<h1>${1:Bootstrap heading}</h1>
|
|
|
|
snippet h2 Bootstrap
|
|
<h2>${1:Bootstrap heading}</h2>
|
|
|
|
snippet h3 Bootstrap
|
|
<h3>${1:Bootstrap heading}</h3>
|
|
|
|
snippet h4 Bootstrap
|
|
<h4>${1:Bootstrap heading}</h4>
|
|
|
|
snippet h5 Bootstrap
|
|
<h5>${1:Bootstrap heading}</h5>
|
|
|
|
snippet h6 Bootstrap
|
|
<h6>${1:Bootstrap heading}</h6>
|
|
|
|
|
|
snippet h1small Bootstrap
|
|
<h1>${1:Bootstrap heading} <small>${2:Secondary text}</small></h1>
|
|
|
|
snippet h2small Bootstrap
|
|
<h2>${1:Bootstrap heading} <small>${2:Secondary text}</small></h2>
|
|
|
|
snippet h3small Bootstrap
|
|
<h3>${1:Bootstrap heading} <small>${2:Secondary text}</small></h3>
|
|
|
|
snippet h4small Bootstrap
|
|
<h4>${1:Bootstrap heading} <small>${2:Secondary text}</small></h4>
|
|
|
|
snippet h5small Bootstrap
|
|
<h5>${1:Bootstrap heading} <small>${2:Secondary text}</small></h5>
|
|
|
|
snippet h6small Bootstrap
|
|
<h6>${1:Bootstrap heading} <small>${2:Secondary text}</small></h6>
|
|
|
|
snippet p Bootstrap
|
|
<p>${1:...}</p>
|
|
|
|
snippet lead Bootstrap
|
|
<p class="lead">${1:...}</p>
|
|
|
|
snippet mark Bootstrap
|
|
<mark>${1:hightlight}</mark>
|
|
|
|
snippet del Bootstrap
|
|
<del>${1:This line of text is meant to be treated as deleted text.}</del>
|
|
|
|
snippet s Bootstrap
|
|
<s>${1:This line of text is meant to be treated as no longer accurate.}</s>
|
|
|
|
snippet ins Bootstrap
|
|
<ins>${1:This line of text is meant to be treated as an addition to the document.}</ins>
|
|
|
|
snippet u Bootstrap
|
|
<u>${1:This line of text will render as underlined}</u>
|
|
|
|
snippet small Bootstrap
|
|
<small>${1:This line of text is meant to be treated as fine print.}</small>
|
|
|
|
snippet strong Bootstrap
|
|
<strong>${1:bold text}</strong>
|
|
|
|
snippet em Bootstrap
|
|
<em>${1:italicized text}</em>
|
|
|
|
snippet textleft Bootstrap
|
|
<p class="text-left">${1:Left aligned text.}</p>
|
|
|
|
snippet textcenter Bootstrap
|
|
<p class="text-center">${1:Center aligned text.}</p>
|
|
|
|
snippet textright Bootstrap
|
|
<p class="text-right">${1:Right aligned text.}</p>
|
|
|
|
snippet textjustify Bootstrap
|
|
<p class="text-justify">${1:Justified text.}</p>
|
|
|
|
snippet textnowrap Bootstrap
|
|
<p class="text-nowrap">${1:No wrap text.}</p>
|
|
|
|
|
|
snippet textlowercase Bootstrap
|
|
<p class="text-lowercase">${1:Lowercased text.}</p>
|
|
|
|
snippet textuppercase Bootstrap
|
|
<p class="text-uppercase">${1:Uppercased text.}</p>
|
|
|
|
snippet textcapitalize Bootstrap
|
|
<p class="text-capitalize">${1:Capitalized text.}</p>
|
|
|
|
snippet abbr Bootstrap
|
|
<abbr title="${1:attribute}">${2:attr}</abbr>
|
|
|
|
|
|
snippet initialism Bootstrap
|
|
<abbr title="${1:HyperText Markup Language}" class="initialism">${2:HTML}</abbr>
|
|
|
|
snippet address Bootstrap
|
|
<address>
|
|
<strong>${1:Twitter, Inc.}</strong><br>
|
|
${2:795 Folsom Ave, Suite 600}<br>
|
|
${3:San Francisco, CA 94107}<br>
|
|
<abbr title="Phone">P:</abbr> ${4:(123) 456-7890}
|
|
</address>
|
|
|
|
<address>
|
|
<strong>${5:Full Name}</strong><br>
|
|
<a href="mailto:#">${6:first.last@example.com}</a>
|
|
</address>
|
|
|
|
snippet blockquote Bootstrap
|
|
<blockquote>
|
|
<p>${1:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.}</p>
|
|
</blockquote>
|
|
|
|
snippet blockquotesource Bootstrap
|
|
<blockquote>
|
|
<p>${1:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.}</p>
|
|
<footer>${2:Someone famous in} <cite title="${3:Source Title}">$3</cite></footer>
|
|
</blockquote>
|
|
|
|
snippet blockquotereverse Bootstrap
|
|
<blockquote class="blockquote-reverse">
|
|
${1:...}
|
|
</blockquote>
|
|
|
|
snippet ul Bootstrap
|
|
<ul>
|
|
<li>${1:...}</li>
|
|
</ul>
|
|
|
|
snippet ol Bootstrap
|
|
<ol>
|
|
<li>${1:...}</li>
|
|
</ol>
|
|
|
|
snippet listunstyled Bootstrap
|
|
<ul class="list-unstyled">
|
|
<li>${1:...}</li>
|
|
</ul>
|
|
|
|
snippet listinline Bootstrap
|
|
<ul class="list-inline">
|
|
<li>${1:...}</li>
|
|
</ul>
|
|
|
|
snippet dl Bootstrap
|
|
<dl>
|
|
<dt>${1:...}</dt>
|
|
<dd>${2:...}</dd>
|
|
</dl>
|
|
|
|
snippet dlhorizontal Bootstrap
|
|
<dl class="dl-horizontal">
|
|
<dt>${1:...}</dt>
|
|
<dd>${2:...}</dd>
|
|
</dl>
|
|
|
|
|
|
|
|
snippet code Bootstrap
|
|
<code>${1:<section>}</code>
|
|
|
|
snippet kbd Bootstrap
|
|
<kbd>${1:cd}</kbd>
|
|
|
|
snippet pre Bootstrap
|
|
<pre>${1:<p>Sample text here...</p>}</pre>
|
|
|
|
snippet var Bootstrap
|
|
<var>${1:x}</var>
|
|
|
|
|
|
snippet samp Bootstrap
|
|
<samp>${1:This text is meant to be treated as sample output from a computer program.}</samp>
|
|
|
|
|
|
|
|
snippet table Bootstrap
|
|
<table class="table">
|
|
${1:...}
|
|
</table>
|
|
|
|
snippet tablestriped Bootstrap
|
|
<table class="table table-striped">
|
|
${1:...}
|
|
</table>
|
|
|
|
snippet tablebordered Bootstrap
|
|
<table class="table table-bordered">
|
|
${1:...}
|
|
</table>
|
|
|
|
snippet tablehover Bootstrap
|
|
<table class="table table-hover">
|
|
${1:...}
|
|
</table>
|
|
|
|
snippet tablecondensed Bootstrap
|
|
<table class="table table-condensed">
|
|
${1:...}
|
|
</table>
|
|
|
|
|
|
snippet tractive Bootstrap
|
|
<tr class="active">${1:...}</tr>
|
|
|
|
snippet trsuccess Bootstrap
|
|
<tr class="success">${1:...}</tr>
|
|
|
|
snippet trwarning Bootstrap
|
|
<tr class="warning">${1:...}</tr>
|
|
|
|
snippet trdanger Bootstrap
|
|
<tr class="danger">${1:...}</tr>
|
|
|
|
snippet trinfo Bootstrap
|
|
<tr class="info">${1:...}</tr>
|
|
|
|
|
|
snippet tdactive Bootstrap
|
|
<td class="active">${1:...}</td>
|
|
|
|
snippet tdsuccess Bootstrap
|
|
<td class="success">${1:...}</td>
|
|
|
|
snippet tdwarning Bootstrap
|
|
<td class="warning">${1:...}</td>
|
|
|
|
snippet tddanger Bootstrap
|
|
<td class="danger">${1:...}</td>
|
|
|
|
snippet tdinfo Bootstrap
|
|
<td class="info">${1:...}</td>
|
|
|
|
|
|
snippet thactive Bootstrap
|
|
<th class="active">${1:...}</th>
|
|
|
|
snippet thsuccess Bootstrap
|
|
<th class="success">${1:...}</th>
|
|
|
|
snippet thwarning Bootstrap
|
|
<th class="warning">${1:...}</th>
|
|
|
|
snippet thdanger Bootstrap
|
|
<th class="danger">${1:...}</th>
|
|
|
|
snippet thinfo Bootstrap
|
|
<th class="info">${1:...}</th>
|
|
|
|
snippet tableresponsive Bootstrap
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
${1:...}
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
snippet form Bootstrap
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="exampleInputEmail1">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputPassword1">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="exampleInputFile">File input</label>
|
|
<input type="file" id="exampleInputFile">
|
|
<p class="help-block">Example block-level help text here.</p>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Check me out
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-default">Submit</button>
|
|
</form>
|
|
|
|
snippet forminline Bootstrap
|
|
<form class="form-inline">
|
|
<div class="form-group">
|
|
<label class="sr-only" for="exampleInputEmail3">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="exampleInputPassword3">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
|
|
</div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Remember me
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-default">Sign in</button>
|
|
</form>
|
|
|
|
snippet formhorizontal Bootstrap
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
|
|
<div class="col-sm-10">
|
|
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
|
|
<div class="col-sm-10">
|
|
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-2 col-sm-10">
|
|
<button type="submit" class="btn btn-default">Sign in</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
snippet input Bootstrap
|
|
<input type="text" class="form-control" placeholder="${1:Text input}">
|
|
|
|
snippet textarea Bootstrap
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
|
|
snippet checkbox Bootstrap
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" value="${1:}">
|
|
${2:Option one is this and that—be sure to include why it's great}
|
|
</label>
|
|
</div>
|
|
|
|
snippet radio Bootstrap
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="${1:optionsRadios}" id="${2:optionsRadios1}" value="${3:option1}" checked>
|
|
${4:Option one is this and that—be sure to include why it's great}
|
|
</label>
|
|
</div>
|
|
<div class="radio">
|
|
<label>
|
|
<input type="radio" name="${5:optionsRadios}" id="${6:optionsRadios2}" value="${7:option2}">
|
|
${8:Option two can be something else and selecting it will deselect option one}
|
|
</label>
|
|
</div>
|
|
|
|
snippet checkboxinline Bootstrap
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" id="${1:inlineCheckbox1}" value="${2:option1}"> ${3:1}
|
|
</label>
|
|
|
|
snippet radioinline Bootstrap
|
|
<label class="radio-inline">
|
|
<input type="radio" name="${1:inlineRadioOptions}" id="${2:inlineRadio1}" value="${3:option1}"> ${4:1}
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="${5:inlineRadioOptions}" id="${6:inlineRadio2}" value="${7:option2}"> ${8:2}
|
|
</label>
|
|
|
|
snippet select Bootstrap
|
|
<select class="form-control">
|
|
<option>${1:1}</option>
|
|
<option>${2:2}</option>
|
|
</select>
|
|
|
|
snippet selectmultiple Bootstrap
|
|
<select multiple class="form-control">
|
|
<option>${1:1}</option>
|
|
<option>${2:2}</option>
|
|
</select>
|
|
|
|
snippet formcontrolstatic Bootstrap
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label">${1:Email}</label>
|
|
<div class="col-sm-10">
|
|
<p class="form-control-static">${2:email@example.com}</p>
|
|
</div>
|
|
</div>
|
|
|
|
snippet inputdisabled Bootstrap
|
|
<input class="form-control" id="${1:disabledInput}" type="text" placeholder="${2:Disabled input here...}" disabled>
|
|
|
|
snippet fieldsetdisabled Bootstrap
|
|
<fieldset disabled>
|
|
<div class="form-group">
|
|
<label for="disabledTextInput">Disabled input</label>
|
|
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="disabledSelect">Disabled select menu</label>
|
|
<select id="disabledSelect" class="form-control">
|
|
<option>Disabled select</option>
|
|
</select>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox"> Can't check this
|
|
</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</fieldset>
|
|
|
|
snippet inputreadonly Bootstrap
|
|
<input class="form-control" type="text" placeholder="${1:Readonly input here...}" readonly>
|
|
|
|
snippet formgrouphassuccess Bootstrap
|
|
<div class="form-group has-success">
|
|
<label class="control-label" for="$2">${1:Input with success}</label>
|
|
<input type="text" class="form-control" id="${2:inputSuccess1}">
|
|
</div>
|
|
|
|
snippet formgrouphaswarning Bootstrap
|
|
<div class="form-group has-warning">
|
|
<label class="control-label" for="$2">${1:Input with warning}</label>
|
|
<input type="text" class="form-control" id="${2:inputWarning1}">
|
|
</div>
|
|
|
|
snippet formgrouphaserror Bootstrap
|
|
<div class="form-group has-error">
|
|
<label class="control-label" for="$2">${1:Input with error}</label>
|
|
<input type="text" class="form-control" id="${2:inputError1}">
|
|
</div>
|
|
|
|
snippet checkboxhassuccess Bootstrap
|
|
<div class="has-success">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="${1:checkboxSuccess}" value="${2:option1}">
|
|
${3:Checkbox with success}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
snippet checkboxhaswarning Bootstrap
|
|
<div class="has-warning">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="${1:checkboxWarning}" value="${2:option1}">
|
|
${3:Checkbox with warning}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
snippet checkboxhaserror Bootstrap
|
|
<div class="has-error">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" id="${1:checkboxError}" value="${2:option1}">
|
|
${3:Checkbox with error}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
snippet formgrouphasfeedback Bootstrap
|
|
<div class="form-group has-success has-feedback">
|
|
<label class="control-label" for="$3">${1:Input group with success}</label>
|
|
<div class="input-group">
|
|
<span class="input-group-addon">${2:@}</span>
|
|
<input type="text" class="form-control" id="${3:inputGroupSuccess1}" aria-describedby="$3Status">
|
|
</div>
|
|
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
|
|
<span id="$3Status" class="sr-only">(success)</span>
|
|
</div>
|
|
|
|
snippet inputlg Bootstrap
|
|
<input class="form-control input-lg" type="text" placeholder="${1:.input-lg}">
|
|
|
|
snippet inputsm Bootstrap
|
|
<input class="form-control input-sm" type="text" placeholder="${1:.input-sm}">
|
|
|
|
snippet selectlg Bootstrap
|
|
<select class="form-control input-lg">${1:...}</select>
|
|
|
|
snippet selectsm Bootstrap
|
|
<select class="form-control input-sm">${1:...}</select>
|
|
|
|
snippet formgrouplg Bootstrap
|
|
<div class="form-group form-group-lg">
|
|
<label class="col-sm-2 control-label" for="$2">${1:Large label}</label>
|
|
<div class="col-sm-10">
|
|
<input class="form-control" type="text" id="${2:formGroupInputLarge}" placeholder="${3:Large input}">
|
|
</div>
|
|
</div>
|
|
|
|
snippet formgroupsm Bootstrap
|
|
<div class="form-group form-group-sm">
|
|
<label class="col-sm-2 control-label" for="$2">${1:Small label}</label>
|
|
<div class="col-sm-10">
|
|
<input class="form-control" type="text" id="${2:formGroupInputSmall}" placeholder="${3:Small input}">
|
|
</div>
|
|
</div>
|
|
|
|
snippet inputhelpblock Bootstrap
|
|
<label class="sr-only" for="$2">${1:Input with help text}</label>
|
|
<input type="text" id="${2:inputHelpBlock}" class="form-control" aria-describedby="$3">
|
|
<span id="${3:helpBlock}" class="help-block">${4:A block of help text that breaks onto a new line and may extend beyond one line.}</span>
|
|
|
|
|
|
|
|
|
|
snippet btn Bootstrap
|
|
<button class="btn btn-default" type="submit">${1:Button}</button>
|
|
|
|
snippet abtn Bootstrap
|
|
<a class="btn btn-default" href="${1:#}" role="button">${2:Link}</a>
|
|
|
|
snippet inputbtn Bootstrap
|
|
<input class="btn btn-default" type="button" value="${1:Input}">
|
|
|
|
snippet submitbtn Bootstrap
|
|
<input class="btn btn-default" type="submit" value="${1:Submit}">
|
|
|
|
|
|
snippet btndefault Bootstrap
|
|
<button type="button" class="btn btn-default">${1:Default}</button>
|
|
|
|
snippet abtndefault Bootstrap
|
|
<a href="${1:#}" class="btn btn-default" role="button">${2:Default}</a>
|
|
|
|
snippet btnprimary Bootstrap
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
|
|
snippet abtnprimary Bootstrap
|
|
<a href="${1:#}" class="btn btn-primary" role="button">${2:Primary}</a>
|
|
|
|
snippet btnsuccess Bootstrap
|
|
<button type="button" class="btn btn-success">${1:Success}</button>
|
|
|
|
snippet abtnsuccess Description
|
|
<a href="${1:#}" class="btn btn-success" role="button">${2:Success}</a>
|
|
|
|
snippet btninfo Bootstrap
|
|
<button type="button" class="btn btn-info">${1:Info}</button>
|
|
|
|
snippet abtninfo Bootstrap
|
|
<a href="${1:#}" class="btn btn-info" role="button">${2:Info}</a>
|
|
|
|
snippet btnwarning Bootstrap
|
|
<button type="button" class="btn btn-warning">${1:Warning}</button>
|
|
|
|
snippet abtnwarning Bootstrap
|
|
<a href="${1:#}" class="btn btn-warning" role="button">${2:Warning}</a>
|
|
|
|
snippet btndanger Bootstrap
|
|
<button type="button" class="btn btn-danger">${1:Danger}</button>
|
|
|
|
snippet abtndanger Bootstrap
|
|
<a href="${1:#}" class="btn btn-danger" role="button">${2:Danger}</a>
|
|
|
|
snippet btnlink Bootstrap
|
|
<button type="button" class="btn btn-link">${1:Link}</button>
|
|
|
|
snippet abtnlink Bootstrap
|
|
<a href="${1:#}" class="btn btn-link" role="button">${2:Link}</a>
|
|
|
|
|
|
snippet btnlg Bootstrap
|
|
<button type="button" class="btn btn-default btn-lg">${1:Large button}</button>
|
|
|
|
snippet abtnlg Bootstrap
|
|
<a href="${1:#}" class="btn btn-default btn-lg" role="button">${2:Large button}</a>
|
|
|
|
snippet btnsm Bootstrap
|
|
<button type="button" class="btn btn-default btn-sm">${1:Small button}</button>
|
|
|
|
snippet abtnsm Bootstrap
|
|
<a href="${1:#}" class="btn btn-default btn-sm" role="button">${2:Small button}</a>
|
|
|
|
snippet btnxs Bootstrap
|
|
<button type="button" class="btn btn-default btn-xs">${1:Extra small button}</button>
|
|
|
|
snippet abtnxs Bootstrap
|
|
<a href="${1:#}" class="btn btn-default btn-xs" role="button">${2:Extra small button}</a>
|
|
|
|
snippet btnblock Bootstrap
|
|
<button type="button" class="btn btn-default btn-block">${1:Block level button}</button>
|
|
|
|
snippet abtnblock Bootstrap
|
|
<a href="${1:#}" class="btn btn-default btn-block" role="button">${2:Block level button}</a>
|
|
|
|
snippet btnactive Bootstrap
|
|
<button type="button" class="btn btn-default active">${1:Button}</button>
|
|
|
|
snippet abtnactive Bootstrap
|
|
<a href="${1:#}" class="btn btn-default active" role="button">${2:Link}</a>
|
|
|
|
snippet btndisabled Bootstrap
|
|
<button type="button" class="btn btn-default" disabled="disabled">${1:Button}</button>
|
|
|
|
snippet abtndisabled Bootstrap
|
|
<a href="${1:#}" class="btn btn-default disabled" role="button">${2:Link}</a>
|
|
|
|
|
|
|
|
snippet imgresponsive Bootstrap
|
|
<img src="${1:...}" class="img-responsive" alt="${2:Responsive image}">
|
|
|
|
snippet imgrounded Bootstrap
|
|
<img src="${1:...}" alt="${2:...}" class="img-rounded">
|
|
|
|
snippet imgcircle Bootstrap
|
|
<img src="${1:...}" alt="${2:...}" class="img-circle">
|
|
|
|
snippet imgthumbnail Bootstrap
|
|
<img src="${1:...}" alt="${2:...}" class="img-thumbnail">
|
|
|
|
|
|
|
|
snippet textmuted Bootstrap
|
|
<p class="text-muted">${1:...}</p>
|
|
|
|
snippet textprimary Bootstrap
|
|
<p class="text-primary">${1:...}</p>
|
|
|
|
snippet textsuccess Bootstrap
|
|
<p class="text-success">${1:...}</p>
|
|
|
|
snippet textinfo Bootstrap
|
|
<p class="text-info">${1:...}</p>
|
|
|
|
snippet textwarning Bootstrap
|
|
<p class="text-warning">${1:...}</p>
|
|
|
|
snippet textdanger Bootstrap
|
|
<p class="text-danger">${1:...}</p>
|
|
|
|
|
|
snippet bgprimary Bootstrap
|
|
<p class="bg-primary">${1:...}</p>
|
|
|
|
snippet bgsuccess Bootstrap
|
|
<p class="bg-success">${1:...}</p>
|
|
|
|
snippet bginfo Bootstrap
|
|
<p class="bg-info">${1:...}</p>
|
|
|
|
snippet bgwarning Bootstrap
|
|
<p class="bg-warning">${1:...}</p>
|
|
|
|
snippet bgdanger Bootstrap
|
|
<p class="bg-danger">${1:...}</p>
|
|
|
|
snippet close Bootstrap
|
|
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
|
|
snippet caret Bootstrap
|
|
<span class="caret"></span>
|
|
|
|
|
|
snippet pullleft Bootstrap
|
|
<div class="pull-left">${1:...}</div>
|
|
|
|
snippet pullright Bootstrap
|
|
<div class="pull-right">${1:...}</div>
|
|
|
|
snippet centerblock Bootstrap
|
|
<div class="center-block">${1:...}</div>
|
|
|
|
snippet clearfix Bootstrap
|
|
<div class="clearfix">${1:...}</div>
|
|
|
|
|
|
snippet show Bootstrap
|
|
<div class="show">${1:...}</div>
|
|
|
|
snippet hidden Bootstrap
|
|
<div class="hidden">${1:...}</div>
|
|
|
|
snippet invisible Bootstrap
|
|
<div class="invisible">${1:...}</div>
|
|
|
|
snippet sronlyfocusable Bootstrap
|
|
<a class="sr-only sr-only-focusable" href="${1:#content}">${2:Skip to main content}</a>
|
|
|
|
snippet texthide Bootstrap
|
|
<h1 class="text-hide">${1:Custom heading}</h1>
|
|
|
|
|
|
snippet hiddenxs Bootstrap
|
|
<div class="hidden-xs">${1:...}</div>
|
|
|
|
snippet hiddensm Bootstrap
|
|
<div class="hidden-sm">${1:...}</div>
|
|
|
|
snippet hiddenmd Bootstrap
|
|
<div class="hidden-md">${1:...}</div>
|
|
|
|
snippet hiddenlg Bootstrap
|
|
<div class="hidden-lg">${1:...}</div>
|
|
|
|
snippet visiblexsblock Bootstrap
|
|
<div class="visible-xs-block">${1:...}</div>
|
|
|
|
snippet visiblexsinline Bootstrap
|
|
<div class="visible-xs-inline">${1:...}</div>
|
|
|
|
snippet visiblexsinlineblock Bootstrap
|
|
<div class="visible-xs-inline-block">${1:...}</div>
|
|
|
|
snippet visiblesmblock Bootstrap
|
|
<div class="visible-sm-block">${1:...}</div>
|
|
|
|
snippet visiblesminline Bootstrap
|
|
<div class="visible-sm-inline">${1:...}</div>
|
|
|
|
snippet visiblesminlineblock Bootstrap
|
|
<div class="visible-sm-inline-block">${1:...}</div>
|
|
|
|
snippet visiblemdblock Bootstrap
|
|
<div class="visible-md-block">${1:...}</div>
|
|
|
|
snippet visiblemdinline Bootstrap
|
|
<div class="visible-md-inline">${1:...}</div>
|
|
|
|
snippet visiblemdinlineblock Bootstrap
|
|
<div class="visible-md-inline-block">${1:...}</div>
|
|
|
|
snippet visiblelgblock Bootstrap
|
|
<div class="visible-lg-block">${1:...}</div>
|
|
|
|
snippet visiblelginline Bootstrap
|
|
<div class="visible-lg-inline">${1:...}</div>
|
|
|
|
snippet visiblelginlineblock Bootstrap
|
|
<div class="visible-lg-inline-block">${1:...}</div>
|
|
|
|
snippet visibleprintblock Bootstrap
|
|
<div class="visible-print-block">${1:...}</div>
|
|
|
|
snippet visibleprintinline Bootstrap
|
|
<div class="visible-print-inline">${1:...}</div>
|
|
|
|
snippet visibleprintinlineblock Bootstrap
|
|
<div class="visible-print-inline-block">${1:...}</div>
|
|
|
|
snippet hiddenprint Bootstrap
|
|
<div class="hidden-print">${1:...}</div>
|
|
|
|
|
|
|
|
|
|
snippet glyphicon Bootstrap
|
|
<span class="glyphicon glyphicon-${1:heart}" aria-hidden="true"></span>
|
|
|
|
|
|
snippet dropdown Bootstrap
|
|
<div class="dropdown">
|
|
<button class="btn btn-default dropdown-toggle" type="button" id="${1:dropdownMenu1}" data-toggle="dropdown" aria-expanded="true">
|
|
${2:Dropdown}
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="$1">
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="${3:#}">${4:Action}</a></li>
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="${5:#}">${6:Another action}</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
snippet dropdownmenuright Bootstrap
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="${1:dLabel}">
|
|
${2:...}
|
|
</ul>
|
|
|
|
snippet dropdownheader Bootstrap
|
|
<li role="presentation" class="dropdown-header">${1:...}</li>
|
|
|
|
snippet divider Bootstrap
|
|
<li role="presentation" class="divider"></li>
|
|
|
|
snippet lidisabled Bootstrap
|
|
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="${1:#}">${2:...}</a></li>
|
|
|
|
|
|
snippet btngroup Bootstrap
|
|
<div class="btn-group" role="group" aria-label="${1:...}">
|
|
<button type="button" class="btn btn-default">${2:Left}</button>
|
|
<button type="button" class="btn btn-default">${3:Middle}</button>
|
|
<button type="button" class="btn btn-default">${4:Right}</button>
|
|
</div>
|
|
|
|
snippet abtngroup Bootstrap
|
|
<div class="btn-group" role="group" aria-label="${1:...}">
|
|
<a class="btn btn-default" href="${2:#}" role="button">${3:Left}</a>
|
|
<a class="btn btn-default" href="${4:#}" role="button">${5:Middle}</a>
|
|
<a class="btn btn-default" href="${6:#}" role="button">${7:Right}</a>
|
|
</div>
|
|
|
|
snippet btntoolbar Bootstrap
|
|
<div class="btn-toolbar" role="toolbar" aria-label="${1:...}">
|
|
<div class="btn-group" role="group" aria-label="${2:...}">${3:...}</div>
|
|
<div class="btn-group" role="group" aria-label="${4:...}">${5:...}</div>
|
|
<div class="btn-group" role="group" aria-label="${6:...}">${7:...}</div>
|
|
</div>
|
|
|
|
snippet btngrouplg Bootstrap
|
|
<div class="btn-group btn-group-lg" role="group" aria-label="${1:...}">${2:...}</div>
|
|
|
|
snippet btngroupsm Bootstrap
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="${1:...}">${2:...}</div>
|
|
|
|
snippet btngroupxs Bootstrap
|
|
<div class="btn-group btn-group-xs" role="group" aria-label="${1:...}">${2:...}</div>
|
|
|
|
snippet btngroupvertical Bootstrap
|
|
<div class="btn-group-vertical" role="group" aria-label="${1:...}">
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet btngroupjustified Bootstrap
|
|
<div class="btn-group btn-group-justified" role="group" aria-label="${1:...}">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-default">${2:Left}</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-default">${3:Middle}</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-default">${4:Right}</button>
|
|
</div>
|
|
</div>
|
|
|
|
snippet abtngroupjustified Bootstrap
|
|
<div class="btn-group btn-group-justified" role="group" aria-label="${1:...}">
|
|
<a class="btn btn-default" href="#" role="button">${2:Left}</a>
|
|
<a class="btn btn-default" href="#" role="button">${3:Middle}</a>
|
|
<a class="btn btn-default" href="#" role="button">${4:Right}</a>
|
|
</div>
|
|
|
|
|
|
snippet btndropdown Bootstrap
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
|
${1:Action} <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="${1:#}">${2:Action}</a></li>
|
|
<li><a href="${3:#}">${4:Another action}</a></li>
|
|
<li><a href="${5:#}">${6:Something else here}</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="${7:#}">${8:Separated link}</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
snippet btndropdownsplit Bootstrap
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-danger">${1:Action}</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="${1:#}">${2:Action}</a></li>
|
|
<li><a href="${3:#}">${4:Another} action</a></li>
|
|
<li><a href="${5:#}">${6:Something} else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="${7:#}">${8:Separated} link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
snippet btndropup Bootstrap
|
|
<div class="btn-group dropup">
|
|
<button type="button" class="btn btn-default">${1:Dropup}</button>
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
${2:<!-- Dropdown menu links -->}
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
snippet inputgroup Bootstrap
|
|
<div class="input-group">
|
|
<span class="input-group-addon">${1:$}</span>
|
|
<input type="text" class="form-control" aria-label="${2:Amount (to the nearest dollar)}">
|
|
<span class="input-group-addon">${3:.00}</span>
|
|
</div>
|
|
|
|
snippet inputgrouplg Bootstrap
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-addon" id="${1:sizing-addon1}">${2:@}</span>
|
|
<input type="text" class="form-control" placeholder="${3:Username}" aria-describedby="$1">
|
|
</div>
|
|
|
|
snippet inputgroupsm Bootstrap
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon" id="${1:sizing-addon3}">${2:@}</span>
|
|
<input type="text" class="form-control" placeholder="${3:Username}" aria-describedby="$1">
|
|
</div>
|
|
|
|
snippet inputgroupcheckbox Bootstrap
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<input type="checkbox" aria-label="${1:...}">
|
|
</span>
|
|
<input type="text" class="form-control" aria-label="${2:...}">
|
|
</div>
|
|
|
|
snippet inputgroupradio Bootstrap
|
|
<div class="input-group">
|
|
<span class="input-group-addon">
|
|
<input type="radio" aria-label="${1:...}">
|
|
</span>
|
|
<input type="text" class="form-control" aria-label="${2:...}">
|
|
</div>
|
|
|
|
snippet inputgroupbtn Bootstrap
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" placeholder="${1:Search for...}">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">${2:Go!}</button>
|
|
</span>
|
|
</div>
|
|
|
|
snippet inputgroupbtndropdown Bootstrap
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" aria-label="${1:...}">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">${2:Action} <span class="caret"></span></button>
|
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
|
<li><a href="${3:#}">${4:Action}</a></li>
|
|
<li><a href="${5:#}">${6:Another action}</a></li>
|
|
<li><a href="${6:#}">${8:Something else here}</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="${9:#}">${10:Separated link}</a></li>
|
|
</ul>
|
|
</div><!-- /btn-group -->
|
|
</div>
|
|
|
|
|
|
|
|
snippet navtabs Bootstrap
|
|
<ul class="nav nav-tabs">
|
|
<li role="presentation" class="active"><a href="${1:#}">${2:Home}</a></li>
|
|
<li role="presentation"><a href="${3:#}">${4:Profile}</a></li>
|
|
<li role="presentation"><a href="${5:#}">${6:Messages}</a></li>
|
|
</ul>
|
|
|
|
snippet navpills Bootstrap
|
|
<ul class="nav nav-pills">
|
|
<li role="presentation" class="active"><a href="${1:#}">${2:Home}</a></li>
|
|
<li role="presentation"><a href="${3:#}">${4:Profile}</a></li>
|
|
<li role="presentation"><a href="${5:#}">${6:Messages}</a></li>
|
|
</ul>
|
|
|
|
snippet navpillsstacked Bootstrap
|
|
<ul class="nav nav-pills nav-stacked">
|
|
${1:...}
|
|
</ul>
|
|
|
|
snippet navtabsjustified Bootstrap
|
|
<ul class="nav nav-tabs nav-justified">
|
|
${1:...}
|
|
</ul>
|
|
|
|
snippet navpillsjustified Bootstrap
|
|
<ul class="nav nav-pills nav-justified">
|
|
${1:...}
|
|
</ul>
|
|
|
|
snippet navtabsdropdown Bootstrap
|
|
<ul class="nav nav-tabs">
|
|
<li role="presentation" class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
|
|
${1:Dropdown} <span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
${2:...}
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
snippet navpillsdropdown Bootstrap
|
|
<ul class="nav nav-pills">
|
|
<li role="presentation" class="dropdown">
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
|
|
${1:Dropdown} <span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
${2:...}
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
snippet navbar Bootstrap
|
|
<nav class="navbar navbar-default">
|
|
<div class="container-fluid">
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Brand</a>
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-left" role="search">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</div>
|
|
<button type="submit" class="btn btn-default">Submit</button>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
|
|
snippet navbarform Bootstrap
|
|
<form class="navbar-form navbar-left" role="search">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="${1:Search}">
|
|
</div>
|
|
<button type="submit" class="btn btn-default">${2:Submit}</button>
|
|
</form>
|
|
|
|
snippet navbarbtn Bootstrap
|
|
<button type="button" class="btn btn-default navbar-btn">${1:Sign in}</button>
|
|
|
|
snippet navbartext Bootstrap
|
|
<p class="navbar-text">${1:Signed in as Mark Otto}</p>
|
|
|
|
snippet navbarlink Bootstrap
|
|
<a href="${1:#}" class="navbar-link">${2:Mark Otto}</a>
|
|
|
|
snippet navbarfixedtop Bootstrap
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
|
<div class="container">
|
|
${1:...}
|
|
</div>
|
|
</nav>
|
|
|
|
snippet navbarfixedbottom Bootstrap
|
|
<nav class="navbar navbar-default navbar-fixed-bottom">
|
|
<div class="container">
|
|
${1:...}
|
|
</div>
|
|
</nav>
|
|
|
|
snippet navbarstatictop Bootstrap
|
|
<nav class="navbar navbar-default navbar-static-top">
|
|
<div class="container">
|
|
${1:...}
|
|
</div>
|
|
</nav>
|
|
|
|
snippet navbarinverse Bootstrap
|
|
<nav class="navbar navbar-inverse">
|
|
${1:...}
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
snippet breadcrumb Bootstrap
|
|
<ol class="breadcrumb">
|
|
<li><a href="${1:#}">${2:Home}</a></li>
|
|
<li><a href="${3:#}">${4:Library}</a></li>
|
|
<li class="active">${5:Data}</li>
|
|
</ol>
|
|
|
|
|
|
|
|
snippet pagination Bootstrap
|
|
<nav>
|
|
<ul class="pagination">
|
|
<li class="disabled">
|
|
<a href="#" aria-label="Previous">
|
|
<span aria-hidden="true">«</span>
|
|
</a>
|
|
</li>
|
|
<li class="active"><a href="#">1</a></li>
|
|
<li><a href="#">2</a></li>
|
|
<li><a href="#">3</a></li>
|
|
<li><a href="#">4</a></li>
|
|
<li><a href="#">5</a></li>
|
|
<li>
|
|
<a href="#" aria-label="Next">
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
snippet paginationlg Bootstrap
|
|
<nav><ul class="pagination pagination-lg">${1:...}</ul></nav>
|
|
|
|
snippet paginationsm Bootstrap
|
|
<nav><ul class="pagination pagination-sm">${1:...}</ul></nav>
|
|
|
|
snippet pager Bootstrap
|
|
<nav>
|
|
<ul class="pager">
|
|
<li><a href="${1:#}">${2:Previous}</a></li>
|
|
<li><a href="${3:#}">${4:Next}</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
snippet pageraligned Bootstrap
|
|
<nav>
|
|
<ul class="pager">
|
|
<li class="previous"><a href="${1:#}"><span aria-hidden="true">←</span> ${2:Older}</a></li>
|
|
<li class="next"><a href="${3:#}">${4:Newer} <span aria-hidden="true">→</span></a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
|
|
snippet label Bootstrap
|
|
<span class="label label-default">${1:Default}</span>
|
|
|
|
snippet labeldefault Bootstrap
|
|
<span class="label label-default">${1:Default}</span>
|
|
|
|
snippet labelprimary Bootstrap
|
|
<span class="label label-primary">${1:Primary}</span>
|
|
|
|
snippet labelsuccess Bootstrap
|
|
<span class="label label-success">${1:Success}</span>
|
|
|
|
snippet labelinfo Bootstrap
|
|
<span class="label label-info">${1:Info}</span>
|
|
|
|
snippet labelwarning Bootstrap
|
|
<span class="label label-warning">${1:Warning}</span>
|
|
|
|
snippet labeldanger Bootstrap
|
|
<span class="label label-danger">${1:Danger}</span>
|
|
|
|
|
|
|
|
snippet badge Bootstrap
|
|
<a href="${1:#}">${2:Inbox} <span class="badge">${3:42}</span></a>
|
|
|
|
snippet badgebtn Bootstrap
|
|
<button class="btn btn-primary" type="button">
|
|
${1:Messages} <span class="badge">${2:4}</span>
|
|
</button>
|
|
|
|
snippet badgenav Bootstrap
|
|
<ul class="nav nav-pills" role="tablist">
|
|
<li role="presentation" class="active"><a href="${1:#}">${2:Home} <span class="badge">${3:42}</span></a></li>
|
|
<li role="presentation"><a href="${4:#}">${5:Profile}</a></li>
|
|
<li role="presentation"><a href="${6:#}">${7:Messages} <span class="badge">${8:3}</span></a></li>
|
|
</ul>
|
|
|
|
|
|
snippet jumbotron Bootstrap
|
|
<div class="jumbotron">
|
|
<h1>${1:Hello, world!}</h1>
|
|
<p>${2:...}</p>
|
|
<p><a class="btn btn-primary btn-lg" href="${3:#}" role="button">${4:Learn more}</a></p>
|
|
</div>
|
|
|
|
snippet jumbotroncontainer Bootstrap
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
${1:...}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
snippet pageheader Bootstrap
|
|
<div class="page-header">
|
|
<h1>${1:Example page header} <small>${2:Subtext for header}</small></h1>
|
|
</div>
|
|
|
|
|
|
|
|
snippet thumbnail Bootstrap
|
|
<a href="${1:#}" class="thumbnail">
|
|
<img src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
|
|
snippet thumbnailcontent Bootstrap
|
|
<div class="thumbnail">
|
|
<img src="${1:...}" alt="${2:...}">
|
|
<div class="caption">
|
|
<h3>${3:Thumbnail label}</h3>
|
|
<p>${4:...}</p>
|
|
<p><a href="${5:#}" class="btn btn-primary" role="button">${6:Button}</a> <a href="${7:#}" class="btn btn-default" role="button">${8:Button}</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
snippet alert Bootstrap
|
|
<div class="alert alert-success" role="alert">${1:...}</div>
|
|
|
|
snippet alertsuccess Bootstrap
|
|
<div class="alert alert-success" role="alert">${1:...}</div>
|
|
|
|
snippet alertinfo Bootstrap
|
|
<div class="alert alert-info" role="alert">${1:...}</div>
|
|
|
|
snippet alertwarning Bootstrap
|
|
<div class="alert alert-warning" role="alert">${1:...}</div>
|
|
|
|
snippet alertdanger Bootstrap
|
|
<div class="alert alert-danger" role="alert">${1:...}</div>
|
|
|
|
snippet alertdismissible Bootstrap
|
|
<div class="alert alert-${1:warning} alert-dismissible" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<strong>${2:Warning!}</strong> ${3:Better check yourself, you're not looking too good.}
|
|
</div>
|
|
|
|
snippet alertlink Bootstrap
|
|
<div class="alert alert-success" role="alert">
|
|
<a href="${1:#}" class="alert-link">${2:...}</a>
|
|
</div>
|
|
|
|
|
|
|
|
snippet progress Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="${1:60}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%;">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progresssuccess Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="${1:40}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progressinfo Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="${1:20}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progresswarning Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="${1:60}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progressdanger Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="${1:80}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progressstriped Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="${1:40}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progressstripedactive Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="${1:45}" aria-valuemin="${2:0}" aria-valuemax="${3:100}" style="width: $1%">
|
|
<span class="sr-only">$1% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
snippet progressstacked Bootstrap
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-success" style="width: ${1:35}%">
|
|
<span class="sr-only">$1% Complete (success)</span>
|
|
</div>
|
|
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: ${2:20}%">
|
|
<span class="sr-only">$2% Complete (warning)</span>
|
|
</div>
|
|
<div class="progress-bar progress-bar-danger" style="width: ${3:10}%">
|
|
<span class="sr-only">$3% Complete (danger)</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
snippet media Bootstrap
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<a href="${1:#}">
|
|
<img class="media-object" src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
</div>
|
|
<div class="media-body">
|
|
<h4 class="media-heading">${4:Media heading}</h4>
|
|
${5:...}
|
|
</div>
|
|
</div>
|
|
|
|
snippet medialeft Bootstrap
|
|
<div class="media-left">
|
|
<a href="${1:#}">
|
|
<img class="media-object" src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
</div>
|
|
|
|
snippet mediabody Bootstrap
|
|
<div class="media-body">
|
|
<h4 class="media-heading">${1:Media heading}</h4>
|
|
${2:...}
|
|
</div>
|
|
|
|
snippet mediaright Bootstrap
|
|
<div class="media-right">
|
|
<a href="${1:#}">
|
|
<img class="media-object" src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
</div>
|
|
|
|
snippet mediamiddle Bootstrap
|
|
<div class="media-left media-middle">
|
|
<a href="${1:#}">
|
|
<img class="media-object" src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
</div>
|
|
|
|
snippet mediabottom Bootstrap
|
|
<div class="media-left media-bottom">
|
|
<a href="${1:#}">
|
|
<img class="media-object" src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
</div>
|
|
|
|
snippet medialist Bootstrap
|
|
<ul class="media-list">
|
|
<li class="media">
|
|
<div class="media-left">
|
|
<a href="${1:#}">
|
|
<img class="media-object" src="${2:...}" alt="${3:...}">
|
|
</a>
|
|
</div>
|
|
<div class="media-body">
|
|
<h4 class="media-heading">${4:Media heading}</h4>
|
|
${5:...}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
snippet listgroup Bootstrap
|
|
<ul class="list-group">
|
|
<li class="list-group-item">${1:Cras justo odio}</li>
|
|
<li class="list-group-item">${2:Dapibus ac facilisis in}</li>
|
|
<li class="list-group-item">${3:Morbi leo risus}</li>
|
|
<li class="list-group-item">${4:Porta ac consectetur ac}</li>
|
|
<li class="list-group-item">${5:Vestibulum at eros}</li>
|
|
</ul>
|
|
|
|
snippet listgroupitem Bootstrap
|
|
<li class="list-group-item">${1:Cras justo odio}</li>
|
|
|
|
snippet listgroupitembadge Bootstrap
|
|
<li class="list-group-item">
|
|
<span class="badge">${1:14}</span>
|
|
${2:Cras justo odio}
|
|
</li>
|
|
|
|
snippet alistgroupitem Bootstrap
|
|
<a href="${1:#}" class="list-group-item active">${2:Cras justo odio}</a>
|
|
|
|
snippet listgroupitemdisabled Bootstrap
|
|
<a href="${1:#}" class="list-group-item disabled">${2:Cras justo odio}</a>
|
|
|
|
snippet listgroupitemsuccess Bootstrap
|
|
<li class="list-group-item list-group-item-success">${1:Dapibus ac facilisis in}</li>
|
|
|
|
snippet listgroupiteminfo Bootstrap
|
|
<li class="list-group-item list-group-item-info">${1:Cras sit amet nibh libero}</li>
|
|
|
|
snippet listgroupitemwarning Bootstrap
|
|
<li class="list-group-item list-group-item-warning">${1:Porta ac consectetur ac}</li>
|
|
|
|
snippet listgroupitemdanger Bootstrap
|
|
<li class="list-group-item list-group-item-danger">${1:Vestibulum at eros}</li>
|
|
|
|
snippet alistgroupitemsuccess Bootstrap
|
|
<a href="${1:#}" class="list-group-item list-group-item-success">${2:Dapibus ac facilisis in}</a>
|
|
|
|
snippet alistgroupiteminfo Bootstrap
|
|
<a href="${1:#}" class="list-group-item list-group-item-info">${2:Cras sit amet nibh libero}</a>
|
|
|
|
snippet alistgroupitemwarning Bootstrap
|
|
<a href="${1:#}" class="list-group-item list-group-item-warning">${2:Porta ac consectetur ac}</a>
|
|
|
|
snippet alistgroupitemdanger Bootstrap
|
|
<a href="${1:#}" class="list-group-item list-group-item-danger">${2:Vestibulum at eros}</a>
|
|
|
|
snippet listgroupitemcontent Bootstrap
|
|
<li class="list-group-item">
|
|
<h4 class="list-group-item-heading">${1:List group item heading}</h4>
|
|
<p class="list-group-item-text">${2:...}</p>
|
|
</li>
|
|
|
|
snippet alistgroupitemcontent Bootstrap
|
|
<a href="${1:#}" class="list-group-item active">
|
|
<h4 class="list-group-item-heading">${2:List group item heading}</h4>
|
|
<p class="list-group-item-text">${3:...}</p>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
snippet panel Bootstrap
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
${1:Basic panel example}
|
|
</div>
|
|
</div>
|
|
|
|
snippet panelheading Bootstrap
|
|
<div class="panel-heading">${1:Panel heading without title}</div>
|
|
|
|
snippet panelheadingtitle Bootstrap
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title">${1:Panel title}</h3>
|
|
</div>
|
|
|
|
snippet panelbody Bootstrap
|
|
<div class="panel-body">
|
|
${1:Panel content}
|
|
</div>
|
|
|
|
snippet panelfooter Bootstrap
|
|
<div class="panel-footer">${1:Panel footer}</div>
|
|
|
|
snippet paneldefault Bootstrap
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
${1:Basic panel example}
|
|
</div>
|
|
</div>
|
|
|
|
snippet panelprimary Bootstrap
|
|
<div class="panel panel-primary">${1:...}</div>
|
|
|
|
snippet panelsuccess Bootstrap
|
|
<div class="panel panel-success">${1:...}</div>
|
|
|
|
snippet panelinfo Bootstrap
|
|
<div class="panel panel-info">${1:...}</div>
|
|
|
|
snippet panelwarning Bootstrap
|
|
<div class="panel panel-warning">${1:...}</div>
|
|
|
|
snippet paneldanger Bootstrap
|
|
<div class="panel panel-danger">${1:...}</div>
|
|
|
|
snippet paneltable Bootstrap
|
|
<div class="panel panel-default">
|
|
<!-- Default panel contents -->
|
|
<div class="panel-heading">${1:Panel heading}</div>
|
|
<div class="panel-body">
|
|
<p>${2:...}</p>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<table class="table">
|
|
${3:...}
|
|
</table>
|
|
</div>
|
|
|
|
snippet panellistgroup Bootstrap
|
|
<div class="panel panel-default">
|
|
<!-- Default panel contents -->
|
|
<div class="panel-heading">${1:Panel heading}</div>
|
|
<div class="panel-body">
|
|
<p>${2:...}</p>
|
|
</div>
|
|
|
|
<!-- List group -->
|
|
<ul class="list-group">
|
|
<li class="list-group-item">${3:Cras justo odio}</li>
|
|
<li class="list-group-item">${4:Dapibus ac facilisis in}</li>
|
|
<li class="list-group-item">${5:Morbi leo risus}</li>
|
|
<li class="list-group-item">${6:Porta ac consectetur ac}</li>
|
|
<li class="list-group-item">${7:Vestibulum at eros}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
snippet embedresponsive Bootstrap
|
|
<!-- 16:9 aspect ratio -->
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe class="embed-responsive-item" src="${1:...}"></iframe>
|
|
</div>
|
|
|
|
<!-- 4:3 aspect ratio -->
|
|
<div class="embed-responsive embed-responsive-4by3">
|
|
<iframe class="embed-responsive-item" src="${2:...}"></iframe>
|
|
</div>
|
|
|
|
|
|
|
|
snippet well Bootstrap
|
|
<div class="well">${1:...}</div>
|
|
|
|
snippet welllg Bootstrap
|
|
<div class="well well-lg">${1:...}</div>
|
|
|
|
snippet wellsm Bootstrap
|
|
<div class="well well-sm">${1:...}</div>
|
|
|
|
|
|
|
|
|
|
snippet modal Bootstrap
|
|
<div class="modal fade">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title">${1:Modal title}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>${2:One fine body…}</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">${3:Close}</button>
|
|
<button type="button" class="btn btn-primary">${4:Save changes}</button>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
snippet modallg Bootstrap
|
|
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="${1:myLargeModalLabel}" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
${2:...}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
snippet modalsm Bootstrap
|
|
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="${1:mySmallModalLabel}" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
${2:...}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
snippet scrollspy Bootstrap
|
|
<body data-spy="scroll" data-target=".$1">
|
|
<div class="${1:navbar-example}">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
${2:...}
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
snippet tabpanel Bootstrap
|
|
<div role="tabpanel">
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="#${1:home}" aria-controls="$1" role="tab" data-toggle="tab">${2:Home}</a></li>
|
|
<li role="presentation"><a href="#${3:profile}" aria-controls="$3" role="tab" data-toggle="tab">${4:Profile}</a></li>
|
|
<li role="presentation"><a href="#${5:messages}" aria-controls="$5" role="tab" data-toggle="tab">${6:Messages}</a></li>
|
|
<li role="presentation"><a href="#${7:settings}" aria-controls="$7" role="tab" data-toggle="tab">${8:Settings}</a></li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="$1">${9:...}</div>
|
|
<div role="tabpanel" class="tab-pane" id="$3">${10:...}</div>
|
|
<div role="tabpanel" class="tab-pane" id="$5">${11:...}</div>
|
|
<div role="tabpanel" class="tab-pane" id="$7">${12:...}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
snippet tooltip Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="tooltip" title="$1">${1:Tooltip on left}</button>
|
|
|
|
snippet atooltip Bootstrap
|
|
<a href="${1:#}" class="btn btn-default" data-toggle="tooltip" title="$2">${2:Tooltip on left}</a>
|
|
|
|
snippet tooltiptop Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$1">${1:Tooltip on top}</button>
|
|
|
|
snippet atooltiptop Bootstrap
|
|
<a href="${1:#}" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="$2">${2:Tooltip on top}</a>
|
|
|
|
snippet tooltipleft Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="$1">${1:Tooltip on left}</button>
|
|
|
|
snippet atooltipleft Bootstrap
|
|
<a href="${1:#}" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="$2">${2:Tooltip on left}</a>
|
|
|
|
snippet tooltipbottom Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="$1">${1:Tooltip on bottom}</button>
|
|
|
|
snippet atooltipbottom Bootstrap
|
|
<a href="${1:#}" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="$2">${2:Tooltip on bottom}</a>
|
|
|
|
snippet tooltipright Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="$1">${1:Tooltip on right}</button>
|
|
|
|
snippet atooltipright Bootstrap
|
|
<a href="${1:#}" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="$2">${2:Tooltip on right}</a>
|
|
|
|
|
|
|
|
snippet popover Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="popover" title="${1:Popover title}" data-content="${2:And here's some amazing content. It's very engaging. Right?}">${3:Click to toggle popover}</button>
|
|
|
|
snippet apopover Bootstrap
|
|
<a class="btn btn-default" role="button" data-toggle="popover" title="${1:Dismissible popover}" data-content="${2:And here's some amazing content. It's very engaging. Right?}">${3:Dismissible popover}</a>
|
|
|
|
snippet popovertop Bootstrap
|
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="${1:Vivamus sagittis lacus vel augue laoreet rutrum faucibus.}">
|
|
${2:Popover on top}
|
|
</button>
|
|
|
|
snippet apopovertop Bootstrap
|
|
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="top" title="${1:Popover on top}" data-content="${2:And here's some amazing content. It's very engaging. Right?}">${3:Popover on top}</a>
|
|
|
|
snippet popoverleft Bootstrap
|
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="${1:Vivamus sagittis lacus vel augue laoreet rutrum faucibus.}">
|
|
${2:Popover on left}
|
|
</button>
|
|
|
|
snippet apopoverleft Bootstrap
|
|
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="left" title="${1:Popover on left}" data-content="${2:And here's some amazing content. It's very engaging. Right?}">${3:Popover on left}</a>
|
|
|
|
snippet popoverbottom Bootstrap
|
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="${1:Vivamus sagittis lacus vel augue laoreet rutrum faucibus.}">
|
|
${2:Popover on bottom}
|
|
</button>
|
|
|
|
snippet apopoverbottom Bootstrap
|
|
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="bottom" title="${1:Popover on bottom}" data-content="${2:And here's some amazing content. It's very engaging. Right?}">${3:Popover on bottom}</a>
|
|
|
|
snippet popoverright Bootstrap
|
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="${1:Vivamus sagittis lacus vel augue laoreet rutrum faucibus.}">
|
|
${2:Popover on right}
|
|
</button>
|
|
|
|
snippet apopoverright Bootstrap
|
|
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="right" title="${1:Popover on right}" data-content="${2:Vivamus sagittis lacus vel augue laoreet rutrum faucibus.}">${3:Popover on right}</a>
|
|
|
|
snippet apopoverdismissible Bootstrap
|
|
<a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="${1:Dismissible popover}" data-content="${2:And here's some amazing content. It's very engaging. Right?}">${3:Dismissible popover}</a>
|
|
|
|
|
|
|
|
snippet btnstatetext Bootstrap
|
|
<button type="button" id="${1:myButton}" data-${2:loading}-text="${3:Loading...}" class="btn btn-default" autocomplete="off">
|
|
${4:Loading state}
|
|
</button>
|
|
|
|
snippet btnsingletoggle Bootstrap
|
|
<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off">
|
|
${1:Single toggle}
|
|
</button>
|
|
|
|
snippet btngroupcheckbox Bootstrap
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="checkbox" autocomplete="off" checked> ${1:Checkbox 1 (pre-checked)}
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox" autocomplete="off"> ${2:Checkbox 2}
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="checkbox" autocomplete="off"> ${3:Checkbox 3}
|
|
</label>
|
|
</div>
|
|
|
|
snippet btngroupradio Bootstrap
|
|
<div class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-primary active">
|
|
<input type="radio" name="${1:options}" id="${2:option1}" autocomplete="off" checked> ${3:Radio 1 (preselected)}
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="$1" id="${4:option2}" autocomplete="off"> ${5:Radio 2}
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="$1" id="${6:option3}" autocomplete="off"> ${7:Radio 3}
|
|
</label>
|
|
</div>
|
|
|
|
|
|
|
|
snippet btncollapse Bootstrap
|
|
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#$2" aria-expanded="false" aria-controls="$2">
|
|
${1:Button with data-target}
|
|
</button>
|
|
<div class="collapse" id="${2:collapseExample}">
|
|
<div class="well">
|
|
${3:...}
|
|
</div>
|
|
</div>
|
|
|
|
snippet abtncollapse Bootstrap
|
|
<a class="btn btn-primary" data-toggle="collapse" href="#$2" aria-expanded="false" aria-controls="$2">
|
|
${1:Link with href}
|
|
</a>
|
|
<div class="collapse" id="${2:collapseExample}">
|
|
<div class="well">
|
|
${3:...}
|
|
</div>
|
|
</div>
|
|
|
|
snippet accordian Bootstrap
|
|
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingOne">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Collapsible Group Item #1
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
|
<div class="panel-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 class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingTwo">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Collapsible Group Item #2
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
|
<div class="panel-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 class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
Collapsible Group Item #3
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-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>
|
|
|
|
|
|
|
|
snippet carousel Bootstrap
|
|
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
|
<!-- Indicators -->
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
|
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
|
</ol>
|
|
|
|
<!-- Wrapper for slides -->
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="item active">
|
|
<img src="..." alt="...">
|
|
<div class="carousel-caption">
|
|
...
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="..." alt="...">
|
|
<div class="carousel-caption">
|
|
...
|
|
</div>
|
|
</div>
|
|
...
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
|
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
|
|
snippet affix Bootstrap
|
|
<div data-spy="affix" data-offset-top="${1:60}" data-offset-bottom="${2:200}">
|
|
${3:...}
|
|
</div>
|
|
|
|
|
|
|