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  


相关文章
|
16天前
Bootstrap5 徽章(Badges)1
Bootstrap5 徽章(Badges)用于突出显示新的或未读的项。通过在 `&lt;span&gt;` 元素上添加 `.badge` 类和颜色类(如 `.bg-secondary`),可以轻松创建徽章。
|
15天前
Bootstrap5 徽章(Badges)4
徽章可以嵌入到其他元素中,如按钮。
|
15天前
Bootstrap5 徽章(Badges)3
药丸形状徽章通过添加 `.rounded-pill` 类实现圆角效果。结合不同的背景色类(如 `bg-default`、`bg-primary` 等),可以创建多种样式。
|
15天前
Bootstrap5 徽章(Badges)2
以下是各种颜色类型的徽章示例,包括主要、次要、成功、危险、警告、信息、浅色和深色等不同风格的徽章。
|
16天前
Bootstrap5 按钮组5
按钮组可以将多个按钮并列显示在同一行上,
|
16天前
Bootstrap5 按钮组4
这是一个垂直按钮组示例,包含三个按钮:Apple、Samsung 和 Sony。其中 Sony 按钮是一个下拉菜单,包含 Tablet 和 Smartphone 两个选项。
|
4天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状,使界面更加美观。通过添加 `.nav-justified` 类,可以使导航项等宽对齐,适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航,而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。
Bootstrap5 导航2
导航对齐方式:使用 `.justify-content-center` 类可使导航居中显示,使用 `.justify-content-end` 类可使导航右对齐。垂直导航:使用 `.flex-column` 类可创建垂直导航。