bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结

简介: bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
    //警告框 使用类名 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">&times;</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  


相关文章
|
19小时前
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
|
19小时前
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `&lt;a&gt;`、`&lt;button&gt;` 或 `&lt;input&gt;` 元素。
|
19小时前
Bootstrap5 按钮3
块级按钮通过 `.btn-block` 类实现,通常用于全宽布局。父级元素需添加 `.d-grid` 类。多个块级按钮间可使用 `.gap-*` 类设置间距。
|
5月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。
48 1
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(九):折叠 & 导航
Bootstrap 5 保姆级教程(九):折叠 & 导航
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
Bootstrap 5 保姆级教程(五):按钮组 & 徽章
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
64 0
|
前端开发 容器
|
前端开发 容器