boostrap知识框架总结分享
2022-10-13 10:44:15 0 举报
AI智能生成
登录查看完整内容
boostrap知识框架总结分享
作者其他创作
大纲/内容
可配置尺寸
可配置动画
模态框
下拉菜单
滚动监听
Tooltip
弹出窗
.alert警告窗
.collapse的元素会隐藏
通过data-toggle='collapse'和data-target来触发显示隐藏
Collapse
轮播Carousel
插件
.col-lg-
.col-md-
.col-xs-
.col-sm-
.row
.container / .container-fluid
栅格系统
普通标签页 .nav-tabs
胶囊标签页 .nav-pills
垂直排列 .nav-stacked
两端对齐 .nav-justified
.navbar-left .navbar-right
推荐使用li内嵌a标签
.disabled 改变外观,不改变功能,a标签仍可点击跳转
标签页
导航 .nav
.media-left
.media-right
.media-top
.media-middle
.media-bottom
对齐
.media图文混合
翻页组件
.progress-bar-success
.progress-bar-warning
背景色
.progress-bar-striped
.active添加动画
条纹
样式
.progress-bar 子类
.progress进度条
利用:empty隐藏所有空内容
.badge 未读消息
组件
.text-center/.text-left/.text-right
.
文字
.clearfix清除浮动
.center-block居中
,col-x-offset-1:左偏移1个单位距离
布局
.show
.hide
.invisible
显示隐藏
其它
.btn-info
.btn-default
.btn-warn
.btn-success
.btn-link
颜色
.btn-lg
.btn-sm
.btn-xs
尺寸
样式代码
关闭按钮(模态框)
按钮 .btn
居中,使用 .center-block(不要使用text-center)
原理:max-width:100%;height:auto;display:block
响应式图片 .img-responsive
圆角 .img-rounded
圆形 .img-circle
缩略图 .img-thumbnail
形状
图片
带边框 .table-bordered
条纹 .table-striped
.table-hover
.table-condensed紧凑表格
响应式表格:给.table父级添加.table-responsive
表格 .table
.form-group
.form-horizon
.form-inline
布局方式
.checkbox
.checkbox-inline
.disabled禁用
checkbox父级标签
.radio
.radio-inline
radio父级标签
.has-success
.has-warning
.has-error
表单验证 .has-feedback
.input-lg
.input-sm
表单控件
.form-group-lg
.form-group-sm
表单组控件
高度设置
表单类
表单元素
基础类
boostrap知识框架总结分享
0 条评论
回复 删除
下一页