江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. 网站建设

BootStrap一页通(样式+组件+插件)(全)

admin••网站建设•阅读22

BootStrap一页通(样式+组件+插件)(全)

2023年7月9日发(作者：)

BootStrap⼀页通（样式+组件+插件）（全）初识bootstrap是⼀种前端框架，实现美观的页⾯效果。使⽤BootStrap的前期⼯作（注意顺序）：

；因为Bootstrap⽤到了h5的特性，所以需要此步。导⼊jQuery；bootstrap需要jQuery才能正常⼯作，故需要导⼊ 导⼊Bootstrap的css；定义各种样式。导⼊Bootstrap的js；产⽣交互效果。最后直接套⽤Bootstrap的class即可，达到想要的效果。 Bootstrap的使⽤ 基本样式1. 按钮- 按钮样式可⽤于： - 按钮元素`

默认按钮：⽆⾊按钮

提交按钮：⽤于提交数据

成功按钮：⼀般⽤于⼀系列操作的最后⼀步，例如购物车最后付款

信息按钮：点击显⽰更多信息

警告按钮：⼀般⽤于修改⾏为

危险按钮：⼀般⽤于严重⾏为，如删除

表现为链接：button标签表现为超链接，但仍是button标签

⼤按钮：引⼈注⽬

⼩按钮：

最⼩的按钮：

宽屏按钮：⽔平⽅向占⽗容器的100%

激活状态按钮：按钮⼀直处于被按下的状态，⼀般⽤于显⽰⼀个需要很长时间的操作，如上传⼤⽂件

⽆效按钮：按钮表现为⽆效的状态，不可点击，如某些处于倒计时的状态

多种按钮样式混⽤：多种按钮的样式可以⼀起⽤2. 表格- 基本表格`table`- 带斑马线的表格`table table-striped`- 带边框的表格`table table-bordered`- 有⿏标悬停状态的表格`table table-hover`- 更加紧凑的表格`table table-condensed`- 多种效果整合的表格- 激活样式`active` `alert-active`- 成功样式`success` `alert-success`- 信息样式`info` `alert-info`- 警告样式`warning` `alert-warning`- 危险样式`danger` `alert-danger` 基本样式之⼆：表格

基本表格：有横向分割线，宽度占⽤⽗容器的。

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

待斑马线的表格：

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

带边框的表格：

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯

⿏标悬停状态的表格：

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯

更加紧凑的表格：

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯

多种表格效果整合在⼀起：

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯

激活样式

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

成功样式1

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

成功样式2

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

信息样式

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

警告样式

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选

危险样式

姓名 岗位 状态
张三 前端开发 ⾯试中
李四 java开发 待筛选
冯⽥ 前端开发 已回绝
周⾈ 算法⼯程师 ⾯试中
孙⼤⼤ 前端开发 三⾯
刘萌 数据库⼯程师 简历待筛选
3. 图⽚- 圆⾓`img-round`- 圆形`img-circle`- 缩略图`img-thumbnail` 基本样式之三：图⽚ 圆⾓：圆形：缩略图：4. 表单- `form-control`可以去除阴影，边框带有淡蓝⾊，输⼊状态更柔和。 基本样式之三：表单
⽂本框: 密码: 技能：
5. ⽂本- 淡灰⾊⽂本`text-muted`- 强调⽂本 `text-primary`- 操作成功⽂本`text-success`- 提⽰信息⽂本`text-info`- 警告⽂本`text-warning`- 危险操作⽂本`text-danger` 基本样式之四：⽂本
- 淡灰⾊⽂本`text-muted`：常⽤于说明性⽂字
- 强调⽂本 `text-primary`：强调⾏⽂字
- 操作成功⽂本`text-success`：提⽰成功⾏为
- 提⽰信息⽂本`text-info`：指导性⽂字
- 警告⽂本`text-warning`：警告⽂字
- 危险操作⽂本`text-danger`危险操作，如删除
6. 背景- 强调的背景`bg-primary`- 操作成功⽂字的背景`bg-success`- 信息提⽰⽂字的背景`bg-info`- 警告提⽰⽂字的背景`bg-warning`- 危险提⽰⽂字的背景`bg-danger` 基本样式之六：背景
- 强调的背景`bg-primary`
- 操作成功⽂字的背景`bg-success`
- 信息提⽰⽂字的背景`bg-info`
- 警告提⽰⽂字的背景`bg-warning`
- 危险提⽰⽂字的背景`bg-danger`
7. 其他- 关闭按钮`close`- 下拉菜单的按钮`caret`- 左浮动`pull-left`- 右浮动`pull-right`- 显⽰`show`- 隐藏（不占位）`hidden`- 隐藏（占位）`invisible` 基本样式之七：其他
左浮动
右浮动
显⽰
000
111
333
555
666
8. 栅格布局- 使⽤Bootstrap的栅格系统，可以实现像table那样的⾏列效果。- 使⽤栅格系统，⾸先要准备`
`；然后要准备`
`表⽰⾏，最后要准备的div就是列。- Bootstrap的栅格系统默认把⼀⾏分成12列。 基本样式之⼋：栅格布局

container-->row-->col-xs-12

占12列

container-->row-->col-lg-6

占六列
占六列

container-->row-->col-sm-6

占六列
占六列

container-->row-->col-xs-1

占六列
占六列

container-->row-->col-xs-4

占四列
占四列
占四列

container-->row-->col-sm-3

占三列
占三列
占三列
占三列

container-->row-->col-xs-1

占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列
占⼀列

container-->row-->col-sm-8/5

占⼋列
占五列
———-组件1. 字体图标⼀个字体图标字体图标设置颜⾊字体图标上加超链接 连接在button上使⽤字体图标更多字体图标（详见） 组件之⼀：字体图标

⼀个字体图标

字体图标设颜⾊

字体图标上加超链接

超链接

在button上使⽤字体图标

2. 下拉菜单下拉菜单标题不可以点击分割线禁⽤项 组件之⼆：下拉菜单

下拉菜单

标题不可点击

菜单分割线

禁⽤的菜单项

3. 按钮按钮组按钮⼯具栏按钮组⼤⼩垂直排列的按钮组复选框按钮组单选框按钮组 组件之三：按钮组 组件之三：按钮组

按钮组

按钮⼯具栏

按钮组⼤⼩

垂直排列的按钮组

复选框

单选框

4. 按钮式下拉菜单单按钮下拉菜单分裂式按钮下拉菜单按钮⼤⼩向上弹出式菜单 组件之四：按钮式下拉菜单

单按钮下拉菜单

其中：btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger(此处只列出了btn-primary)

分裂式按钮下拉菜单

按钮⼤⼩

其中，btn-lg/btn/btn-sm/btn-xs（此处只列出了btn-lg）

向上弹出式菜单

5. 输⼊框组基本组合尺⼨复选框和单选框整合按钮整合下拉菜单 组件之五：输⼊框组

基本组合

@
¥ .00

尺⼨

@
@
@

复选框和单选框

整合按钮

整合下拉菜单

6. 导航栏标签页胶囊式标签页垂直胶囊式标签页禁⽤的链接 组件之六：导航栏

标签页

胶囊式标签页

垂直胶囊式标签页

禁⽤的标签链接

7. ⾯包碎屑导航 组件之七：⾯包屑导航

⾯包碎屑导航

  1. 本科⽣
  2. 硕⼠⽣
  3. 博⼠⽣
8. 分页基本分页禁⽤和激活状态尺⼨翻页两端对齐翻页禁⽤状态 组件之⼋：分页

基本分页

禁⽤和激活状态

尺⼨

翻页

两端对齐

翻页禁⽤状态

9. 标签默认标签强调标签成功标签信息标签警告标签危险标签 组件之九：标签 默认标签强调标签成功标签信息标签警告标签危险标签10. 消息提⽰数字超链接旁的消息数提⽰按钮中的消息数提⽰ 组件之⼗：消息数提⽰

超链接旁的消息数提⽰

您的消息 24

按钮中的消息数提⽰

11. 超⼤屏幕jumbotron[‘dʒʌmbəutrɔn]n. 电视机的超⼤屏幕 组件之⼗⼀：超⼤屏幕

⼩⼩酥

向这个世界，说出你的⽣活

加⼊我们

12. 副标题class='page-header'正副标题下⾯会有⼀条分割线 组件之⼗⼆：副标题

正标题 副标题

13. 缩略图相册风格⾃定义内容 组件之⼗三：缩略图

相册风格缩略图

⾃定义缩略图

熊顿⼩样

收藏

⼩⼩树苗
收藏
熊顿⾔之
收藏
14. 警告警告框可关闭的警告框警告框中的的超链接 组件之⼗四：警告

警告框

可关闭的警告框

警告中的超链接

重磅消息！！点击查看
15. 进度条基本进度条带提⽰的进度条多彩进度条条纹进度条动条纹进度条堆叠进度条 组件之⼗五：进度条

基本进度条

带提⽰的进度条

30%
0%

多彩进度条

19%
36%
99%
100%

条纹进度条

27%

动条纹进度条

69%

堆叠进度条

19%
18%
30%

发布者：admin，转转请注明出处：http://www.yc00.com/web/1688853867a176700.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信