//警告框 使用类名 alert 使用方法:颜色有8个, 需要额外添加类名 alert-primary/success/danger 等 <div class="container"> <div class="alert alert-primary"> // 这里面可以添加额外的内容, 链接,随心所欲等 </div> </div> 可以关闭的警告框: 使用类名 close(含有关闭的样式) alert-dismissable(定位样式) fade show (含有动画效果,两个需要同时添加) data-dismiss 是用于js交互的 使用方法: <div class="container"> <div class="alert alert-warning alert-dismissable"> 这是一个可以关闭的警告框,但是需要以用jquery和bootstrap.js <button class="close" data-dismiss="alert">×</button> </div> </div> 方法: alert('close') 需要手动选中dom来主动触发 事件: close.bs.alert 当close方法执行的时候触发 closed.bs.alert 当警告框关闭了的时候触发 // 徽章 使用span badge 颜色8个 badge-primary/success/info 等 徽章的字体大小取决于父级的大小, 默认大小.75rem 使用方法: <div class="container"> <div class="row"> <div class="badge primary"></div> </div> </div> 在按钮中使用徽章: <div class="container"> <div class="row"> <button class="btn btn-primary">在按钮中使用徽章<span class="badge badge-light">徽章</span></button> </div> </div> 胶囊徽章: 使用类名 badge-pill 链接徽章:只要使用<a class='badge badge-primary'></a> // 面包屑导航 使用类名 d-block(默认弹性盒子,所以要变) breadcrumb breadcrumb-items 使用方法: <div class="container"> <div class="row d-block"> <nav> <ol class="breadcrumb"> <li class="breadcrumb-itme"><a href="#">首页</a></li> <li class="breadcrumb-itme"><a href="#">关于我们</a></li> <li class="breadcrumb-itme active">联系我们</li> </ol> </nav> </div> </div> // 按钮 使用标签button 使用类名 btn 颜色8种 如 btn-primary/success/info 等 使用方法: <div class="container"> <button class="btn btn-primary">按钮</button> </div> 其他类型的按钮 <div class="container"> //a标签按钮 会含有hover的样式 <a href="*" class="btn btn-primary">a标签按钮</a> // 重置按钮 <button type='reset' class='btn btn-secondary'>重置</button> //input按钮 <input type='button' class='btn btn-primary'> // 带边框的按钮 带有边框,hover效果 btn-outline-primary/info 等 <button class="btn btn-outline-primary">按钮</button> // 按钮尺寸 使用类名 btn-lg 大按钮 btn 正常按钮 btn-sm 小按钮 // block 类型按钮 使用类名 btn-block 使用后沾满一行,成为一个块级元素 // 启用于禁用按钮 a标签使用类名 active(active) disabled(停用) button使用disabled属性 // 切换按钮的状态 通过data-toggle='button'来实现 使用方法: <button class='btn btn-primary active' data-toggle='button'></button> </div> // 选项卡的效果 <div class="row"> <button class="btn-group btn-group-toggle" data-toggle='buttons'> <label class='btn btn-success active'> <input type="radio" name='options' checked>Active </label> <label class='btn btn-success active'> <input type="radio" name='options'>Active1 </label> <label class='btn btn-success active'> <input type="radio" name='options'>Active2 </label> </button> </div> // 按钮组 使用类名btn-group 使用方法: <div class="row"> <div class="btn-group"> <button class="btn btn-primary">第1个按钮</button> <button class="btn btn-primary">第2个按钮</button> <button class="btn btn-primary">第3个按钮</button> </div> </div> // 按钮组集合 使用类名 btn-group-toolbar // 按钮组大小 btn-group-lg(大) btn-group(正常) btn-group-sm(小) // 下拉菜单 dropdown-toggle(显示下拉三角形) dropdown-menu dropdown-item 使用方法 <div class="btn-group"> <button class="btn btn-group dropdown-toggle" data-toggle='dropdown'>下拉菜单</button> <div class="dropdown-menu"> <a href="#" class="dropdown-menu">1下拉菜单</a> <a href="#" class="dropdown-menu">下拉菜单2</a> </div> </div> // 按钮组垂直排列 使用类名 btn-group-vertical