Bootstrap Snippets for Hbuilder including Code Block(自用)

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	/

• 人面猴

  序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...

  沈念sama阅读 212,332评论 6赞 493
• 死咒

  序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...

  沈念sama阅读 90,508评论 3赞 385
• 救了他两次的神仙让他今天三更去死

  文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...

  开封第一讲书人阅读 157,812评论 0赞 348
• 道士缉凶录：失踪的卖姜人

  文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...

  开封第一讲书人阅读 56,607评论 1赞 284
• 港岛之恋（遗憾婚礼）

  正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...

  茶点故事阅读 65,728评论 6赞 386
• 恶毒庶女顶嫁案：这布局不是一般人想出来的

  文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...

  开封第一讲书人阅读 49,919评论 1赞 290
• 城市分裂传说

  那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...

  沈念sama阅读 39,071评论 3赞 410
• 双鸳鸯连环套：你想象不到人心有多黑

  文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...

  开封第一讲书人阅读 37,802评论 0赞 268
• 万荣杀人案实录

  序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...

  沈念sama阅读 44,256评论 1赞 303
• 护林员之死

  正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...

  茶点故事阅读 36,576评论 2赞 327
• 白月光启示录

  正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...

  茶点故事阅读 38,712评论 1赞 341
• 活死人

  序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...

  沈念sama阅读 34,389评论 4赞 332
• 日本核电站爆炸内幕

  正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...

  茶点故事阅读 40,032评论 3赞 316
• 男人毒药：我在死后第九天来索命

  文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...

  开封第一讲书人阅读 30,798评论 0赞 21
• 一桩弑父案，背后竟有这般阴谋

  文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...

  开封第一讲书人阅读 32,026评论 1赞 266
• 情欲美人皮

  我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...

  沈念sama阅读 46,473评论 2赞 360
• 代替公主和亲

  正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...

  茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容

• awesome-android

  afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...

  passiontim阅读 15,412评论 2赞 45
• 哔了狗了

  生活总是充满了操蛋。

  王宇宙她姐玉娘阅读 174评论 0赞 0
• 2017-08-17

  日精进：熊望斌726天 体验入：今天与全体员工一起开了个机制会议，大家都没有学习过，一点点引导、练习与谁有关与谁互...

  熊毅滨1349阅读 131评论 0赞 0
• 命运似乎总在逼我向上，可是生命不息，不正是需要折腾不止吗？

  文/逸飞 我自认不是一个功利的人，对于职位没有要求，对于官位没有期待。 不爱当官，也不爱出风头，只想闷在角落练就个...

  晴天爱阅读阅读 661评论 7赞 11
• DAY4 差点忘打卡了

  依叮阅读 135评论 0赞 0