bootstrap --下拉组件 按钮组 按钮工具栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--媒体查询-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--禁止缩放-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <<title></title>

    <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:// -->
    <!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
    <!--[if lt IE 9]
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    -->

</head>
<body>

    <!--
    ' 下拉菜单:内部用ul li btn实现
      使用方法:首先要有一个容器,且class为 dropdown
                然后添加下拉btn, 然后用ul li组成列表
    -->
    <div class="dropdown">
        <!--btn btn-default dropdown-toggle 固定写法(可以修改按钮的样式) ;  data-toggle="dropdown":指定为dropdown按钮-->
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <!--指定向下的三角形-->
            <span class="caret"></span>
        </button>
        <!--dropdownMenu1 要与btn的ID保持一样-->
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <!--li为固定写法,必须要在li上面指定角色为:presentation-->
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation" class="dropdown-header"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"  class="divider" ><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
    <!--
     可以在下拉菜单中添加标题和分割线:
       添加标题:只需要在对应的li上面添加 class="dropdown-header",就能成为标题
       分割线:的对应的li上面添加 class="divider" ,就能显示分割线
       禁用菜单选项:在对应的li上面添加 class="disabled",该li将不可点击
    -->

  <!--
      按钮组:针对多个按钮(两端圆角,中间的为直角)
      用法:首页要一个容器,并指定: class="btn-group"
            然后将按钮放到容器即可

      如何控制按钮组的大小:
           在容器上面指定class:.btn-group-*
  -->
    <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" class="btn btn-default">向左</button>
        <button type="button" class="btn btn-danger">中间</button>
        <button type="button" class="btn btn-info">向右</button>
        <button type="button" class="btn btn-default">向左</button>
        <button type="button" class="btn btn-primary">中间</button>
        <button type="button" class="btn btn-info">向右</button>
    </div><br/><br/>

    <!--
     按钮工具栏:实际上是按钮组的组,里面的按钮分组,外面再分组  (每一组有个默认的距离)
     用法:首先准备一个容器,并指定容器的 class="btn-toolbar"
           然后就可以容器里面放按钮组了
     -->
    <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">向左</button>
            <button type="button" class="btn btn-danger">中间</button>
            <button type="button" class="btn btn-info">向右</button>
       </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-primary">中间</button>
            <button type="button" class="btn btn-info">向右</button>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-primary">中间</button>
            <button type="button" class="btn btn-info">向右</button>
        </div>
    </div>

    <!--
      按钮组的嵌套:
         只须把 .btn-group 放入另一个 .btn-group 中。
    -->
    <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-expanded="false">
                Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

    <!--
      按钮组的垂直排列:只需要在容器上面指定class为class="btn-group-vertical"即可
    -->

    <!--
       两端对齐(容器有多大,按钮组就有多大):
       指定最外面的容器为:btn-group btn-group-justified
       然后向容器添加btn-group
    -->
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Left</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Middle</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Right</button>
        </div>
    </div>
   <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
   <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   <!-- 加载Bootstrap核心库 -->
   <script src="js/bootstrap.min.js"></script>


</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值