Bootstrap Snippets for Hbuilder

CDN

Component	Snippet Code	Code Block Trigger	Example / Explanation
CDN link (both CSS & JS)	bs-cdn	cdn	/
CDN link (CSS only)	bs-cdn-css	/	/
CDN link (JS only)	bs-cdn-js	/	/

Templates（快速引入bootstrap的html模板）

Component	Snippet Code	Code Block Trigger	Example / Explanation
HTML5 Template Layout	bs-html	/	/

Grid（删格）

Note- The 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.
· bs-col
· col-6
· col-12

Component	Snippet Code	Code Block Trigger	Example / Explanation
Column	bs-col	col	/
Row	bs-row	col	/
Row Col	row-col	col	/
Container	bs-container	col	/

Clearfix（清除浮动）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Clearfix	bs-cf	cf	/

Forms（表单）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Form	bs-form	form	/
Inline Form	form-inline	form-inline
Horizontal Form	form-horizontal	form-horizontal
Form Label	form-label	form-label	/
Has-Feedback (带图标的表单输入框)	has-feedback	has-feedback

Tables（表格）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Table	bs-table	table
Bordered Table	table-bordered	table-bordered
Condensed Table	table-condensed	table-condensed
Striped Table	table-striped	table-striped
Hover Table	table-hover	table-hover
Table Responsive	table-responsive	table-responsive	/

Input（输入框）

Note- you can add " -h " to the end of any input field snippet to make it compatible with Bootstrap 3 horizontal forms. E.g.
· input-text-h
· input-hidden-h

Component	Snippet Code	Code Block Trigger	Example / Explanation
Label	input-label	input-label	/
Text Input	input-text	input-text	-h
Email Input	input-email	input-email	-h
Password Input	input-password	input-password	-h
Hidden Input	input-hidden	input-hidden	-h
Url Input	input-url	input-url	-h
Color Input	input-color	input-color	-h
Number Input	input-number	input-number	-h
Range Input	input-range	input-range	-h
Date Input	input-date	input-date	-h
Week Input	input-week	input-week	-h
Month Input	input-mont	input-month	h
Time Input	input-time	input-time	-h
Tel Input	input-tel	input-tel	-h
Search Input	input-search	input-search	-h
Reset Input	input-reset	input-reset	-h
Submit Input	input-submit	input-submit	-h
Textarea Input	bs-textarea	textarea	/
Textarea Horizontal Input	textarea-horizontal	textarea-horizontal	/
Checkbox Input	input-checkbox	input-checkbox	-h
Radio Box Input	input-radio	input-radio	-h
Select Box	bs-select	select	-h
Select Box(同时列出多个选项)	select-multiple	select-multiple
Textarea	bs-textarea	textarea	-h
Checkbox Inline	checkbox-inline	checkbox-inline
Radio Inline	radio-inline	radio-inline

Alerts（警告框）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Alert Box (Default)	bs-alert	alt	/
Danger Alert Box	alert-danger	alt	/
Info Alert Box	alert-info	alt	/
Success Alert Box	alert-success	alt	/
Warning Alert Box	alert-warning	alt	/

Badge（徽章）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Badge (default)	bs-badge	badge

Breadcrumbs（面包屑导航）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Breadcrumbs	bs-breadcrumb	breadcrumb

Carousel（徽章）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Carousel	bs-carousel	/	/

Button（按钮）

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-
· btn-success
· block-button-warning
Component
Snippet code
Options

Component	Snippet Code	Code Block Trigger	Example / Explanation
Button	bs-btn	btn	*
Block Button 拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素	btn-block	blc-btn	*
Mini Button	btn-xs	btn-s	*
Small Button	btn-sm	btn-s	*
Large Button	btn-lg	btn-s	*
Block Link-Button	block-link-button	blb	*
Link Button	link-btn	link-btn	*
Large Link Button	lg-link-btn	link-btn-s	*
Small Link Button	sm-link-btn	link-btn-s	*
X Small Link Button	xs-link-btn	link-btn-s	*
Button Group	btn-group	btn-g	/
Button Group Vertival	button-group-vertival	btn-g	/
Button ToolBar	btn-toolbar	btn-t	/
Link Group	link-group	link-group	/
Input Group Button	input-group-btn	input-group-btn	/
Input Group Button text	input-group-button-text	input-group-button-text	/

Icon（图标）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Glyphicon	icon-gly	icon-glyphion	/
Icon (Font Awesome)	bs-icon	icon	/

Image（图片）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Imag	/bs-img	img	/
Thumbnail	bs-thumbnail	thumbnail	/
Thumbnail with content	bs-thumbnail-content	thumbnail-content	/

Labels（标签）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Label	bs-label	label
Danger Label	label-danger	label-danger
Info Label	label-info	label-info	/
Success Label	label-success	label-success	/
Warning Label	label-warning	label-warning	/

Pagination（分页）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Page Header(页头)	page-header	page
Pager	bs-pager	page
Pager Aligned	pager-aligned	page
Pagination	bs-pagination	pagination
Pagination-small	pagination-sm	pagination-size	/
Pagination-large	pagination-lg	pagination-size	/

Nav（导航）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Nav Default	bs-nav	nav	/
Nav Pills	bs-nav-pills	nav-pills	/

Navigation（导航条）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Navbar (basic navbar)	bs-navbar	navbar
Navbar Brand Element	navbar-brand	/	/
Navbar Button	navbar-btn	/	/
Navbar Form	navbar-form	/	/
Navbar Link	navbar-link	navbar-link	/
Navbar Text	navbar-text	navbar-text	/
Navbar Fixed-Botton	navbar-fixed-bottom	navbar-fixed-bottom	要给body一个padding值（取导航条的高度），导航条才不会遮挡body里的内容
Navbar Fixed-Top	navbar-fixed-top	navbar-fixed-top	要给body一个padding值（取导航条的高度），导航条才不会遮挡body里的内容
Navbar Inverse	navbar-inverse	navbar-inverse
Navbar Responsive	navbar-responsive	navbar-responsive	/
Navbar Static-Top	navbar-static-top	navbar-static-top	创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失

Jumbotron（巨幕）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Jumbotron	jumbotron	jumbotron

Panels（面板）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Panel	bs-panel	panel
Panel (contextual)	panel-{warning,success,info,danger,primary}	panel-{warning,success,info,danger,primary}
Panel (with heading)	panel-heading	panel-heading
Panel (with footer)	panel-footer	panel-footer
Panel Table	panel-table	panel-table	/

List-groups（列表组）

Component	Snippet Code	Code Block Trigger	Example / Explanation
List group	list-group	list-group
List group (with badges)	list-group-badges	list-group-badges
List group (linked list)	list-group-linked	list-group-linked
List group (with content)	list-group-content	list-group-content

Media Objects（媒体对象）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Media Object	media-object	media-object

Wells（嵌入、凹陷效果）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Well	well	well
Well (small)	well-sm	well	/
Well (large)	well-lg	well	/

Tabs（标签页、选项卡）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Tabs Pane	bs-tabs	tabs

Input-groups（输入框组）

Component	Snippet Code	Example / Explanation
Input group	bs-input-group	input-group
Input group(addon & text-field)	input-group-addon-text	input-group-addon-text
Input group (addon)	input-group-addon	input-group-addon
Input group (button)	input-group-btn	/
Input group (text-field & btn)	input-group-text-btn	/

Dropdown（下拉菜单）

Component	Snippet Code	Code Block Trigger	Example / Explanation
dropdown	bs-dropdown	dropdown	/
dropup	bs-dropup	dropup	/

Tooltips（提示框）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Tooltips	bs-tooltips	/

Accordion（折叠组件）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Accordion	bs-accordion	accordion

Modal（模态框）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Modal	bs-modal	modal

Progress（进度条）

Component	Snippet Code	Code Block Trigger	Example / Explanation
Progress	bs-progress	progress	/