配色: 字号:
boostrap概述
2020-12-05 | 阅:  转:  |  分享 
  
boostrap2020-12-04演讲人目录1基础类2插件3栅格系统4组件5其它01基础类基础类按钮.btn图片表格.table表单元
素基础类按钮.btn2颜色关闭按钮(模态框)尺寸颜色.btn-info.btn-default.btn-info010203.b
tn-warn.btn-success.btn-link040506尺寸010203.btn-lg.btn-sm.btn-xs关闭
按钮(模态框)样式代码基础类图片响应式图片.img-responsive形状响应式图片.img-responsive居中,使用
.center-block(不要使用text-center)原理:max-width:100%;height:auto;disp
lay:block形状圆角.img-rounded圆形.img-circle缩略图.img-thumbnail基础类表格.
table样式样式带边框.table-bordered1条纹.table-striped2响应式表格:给.table父级添加.
table-responsive5.table-hover3.table-condensed紧凑表格4基础类表单元素0102布局方
式表单类布局方式010302.form-group.form-horizon.form-inline表单类checkbox父级标签
010203.checkbox.checkbox-inline.disabled禁用表单类radio父级标签010203.radi
o.radio-inline.disabled禁用表单类表单验证.has-feedback020301.has-warning.
has-error.has-success高度设置表单控件.input-lg.input-sm表单组控件.form-group
-lg.form-group-sm02插件插件模态框下拉菜单滚动监听010203Tooltip弹出窗.alert警告窗040506
插件Collapse轮播Carousel插件模态框0102可配置尺寸可配置动画插件Collapse0102.collapse的元素
会隐藏通过data-toggle=''collapse''和data-target来触发显示隐藏03栅格系统.container/
.container-fluid.row.col-lg-.col-md-.col-xs-.col-sm-04组件组件导航.nav
.media图文混合翻页组件ABC.progress进度条.badge未读消息DE组件导航.nav2123普通标签页.nav
-tabs胶囊标签页.nav-pills垂直排列.nav-stacked456两端对齐.nav-justified.navb
ar-left.navbar-right标签页标签页0102推荐使用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隐藏所有空内容05其它其它ABC文字布局显示隐藏其它文字A..text-center
/.text-left/.text-rightB其它布局03,col-x-offset-1:左偏移1个单位距离02.center-
block居中01.clearfix清除浮动其它显示隐藏010203.show.hide.invisible感谢聆听
献花(0)
+1
(本文系职场细细品原创)