bootstrap框架

bootstrap框架

bootstrap框架内部提供了很多好看的标签样式和功能,我们只需要在编写时给标签加上class属性值就可以使用样式了。

在使用bootstrap框架之前,需要导入css、js,如果要使用动态效果还需要jQuery。

详情:全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

布局容器

class值 作用
container 固定宽度并在页面居中,两边留有空白
container-fluid 宽度占满页面

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

class值 作用
row 默认开设一行均分12份
col-md-1 占一行的1/12
col-md-2 占一行的2/12
... ...
col-md-12 占一行的12/12
偏移量
col-md-offset-1 向右偏移1/12
col-md-offset-2 向右偏移2/12
... ..
col-md-offset-12 向右偏移12/12
其他设备
col-xs- 超小屏幕 手机 (<768px)
col-sm- 小屏幕 平板 (≥768px)
col-md- 中等屏幕 桌面显示器 (≥992px)
col-lg- 大屏幕 大桌面显示器 (≥1200px)

表格样式

链接:表格样式官网说明

class值 作用
table 美化表格
table-hover 每一行对鼠标悬停状态作出响应
table-striped 每一行增加斑马条纹样式
table-bordered 为表格和其中的每个单元格增加边框
table-condensed 表格更加紧凑
状态类 通过这些状态类可以为行或单元格设置颜色
active 鼠标悬停在行或单元格上时所设置的颜色
success 标识成功或积极的动作(浅绿)
info 标识普通的提示信息或动作(浅蓝)
warning 标识警告或需要用户注意(淡黄)
danger 标识危险或潜在的带来负面影响的动作(淡红)

表单样式

链接:表单样式官网说明

class值 作用
form-control 设置宽度为100%并美化

按钮

链接:按钮详细说明

class值 作用
btn 按钮样式
颜色
btn-default 默认样式
btn-primary 蓝色(首选项)
btn-success 绿色(成功)
btn-info 浅蓝(一般信息)
btn-warning 黄色(警告)
btn-danger 红色(危险)
尺寸
btn-lg 大按钮
btn-sm 小按钮
btn-xs 超小尺寸
btn-block 拉伸至父元素100%的宽度,并变为了块级元素

图片

链接:图片详细说明

class值 作用
img-rounded 图片四个角变圆滑
img-circle 图片border-radius设为50%
img-thumbnail 图片有个边框

组件

链接:组件

更多图标http://www.fontawesome.com.cn/

JS效果

链接:JS效果

posted @ 2022-05-02 18:52  Yume_Minami  阅读(403)  评论(0编辑  收藏  举报