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