登录免费注册



boostrap

首页  思维导图  详情



boostrap

2017-03-29 19:54:56   49  举报





AI智能生成

bootstrap简单总结

前端

bootstrap

前端开发

模版推荐

作者其他创作

大纲/内容

插件

模态框

可配置尺寸

可配置动画

下拉菜单

滚动监听

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

 Collect

Get Started

架构图

 Collect

Get Started

Web前端开发学习流程分享

boostrap知识框架总结分享

 Collect

Get Started

boostrap知识框架总结分享

 Collect

Get Started

SMM整体架构实现













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document