为Atom写的Bootstrap 4代码片段，持续更新，后续将添加详细一些的说明。建议如果对coffee script不熟悉的，安装Linter-Coffeelint插件。我就不熟悉coffee script，一开始经常收到报错信息：“unexpected new line”，检查了无数遍，却不知道什么地方错了。后来才在Stackflow找到答案，Atom snippest unexpected new line error。原来Coffee Script 有严格的缩进要求, Linter-Coffeelint帮助一眼就找到错误的地方，节省大量时间
'.text.html.basic':
'bootstrap 4 template':
'prefix':'bt4-tmplt'
'body':
"""
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>$1</title>
</head>
<body>
$2
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
"""
'bt4.alert.dismissing':
'prefix':'bt4alertdismissingbutton'
'body':"""
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
"""
# alert primary
'bt4.alert.primary':
'prefix':'bt4-alert-primary'
'body':"""
<div class="alert alert-primary" role="alert">
$1
</div>
"""
# Alert secondary
'bt4.alert.secondary':
'prefix':'bt4-alert-secondary'
'body':"""
<div class="alert alert-secondary" role="alert">
$1
</div>
"""
# Alert success
'bt4.alert.success':
'prefix':'bt4-alert-success'
'body':"""
<div class="alert alert-success" role="alert">
$1
</div>
"""
# Alert danger
'bt4.alert.danger':
'prefix':'bt4-alert-danger'
'body':"""
<div class="alert alert-danger" role="alert">
$1
</div>
"""
#
# Alert warning
'bt4.alert.warning':
'prefix':'bt4-alert-warning'
'body':"""
<div class="alert alert-warning" role="alert">
$1
</div>
"""
# Alert info
'bt4.alert.info':
'prefix':'bt4-alert-info'
'body':"""
<div class="alert alert-info" role="alert">
$1
</div>
"""
# Alert light
'bt4.alert.light':
'prefix':'bt4-alert-light'
'body':"""
<div class="alert alert-light" role="alert">
$1
</div>
"""
# Alert dark
'bt4.alert.dark':
'prefix':'bt4-alert-dark'
'body':"""
<div class="alert alert-dark" role="alert">
$1
</div>
"""
#Alert link
'bt4.alert.link':
'prefix':'bt4-alert-link'
'body':"""
<a href="$1" class="alert-link">$2</a>
"""
# ————————————————————————————————————————————————————
# Badge Snippest
#————————————————————————————————————————————————————
'bt4.badge.primary':
'prefix':'bt4-badge-primary'
'body':"""
<span class="badge badge-primary">Primary</span>
"""
'bt.badge.secondary':
'prefix':'bt4-badge-secondary'
'body':"""
<span class="badge badge-secondary">Secondary</span>
"""
'bt.badge.success':
'prefix':'bt4-badge-success'
'body':"""
<span class="badge badge-success">Success</span>
"""
'bt.badge.danger':
'prefix':'bt4-badge-danger'
'body':"""
<span class="badge badge-success">danger</span>
"""
'bt.badge.warning':
'prefix':'bt4-badge-warning'
'body':"""
<span class="badge badge-warning">warning</span>
"""
'bt.badge.info':
'prefix':'bt4-badge-info'
'body':"""
<span class="badge badge-info">info</span>
"""
'bt.badge.light':
'prefix':'bt4-badge-light'
'body':"""
<span class="badge badge-light">light</span>
"""
'bt.badge.Dark':
'prefix':'bt4-badge-Dark'
'body':"""
<span class="badge badge-Dark">Dark</span>
"""
# ————————————————————————————————————————————————————
# Breadcrumb snippets:
#————————————————————————————————————————————————————
'bt.breadcrumb':
'prefix':'bt4-breadcrumb'
'body':"""
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
$1
</ol>
</nav>
"""
'bt.breadcrumb.add.active.item':
'prefix':'bt4-breadcrum-add-active-item'
'body':"""
<li class="breadcrumb-item active" aria-current="page">$1</li>
"""
'bt.breadcrumb.add.inactive.item':
'prefix':'bt4-breadcrum-add-inactive-item'
'body':"""
<li class="breadcrumb-item"><a href="$1">$2</a></li>
"""
# ——————————————————————————————————————————————————————————————————————————————
# buttons snippets:
#————————————————————————————————————————————————————————————————————————————
'bt.btn.primary':
'prefix':'bt4-btn-primary'
'body':"""
<button type="button" class="btn btn-primary">Primary</button>
"""
'bt.btn.secondary':
'prefix':'bt4-btn-secondary'
'body':"""
<button type="button" class="btn btn-secondary">Secondary</button>
"""
'bt.btn.success':
'prefix':'bt4-btn-success'
'body':"""
<button type="button" class="btn btn-success">Success</button>
"""
'bt.btn.danger':
'prefix':'bt4-btn-danger'
'body':"""
<button class="btn btn-success">danger</button>
"""
'bt.btn.warning':
'prefix':'bt4-btn-warning'
'body':"""
<button type="button" class="btn btn-warning">warning</button>
"""
'bt.btn.info':
'prefix':'bt4-btn-info'
'body':"""
<button type="button" class="btn btn-info">info</button>
"""
'bt.btn.light':
'prefix':'bt4-btn-light'
'body':"""
<button type="button" class="btn btn-light">light</button>
"""
'bt.btn.dark':
'prefix':'bt4-btn-dark'
'body':"""
<button type="button" class="btn btn-dark">dark</button>
"""
'bt.btn.link':
'prefix':'bt4-btn-link'
'body':"""
<button type="button" class="btn btn-link">Link</button>
"""
# ---------------------------------------------------------
# button-outline-style (include btn-link-outline)
# ---------------------------------------------------------
'bt.btn-outline-primary':
'prefix':'bt4-btn-outline-primary'
'body':"""
<button type="button" class="btn btn-outline-primary">Primary</button>
"""
'bt.btn-outline-secondary':
'prefix':'bt4-btn-outline-secondary'
'body':"""
<button type="button" class="btn btn-outline-secondary">Secondary</button>
"""
'bt.btn-outline-success':
'prefix':'bt4-btn-outline-success'
'body':"""
<button type="button" class="btn btn-outline-success">Success</button>
"""
'bt.btn-outline-danger':
'prefix':'bt4-btn-outline-outline-danger'
'body':"""
<button class="btn btn-outline-success">danger</button>
"""
'bt.btn-outline-warning':
'prefix':'bt4-btn-outline-warning'
'body':"""
<button type="button" class="btn btn-outline-warning">warning</button>
"""
'bt.btn-outline-info':
'prefix':'bt4-btn-outline-info'
'body':"""
<button type="button" class="btn btn-outline-info">info</button>
"""
'bt.btn-outline-light':
'prefix':'bt4-btn-outline-light'
'body':"""
<button type="button" class="btn btn-outline-light">light</button>
"""
'bt.btn-outline-dark':
'prefix':'bt4-btn-outline-dark'
'body':"""
<button type="button" class="btn btn-outline-dark">dark</button>
"""
'bt.btn-outline-link':
'prefix':'bt4-btn-outline-link'
'body':"""
<button type="button" class="btn btn-outline-link">Link</button>
"""
# ----------------------------------------------------------------
# button group, vertical button group, button Toolbar snippests
# ----------------------------------------------------------------
'btn.btn.group':
'prefix':'bt4-btn-group'
'body':"""
<div class="btn-group" role="group" aria-label="Basic example">
$1
</div>
"""
'btn.btn.toolbar':
'prefix':'bt4-btn-group-toolbar'
'body':"""
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
$1
</div>
"""
'btn.btn.group.vertical':
'prefix':'bt4-btn-group-vertical'
'body':"""
<div class="btn-group-vertical" role="group" aria-label="button group vertical">
$1
</div>
"""
# ----------------------------------------------------------------
# Cards Snippests
# ----------------------------------------------------------------
'card.basic':
'prefix':'bt4-card'
'body':"""
<div class="card" style="width: $1">
<img class="card-img-top" src="$2" alt="$3">
<div class="card-body">
<h5 class="card-title">$4</h5>
<p class="card-text">$5</p>
<a href="$6" class="btn btn-primary">$7</a>
</div>
</div>
"""
'card.list-group':
'prefix':'bt4-card-list-groups'
'body':"""
<div class="card" style="width: $1">
<div class="card-header">
$2
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">$3</li>
<li class="list-group-item">$4</li>
<li class="list-group-item">$5</li>
</ul>
</div>
"""
'card.fotter':
'prefix':'bt4-card-footer'
'body':"""
<div class="card-footer text-muted">
$1
</div>
"""
'card.navigation':
'prefix':'bt4-card-navigaton'
'body':"""
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">$1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">$2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">$3</a>
</li>
</ul>
"""
# card group and card column snippests not been added yet
# ------------------------------------------------------------
# _______________________________________________________________
# carousel snippests
# _______________________________________________________________
# Slides only, no control carousel snippest:
'carousel.slides.only':
'prefix':'bt4-carousel-slides-only'
'body':"""
<div id="$1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="$2" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="$3" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="$4" alt="Third slide">
</div>
</div>
</div>
"""
# carousel with control
'carousel.slides.with-control':
'prefix':'bt4-carousel-slides-with-control'
'body':"""
<div id="$1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="$2" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="$3" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="$4" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#$1" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
"""
# carousel with controls and indicators
'carousel.slides.with-control-indicators':
'prefix':'bt4-carousel-slides-with-control-indicators'
'body':"""
<div id="$1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#$1" data-slide-to="0" class="active"></li>
<li data-target="#$1" data-slide-to="1"></li>
<li data-target="#$1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="$2" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="$3" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="$4" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#$1" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
"""
# carousel item with caption
'carousel.item.with.caption':
'prefix':'bt4-carousel-item-with-caption'
'body':"""
<div class="carousel-item">
<img src="$1" alt="$2">
<div class="carousel-caption d-none d-md-block">
<h5>$3</h5>
<p>$4</p>
</div>
</div>
"""
# _______________________________________________________________
# collapse snippests
# _______________________________________________________________
# collapse link
'collapse.link':
'prefix':'bt4-collapse-link'
'body':"""
<a class="btn btn-primary" data-toggle="collapse" href="#$1" role="button" aria-expanded="false" aria-controls="$1">
$2
</a>
<div class="collapse" id="$1">
<div class="card card-body">
$3
</div>
</div>
"""
# collapse button
'collapse.button':
'prefix':'bt4-collapse-button'
'body':"""
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#$1" aria-expanded="false" aria-controls="$1">
$2
</button>
<div class="collapse" id="$1">
<div class="card card-body">
$3
</div>
</div>
"""
# Accordion collapse
'collapse.accordion':
'prefix':'bt4-collapse-accordion'
'body':"""
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
$1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
$2
</div>
</div>
</div>
<!--end of card-->
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
$3
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
$4
</div>
</div>
</div>
<!--end of card-->
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
$5
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
$6
</div>
</div>
</div>
<!--end of card-->
</div>
<!--end of accordion-->
"""
# _______________________________________________________________
# dropdown snippests
# _______________________________________________________________
# button dropdown
'dropdown.button':
'prefix':'bt4-dropdown-button'
'body':"""
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="$1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="$1">
<a class="dropdown-item" href="#">$2</a>
</div>
</div>
"""
# link dropdown
'dropdown.link':
'prefix':'bt4-dropdown-link'
'body':"""
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="$1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
$2
</a>
<div class="dropdown-menu" aria-labelledby="$1">
<a class="dropdown-item" href="#">$3</a>
</div>
</div>
"""
# split button Dropdown
'dropdown.split.button':
'prefix':'bt4-dropdown-button-split'
'body':"""
<div class="btn-group">
<button type="button" class="btn btn-danger">$1</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">$2</a>
<a class="dropdown-item" href="#">$3n</a>
<a class="dropdown-item" href="#">$4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">$5</a>
</div>
</div>
"""
# _______________________________________________________________
# form snippests
# _______________________________________________________________
# input email
'from.input':
'prefix':'bt4-form-general-input'
'body':"""
<div class="form-group">
<label for="$1">$2</label>
<input type="$3" class="form-control" id="$7" name="$4" aria-describedby="emailHelp" placeholder="$5">
<small id="emailHelp" class="form-text text-muted">$6</small>
</div>
"""
# input files
'from.input.files':
'prefix':'bt4-form-input-file'
'body':"""
<div class="form-group">
<label for="exampleFormControlFile1$1">$2Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1$1">
</div>
"""
# _______________________________________________________________
# jumbotron snippests
# _______________________________________________________________
# basic jumbotron
'jumbotron.basic':
'prefix':'bt4-jumbotron'
'body':"""
<div class="jumbotron">
<h1 class="display-4">$1</h1>
<p class="lead">$2</p>
<hr class="my-4">
<p>$3</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">$4</a>
</p>
</div>
"""
# Fluid jumbotron
'jumbotron.fluid':
'prefix':'bt4-jumbotron-fluid'
'body':"""
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">$!</h1>
<p class="lead">$2</p>
</div>
</div>
"""
# _______________________________________________________________
# list group snippests
# _______________________________________________________________
# list group basic
'list-group.basic':
'prefix':'bt4-ligt-group-basic'
'body':"""
<ul class="list-group">
<li class="list-group-item">$1</li>
</ul>
"""
# list group links
'list-group.links':
'prefix':'bt4-ligt-group-link'
'body':"""
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
$1
</a>
<a href="#" class="list-group-item list-group-item-action">$2</a>
</div>
"""
# list group links
'list-group.buttons':
'prefix':'bt4-ligt-group-button'
'body':"""
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
$1
</button>
<button type="button" class="list-group-item list-group-item-action">$2</button>
</div>
"""
# list group flush
'list-group.flush':
'prefix':'bt4-ligt-group-flush'
'body':"""
<ul class="list-group list-group-flush">
<li class="list-group-item">$1</li>
</ul>
"""
# list group with badges
'list-group.badge':
'prefix':'bt4-ligt-group-badge'
'body':"""
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
$1
<span class="badge badge-primary badge-pill">$2</span>
</li>
</ul>
"""
# list group with tabbable panes
'list-group.tabbable.panes':
'prefix':'bt4-ligt-group-tab-panes'
'body':"""
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
"""
# --------------------------------------------------------------------------
# nav Snippests
# --------------------------------------------------------------------------
# nav basic
'nav.basic':
'prefix':'bt4-nav-basic'
'body':"""
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
"""
网友评论