Bootstrap笔记

雨点打透心脏的1/2处 2022-06-14 07:55 204阅读 0赞

1.  .**css样式**  
    背景：bg-danger bg-primary bg-info bg-success bg-warning  
    文字：text-danger  
    文字对齐方式：text-center/right/left  
    浮动：pull-right/left 清除浮动 clearfix  
    透明度：in  
    显示/隐藏：show hide 弹出框 模态框  
    固定定位：affix  
    文字小写 text-lowercase  
    大写： text-uppercase  
    文字首字母大写：text-capitalize  
    按钮：  
    颜色：btn btn-default/danger/info  
    大中小三种按钮尺寸 ：btn-lg、.btn-sm、.btn-xs???  
    独占一行：btn-block  
    链接：btn-link  
    表格:table  
    背景色：danger/primary/info/success/warning 直接写，
    
    响应式：table-reponsive  
    table-bordered 为表格和其中的每个单元格增加边框  
    table-hover 可以让中的每一行响应鼠标悬停状态  
    table-striped可以给之内的每一样增加斑马条纹样式  
    table-condensed 类，如果想为表格添加颜色可以选择情景类，  
    表单：form-control  
    form-group form-group-lg/sm/xs  
    图片：  
    响应式：img-responsive  
    圆形：img-circle  
    缩略图：img-thumbnail  
    圆形 ：img-rounded（或者有圆角）
2.  **组件**

> **按钮组**：  
> 水平：btn-group  
> 垂直：btn-group-vertical
> 
> **表单组件**：input-group  
> 表单和文字：  
> 表单和按钮： input-group-btn  
> 表单和下拉菜单：  
> 表单和按钮和下拉菜单：  
> 表单和单选框（复选框） input-group-addon
> 
> **导航条**：navbar  
> navbar-default（默认）  
> navbar-form/nav/btn(与其相整合)  
> navbar-header navbar-brand(logo)  
> navbar-right/left  
> 折叠：navbar-collapse  
> 反色： navbar-inverse  
> 固定定位：navbar-fixed-top/bottom  
> 激活状态 active??
> 
> **导航**：nav  
> nav-tabs 表格式  
> nav-pills 胶囊式  
> nav-stacked 垂直的
> 
> **面板**：panel panel-info/success  
> panel-heading panel-title(面板标题)  
> panel-body  
> panel-footer

**well**:well
    **巨幕**：比较醒目的区块  jumbotron
    **徽章**：badge

> **分页**：pagination  
> .←  
> »  
> glyphicon-arrow-right  
> glyphicon-chcvron-left  
> >  
> **翻页**：pager
> 
> **media** sm端变上图下文 图片较大时用  
> dl dd xs移动端变上图下文 图片较小时用  
> dl: dl-horizontal 水平排列  
> figure-thumbnail figcaption-caption 上图下文  
> media-list 多个媒体组件  
> 缩略图：thumbnail
> 
> **进度条**：progress  
> 滚动：active  
> 条纹：progress-bar-striped  
> 堆叠：progress-bar-info/danger/success/warning
> 
> **列表组件**：list-group list-group-item  
> **路径导航**（面包屑）:breadcrumb
> 
> **模态框** model model-dialog model-content model-header model-body
> 
> **轮播图**： carousel id data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。  
> data-pause=”hover” 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。  
> 图片 carousel-inner a\#id  
> 圆点 carousel-indicators data-target\#id data-slide-to (0开始)  
> 箭头 carousel-control data-slide (prev next)  
> 箭头图标 glyphicon-chevron-right  
> 方法  
> .carousel(‘cycle’) 开始轮播  
> .carousel(‘pause’) 停止轮播  
> .carousel(‘prev’) 上一张  
> .carousel(‘next’) 下一张  
> .carousel(索引值)//第几张轮播  
> 事件  
> on.(‘slide.bs.carousel’,function()\{\}) 刚要轮播  
> slid.bs.carousel 完成轮播

1.  **插件**

--------------------

> **下拉菜单/弹出框/提示工具**  
> *方法*：.dropdown() /popover()/tooltip()\[ 显示show 隐藏hide() 切换 toggle \]  
> *事件*：（给父级元素）  
> show.bs.dropdown 刚一显示触发事件  
> shown.bs.dropdown 显示完毕触发  
> hide.bs.dropdown 刚要隐藏  
> hidden.bs.dropdown 隐藏完毕

--------------------

> **下拉菜单**：  
> 绑定功能：dropdown 绑定菜单加类名：dropdown-menu  
> 父元素类名: dropdown 按钮类名: dropdown-toggle  
> dropdown-header
> 
> **弹出框**：  
> 绑定功能：popover  
> 绑定目标：data-target=”\#id/.class”  
> 弹出框标题 title  
> 弹出框的内容 data-content  
> 弹出框能解析标签 data-html true  
> 弹出框触发条件 data-trigger 1.hover / 2.click(默认) / 3.focus  
> 弹出框位置：data-placement  
> 弹出框动画效果：data-animation true/false  
> 弹出框延时：data-delay 1000 (毫秒)  
> js代码 （初始化） $(‘data-toggle=”popover”’).popover()
> 
> **提示工具：**  
> title:  
> 绑定功能：tooltip  
> 位置：data-placement  
> 标题：title  
> 初始化：$(‘data-toggle=”tooltip”’).tooltip()
> 
> **警告框**  
> alert alert-info/danger  
> 关闭警告框 class=“close” data-dismiss=”alert”  
> alert-link 警告框里的链接  
> &times 错号  
> 方法：alert(“close”) js关闭警告框（先点击click）  
> 事件 ：close.bs.alert刚要关闭  
> closed.bs.alert 完全关闭
> 
> **按钮：**  
> 单个切换 data-toggle=”button”  
> 按钮组 多个切换 data-toggle=”buttons” 单选按钮消失 类似Tab切换  
> 上传 （调用js代码） class名 data-loading-text=”文件正在上传ing…*内容提示*” 可不加  
> 方法：  
> .button(“loading”) 正在加载  
> .button(“reset”) 重置

$(function(){ 
              $("class名").click(function(){ 
              var filebtn=$(this).button("loading");//存起来
               setTimeout(function(){                                         filebtn.button("reset")//重置
                                },2000)
              })
      })

> **栅格系统**  
> 容器 固定宽度 container  
> 100% container-fulid  
> 行:row  
> 列:col-(xs sm md lg)-(1-12)  
> 辅助工具 ：隐藏hidden-(xs sm md lg)  
> 列偏移：col-(xs sm md lg)-offset-(1-12)  
> 列排序：col-(xs sm md lg)-push-(1-12) 左  
> col-(xs sm md lg)-pull-(1-12) 右