Start typing <bs3
in html files and the autocomplete window opens. It matches fuzzily. So you can type <bs3radio
to find the bs3-input:radio
snippet.
Be sure you have enabled “<” and “bs” in your Preferences.sublime-settings:
"auto_complete_triggers": [{"selector": "text.html", "characters": "<"},{"selector": "text.html", "characters": "bs3"}]
CDN
Component
|
Snippet code
|
CDN link (both CSS & JS)
|
bs3-cdn
|
CDN link (CSS only)
|
bs3-cdn:css
|
CDN link (JS only)
|
bs3-cdn:js
|
Local
Component
|
Snippet code
|
Link to local bootstrap files
|
bs3-local
|
Templates
Component
|
Snippet code
|
HTML5 Template Layout
|
bs3-template:html5
|
Forms
Component
|
Snippet code
|
Form
|
bs3-form
|
Inline Form
|
bs3-form:inline
|
Horizontal Form
|
bs3-form:horizontal
|
Tables
Component
|
Snippet code
|
Table
|
bs3-table
|
Bordered Table
|
bs3-table:bordered
|
Condensed Table
|
bs3-table:condensed
|
Hover Table
|
bs3-table:hover
|
Striped Table
|
bs3-table:striped
|
Input Fields (Form fields)
Note: you can add “ :h ” to the end of any input field snippet to make it compatible with Bootstrap 3 horizontal forms. E.g. - bs3-input:text:h - bs3-input:hidden:h
Component
|
Snippet code
|
Options
|
Label
|
bs3-input:label
|
|
Text Input
|
bs3-input:text
|
:h
|
Email Input
|
bs3-input:email
|
:h
|
Password Input
|
bs3-input:password
|
:h
|
Hidden Input
|
bs3-input:hidden
|
:h
|
Url Input
|
bs3-input:url
|
:h
|
Color Input
|
bs3-input:color
|
:h
|
Number Input
|
bs3-input:number
|
:h
|
Range Input
|
bs3-input:range
|
:h
|
Date Input
|
bs3-input:date
|
:h
|
Week Input
|
bs3-input:week
|
:h
|
Month Input
|
bs3-input:month
|
:h
|
Time Input
|
bs3-input:time
|
:h
|
Tel Input
|
bs3-input:tel
|
:h
|
Search Input
|
bs3-input:search
|
:h
|
Reset Input
|
bs3-input:reset
|
:h
|
Submit Input
|
bs3-input:submit
|
:h
|
Checkbox Input
|
bs3-input:checkbox
|
:h
|
Radio Box Input
|
bs3-input:radio
|
:h
|
Select Box
|
bs3-select
|
:h
|
Textarea
|
bs3-textarea
|
:h
|
Alerts
Component
|
Snippet code
|
Alert Box (Default)
|
bs3-alert
|
Danger Alert Box
|
bs3-alert:danger
|
Info Alert Box
|
bs3-alert:info
|
Success Alert Box
|
bs3-alert:success
|
Warning Alert Box
|
bs3-alert:warning
|
Badges
Component
|
Snippet code
|
Badge (Default)
|
bs3-badge
|
Breadcrumbs
Component
|
Snippet code
|
Breadcrumbs
|
bs3-breadcrumbs
|
Carousel
Component
|
Snippet code
|
Carousel
|
bs3-carousel
|
Buttons
Note: all button snippets below can have any of the following options append to the end of the snippet *. - :danger - :default - :disabled - :info - :primary - :success - :warning
An example: - bs3-button:success - bs3-large-button:disabled - bs3-block-button:warning
Component
|
Snippet code
|
Options
|
Button
|
bs3-button
|
*
|
Block Button
|
bs3-block-button
|
*
|
Mini Button
|
bs3-xs-button
|
*
|
Small Button
|
bs3-sm-button
|
*
|
Large Button
|
bs3-lg-button
|
*
|
Grid
Note: The bs3-col snippet can be used both on its own or with the addition of a colon followed by the number of columns required: E.g.
- bs3-col
- bs3-col:6
- bs3-col:12
Component
|
Snippet code
|
Options
|
Column
|
bs3-col
|
:1-12
|
Row
|
bs3-row
|
|
Container
|
bs3-container
|
|
Icons
Component
|
Snippet code
|
Glyphicon
|
bs3-icon:glyphicon
|
Icon (Font Awesome)
|
bs3-icon
|
Images
Component
|
Snippet code
|
Thumbnail
|
bs3-thumbnail
|
Thumbnail with content
|
bs3-thumbnail:content
|
Labels
Component
|
Snippet code
|
Label
|
bs3-label
|
Danger Label
|
bs3-label:danger
|
Info Label
|
bs3-label:info
|
Success Label
|
bs3-label:success
|
Warning Label
|
bs3-label:warning
|
Pagination
Component
|
Snippet code
|
Pager
|
bs3-pager
|
Aligned Pager
|
bs3-pager:aligned
|
Pagination
|
bs3-pagination
|
Pagination:small
|
bs3-pagination:sm
|
Pagination:large
|
bs3-pagination:lg
|
Navigation
Component
|
Snippet code
|
Navbar (basic navbar)
|
bs3-navbar
|
Navbar Brand Element
|
bs3-navbar:brand
|
Navbar Button
|
bs3-navbar:button
|
Navbar Form
|
bs3-navbar:form
|
Navbar Link
|
bs3-navbar:link
|
Navbar Text
|
bs3-navbar:text
|
Navbar Fixed-Botton
|
bs3-navbar:fixed-bottom
|
Navbar Fixed-Top
|
bs3-navbar:fixed-top
|
Navbar Inverse
|
bs3-navbar:inverse
|
Navbar Responsive
|
bs3-navbar:responsive
|
Navbar Static-Top
|
bs3-navbar:static-top
|
Jumbotron
Component
|
Snippet code
|
Jumbotron (ex Hero Unit)
|
bs3-jumbotron
|
Panels
Component
|
Snippet code
|
Panel
|
bs3-panel
|
Panel (contextual)
|
bs3-panel:{warning,success,info,danger,primary}
|
Panel (with heading)
|
bs3-panel:heading
|
Panel (with footer)
|
bs3-panel:footer
|
List-groups
Component
|
Snippet code
|
List group
|
bs3-list-group
|
List group (with badges)
|
bs3-list-group:badges
|
List group (linked list)
|
bs3-list-group:linked
|
List group (with content)
|
bs3-list-group:content
|
Media Objects
Component
|
Snippet code
|
Media Object
|
bs3-media-object
|
Clearfix
Component
|
Snippet code
|
Clearfix
|
bs3-clearfix
|
Wells
Component
|
Snippet code
|
Well
|
bs3-well
|
Well (small)
|
bs3-well:sm
|
Well (large)
|
bs3-well:lg
|
Tabs
Component
|
Snippet code
|
Tabs pane
|
bs3-tabs
|
Input-groups
Component
|
Snippet code
|
Input group
|
bs3-input-group
|
Input group(addon & text-field)
|
bs3-input-group:addon:text
|
Input group (addon)
|
bs3-input-group-addon
|
Input group (button)
|
bs3-input-group-btn
|
Input group (text-field & btn)
|
bs3-input-group:text:btn
|
bootstrap3 snippets使用方法相关推荐
- BootStrap使用方法为BootStrap3添加jquery.min.js文件(简单易懂)_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件 一.前言 二.BootStrap简介 三.BootStrap3的使用方法 (1)先去官网找到BootStrap3这个版本的文档. (2)配置B ...
- Code Snippets 使用
一个偶然的机会,了解了到了xcode一个非常不错的.可以提高代码编写效率的工具,Code Snippets.关于如何使用Code Snippets来设置自己的代码片段,请参考下面这篇文章: http: ...
- VS code snippets
VS code Snippets 文章目录 设置VS Code Snippets的方法 python cpp markdown Reference 设置VS Code Snippets的方法 File ...
- vscode 怎么编辑sphinx_VSCode Snippets 食用指南
我们在写代码的过程中,常常会遇到一些固定的代码结构,形如输入一串console.log或者输入for的结构甚至是编写redux的reducers等等.反复写这些代码结构,不仅枯燥无聊,也会觉得效率不够 ...
- 在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
- Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
- bootstrap3中模态框的数据编辑使用方法
bootstrap3中模态框的数据编辑使用方法 模态框是bootstrap3中比较好用得弹窗控件,这回使用了 说主要的,官方详细教程 http://www.runoob.com/bootstrap/b ...
- Bootstrap3 轮番插件的使用方法
轮番 Bootstrap 的轮番插件(carousel.js)是一个灵活的.响应式的.无缝循环播放的幻灯片切换插件,它的内容可以是图片.视频.或者其他任何内容. 使用方法 Bootstrap中的轮番由 ...
- Bootstrap3 折叠插件的使用方法
折叠 折叠插件(collapse.js)可以很容易地让页面区域折叠起来.当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单可以节约页面空间,方便用户浏览. 使用方法 Bootstra ...
最新文章
- atexit()函数
- 轻松清理系统垃圾[转]
- kmp算法详解php,php中字符串匹配KMP算法实现例子
- Thread类的有关常用方法
- 计算机辅助外文文献,计算机辅助夹具设计外文文献.pdf
- C语言程序设计现代方法1,2,3章
- Android应用开发提高篇(2)-----文本朗读TTS(TextToSpeech)
- java日期时间轴_生成时间轴数据, 从当前 年月日 往前推到几天的日期(前一周时间、、、)...
- MFC绘制图片闪烁详解
- 在windows下安装Linux双系统共存不需要改引导(U盘安装版本)
- AutoIT如何制作自动化安装脚本-SketchUp 2017
- [网站加载优化]公共CDN库/Nginx启用Gzip/全站CDN加速
- 计算机电磁泄露案例,电磁泄漏
- 3dsMax批量设置可编辑样条线的视口渲染
- php web helloworld,webim_server.php
- unreal world 皮革_不真实的世界Unreal World新手速刷攻略是什么?
- [腾讯社区开放平台]介绍开放授权协议-OAuth
- 打工能实现财富自由吗?--互联网老辛的思考
- python cv2截取不规则区域图片
- 【报告分享】头部DTC品牌增长案例库-易观智库零一裂变(附下载)
热门文章
- 解决微信浏览器缓存问题
- MAC 打开CAJViewerMac软件时报错
- WLW/OLW 最佳博客写作软件
- Linux网络服务之DNS服务
- 返利机器人源码php,RebateBot:非常棒的返利机器人 基于 golang+vue+android-xposed
- Mac 如何在终端打开文件.md
- cadence allegro - E
- 北京WIFI密码,很强大
- 程序员必知1700英语单词
- Unknown	Faceted Project Problem (Java Version Mismatch)