Bootstrap 3 - Sublime 插件

一个包含 Bootstrap 3 短语的完整 sublime 插件

如果您想添加其他任何内容，请通过

• Twitter @JasonMortonNZ
• 问题

包含内容 - 内容

• 安装
• CDN
• 本地
• 模板
• 表单
• 表格
• 输入
• 警告
• 徽章
• 路径导航
• 按钮
• 轮播图
• 栅格
• 图片
• 图标
• 标签
• 分页
• 导航
• 面板
• 列表组
• 媒体对象
• 图标
• 清除浮动
• 凹槽
• 选项卡
• 输入组
• 授权协议

安装

此插件有 3 种安装方法。

1. 通过“Package Control: 安装包”菜单搜索“Bootstrap 3 短语”。 注意： 如果您尚未安装 Sublime Package Control，您可以在此处了解如何安装： https://sublime.wbond.net/installation

2. 将仓库克隆到您的 Sublime Text 2/3 包夹目录。 git clone https://github.com/JasonMortonNZ/bs3-sublime-plugin.git

3. 下载 .zip 文件并将其解压缩到您的 Sublime Text 2/3 包夹目录。 注意： 您可以通过转到首选项 > 浏览包来找到 Sublime Text 2/3 包夹目录。

使用方法

在 html 文件中开始输入 bs3，自动完成窗口即可打开。匹配的是模糊的。因此，您可以输入 bs3radio 来找到 bs3-input:radio 短语。

确保您已启用“bs”在 Preferences.sublime-settings 中

"auto_complete_triggers": [{"selector": "text.html", "characters": "bs3"}]

注意： 如果您遇到以“<”开头的任何问题，请查看 此问题线程 了解一些可能的解决方案。

CDN

组件	短语代码
CDN 链接（CSS 和 JS）	bs3-cdn
CDN 链接（仅 CSS）	bs3-cdn:css
CDN链接（仅JavaScript）	bs3-cdn:js

本地

组件	短语代码
链接到本地Bootstrap文件	bs3-local

模板

组件	短语代码
HTML5模板布局	bs3-template:html5

表单

组件	短语代码
表单	bs3-form
内联表单	bs3-form:inline
水平表单	bs3-form:horizontal

表格

组件	短语代码
表格	bs3-table
边框表格	bs3-table:bordered
紧凑表格	bs3-table:condensed
鼠标悬停表格	bs3-table:hover
条纹表格	bs3-table:striped

输入字段（表单字段）

注意：您可以在任何输入字段代码段末尾添加“:h”使其与Bootstrap 3水平表单兼容。例如： - bs3-input:text:h - bs3-input:hidden:h

组件	短语代码	选项
标签	bs3-input:label
文本输入	bs3-input:text	:h
电子邮件输入	bs3-input:email	:h
密码输入	bs3-input:password	:h
隐藏输入	bs3-input:hidden	:h
网址输入	bs3-input:url	:h
颜色输入	bs3-input:color	:h
数字输入	bs3-input:number	:h
范围输入	bs3-input:range	:h
日期输入	bs3-input:date	:h
周输入	bs3-input:week	:h
月输入	bs3-input:month	:h
时间输入	bs3-input:time	:h
电话输入	bs3-input:tel	:h
搜索输入	bs3-input:search	:h
重置输入	bs3-input:reset	:h
提交输入	bs3-input:submit	:h
复选框输入	bs3-input:checkbox	:h
单选框输入	bs3-input:radio	:h
选择框	bs3-select	:h
文本区域	bs3-textarea	:h

警告

组件	短语代码
警告框（默认）	bs3-alert
危险警告框	bs3-alert:danger
信息警告框	bs3-alert:info
成功警告框	bs3-alert:success
警告警告框	bs3-alert:warning

徽章

组件	短语代码
徽章（默认）	bs3-badge

路径导航

组件	短语代码
路径导航	bs3-breadcrumbs

轮播图

组件	短语代码
轮播图	bs3-carousel

按钮

注意：以下所有按钮代码段可以附加以下任何一个选项到代码段末尾：*. - :danger - :default - :disabled - :info - :primary - :success - :warning

示例： - bs3-button:success - bs3-large-button:disabled - bs3-block-button:warning

组件	短语代码	选项
按钮	bs3-button	*
块按钮	bs3-block-button	*
迷你按钮	bs3-xs-button	*
小型按钮	bs3-sm-button	*
大型按钮	bs3-lg-button	*

栅格

注意：bs3-col代码段可以单独使用，也可以添加冒号后跟所需的列数：例如：

• bs3-col
• bs3-col:6
• bs3-col:12

组件	短语代码	选项
列	bs3-col	:1-12
行	bs3-row
容器	bs3-container

图标

组件	短语代码
图标	bs3-icon:glyphicon
图标（Font Awesome）	bs3-icon

图片

组件	短语代码
缩略图	bs3-thumbnail
带内容的缩略图	bs3-thumbnail:content

标签

组件	短语代码
标签	bs3-label
危险标签	bs3-label:danger
信息标签	bs3-label:info
成功标签	bs3-label:success
警告标签	bs3-label:warning

分页

组件	短语代码
分页器	bs3-pager
对齐分页器	bs3-pager:aligned
分页	bs3-pagination
分页：小号	bs3-pagination:sm
分页：大号	bs3-pagination:lg

导航

组件	短语代码
导航栏（基本导航栏）	bs3-navbar
导航栏品牌元素	bs3-navbar:brand
导航栏按钮	bs3-navbar:button
导航栏表单	bs3-navbar:form
导航栏链接	bs3-navbar:link
导航栏文本	bs3-navbar:text
导航栏固定-底部	bs3-navbar:fixed-bottom
导航栏固定-顶部	bs3-navbar:fixed-top
导航栏相反模式	bs3-navbar:inverse
导航栏响应式	bs3-navbar:responsive
导航栏静态-顶部	bs3-navbar:static-top

巨型轮播

组件	短语代码
Jumbotron（旧Hero Unit）	bs3-jumbotron

面板

组件	短语代码
面板	bs3-panel
面板（上下文）	bs3-panel:{warning,success,info,danger,primary}
面板（带标题）	bs3-panel:heading
面板（带页脚）	bs3-panel:footer

列表组

组件	短语代码
列表组	bs3-list-group
带徽章的列表组	bs3-list-group:badges
链接列表	bs3-list-group:linked
带内容的列表组	bs3-list-group:content

媒体对象

组件	短语代码
媒体对象	bs3-media-object

清除浮动

组件	短语代码
清除浮动	bs3-clearfix

凹槽

组件	短语代码
侧边栏	bs3-well
小侧边栏	bs3-well:sm
大侧边栏	bs3-well:lg

选项卡

组件	短语代码
标签页区域	bs3-tabs

输入组

组件	短语代码
输入组	bs3-input-group
输入组（附加组件和文本字段）	bs3-input-group:addon:text
输入组（附加组件）	bs3-input-group-addon
输入组（按钮）	bs3-input-group-btn
输入组（文本字段和按钮）	bs3-input-group:text:btn

授权协议

Bootstrap 3 - Sublime 插件是开源软件，许可协议为 MIT 许可协议。