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
