bootstrap-btn_group按钮组和嵌套

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- 1.加载Bootstrap层叠样式表 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- 按钮工具栏 -->
    <div class="btn-toolbar" role="toolbar" aria-label="...">

        <!-- 按钮组,btn-group-*调节按钮组中按钮大小 -->
        <div class="btn-group btn-group-sm" role="group" aria-label="...">
          <button type="button" class="btn btn-default">1</button>
          <button type="button" class="btn btn-info">2</button>
          <button type="button" class="btn btn-warning">3</button>
        </div>

        <!-- 按钮组 -->
        <div class="btn-group btn-group-lg" role="group" aria-label="...">
          <button type="button" class="btn btn-default">4</button>
          <button type="button" class="btn btn-info">5</button>
          <button type="button" class="btn btn-warning">6</button>
        </div>

    </div>

    <!-- 嵌套 -->
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>

        <!--下拉菜单按钮组 -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown 1</a></li>
              <li><a href="#">Dropdown 2</a></li>
            </ul>
        </div>

    </div>

    <!-- 2.加载JQuery库 -->
    <script src="../JQ/jquery-1.12.4.min.js"></script>
    <!-- 3.加载Bootstrap核心js -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

时间: 2024-10-25 19:04:58

bootstrap-btn_group按钮组和嵌套的相关文章

Bootstrap学习 按钮组

把一系列的.btn按钮放入.btn-group中即可... <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button>

Bootstrap 关于按钮组

当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定 container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)? 对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar". 按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的 role 属性,我们使用 aria-label,但是, aria-labelledby

Bootstrap&lt;基础十三&gt; 按钮组

原文:Bootstrap<基础十三> 按钮组 按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述 代码示例 .btn-group 该 class 用于形成基本的按钮组.在 .btn-group 中放置一系列带有 class .btn 的按钮. <

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 按钮(Button)插件单选按钮</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstr

Bootstrap按钮组嵌套、垂直排列、两端对齐

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

BootStrap 按钮组简单介绍

学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdown-menu 和属性 data-toggle="dropdown"; 1:基本按钮组,仅仅一个 btn-group 就 OK 了. 1 <span class="btn-group " > 2 <button class="btn btn-p

Bootstrap按钮组学习

简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角). 确保设置正确的 role 属性并提供一个 label 标签 为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合

BootStrap学习(2)_下拉菜单&amp;按钮组

一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

bootstrap按钮组

种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div> <div class="btn-group"> <button class="btn btn-primary">按钮2</button> </div> <div class="btn-group&