关闭

[学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)

标签: bootstrap
917人阅读 评论(0) 收藏 举报
分类:

布局组件

下拉按钮

        <div class="dropdown">
            <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown">
                帮助<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#"> 关于我们 </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" href="#"> 关于我们 </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" href="#"> 关于我们 </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" href="#"> 关于我们 </a>
                </li>
            </ul>
        </div>

要构建一个下拉菜单,首先,需要一个div加class(dropdown)来包容所有代码(不然下拉菜单定位找不到),然后在加一个触发下拉菜单的按钮(或者a标签),再加一个下拉菜单ul

触发者样式: .dropdown-toggle ; 属性:data-toggle=”dorpdown”

菜单样式: .dropdown-menu 属性:role=”menu” aria-labelledby=’id’

其他:role=”presentation”; role=”menuitem”

样式: .divider 分割线; .dropdown-header:下拉菜单头部(不可点击); .dropdown-menu-right:向右对齐的菜单; .dropup:上拉样式(给父类容器添加)

按钮组

<div class="btn-group" role="toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
    </div>
        <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
        <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">按钮 7</button>
        <button type="button" class="btn btn-default">按钮 8</button>
        <button type="button" class="btn btn-default">按钮 9</button>
    </div>
</div>

由多个按钮组构成的一个toolbar!

每个按钮组由一个div容器加 .btn-group样式构成(同时可以搭配大小等其他样式)

每个按钮组中由几个按钮组成

利用按钮组和单独的下拉菜单构成分割下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul>
</div>
0
0
查看评论

BootstrapTable 实现toolbar删除操作

说明:操作前必须导入jquery.js、bootstrap.js和boostrapTable.min.js1、DIV数据:<div class="content"> <div class="table-responsive"> ...
  • lovoo
  • lovoo
  • 2016-11-08 15:43
  • 18103

bootstrap-table的toolbar用法自定义增删改查工具容器

bootstrap-table的toolbar用法自定义增删改查工具容器
  • qq_36073929
  • qq_36073929
  • 2017-04-12 10:55
  • 1380

Bootstrap Table使用整理(四)-工具栏

一、启用默认支持的工具栏 /* * data-search 是否显示搜索框 * data-show-refresh 是否像是刷新按钮,注:刷新操作会重新请求数据,并带着请求参数 * data-show-toggle 是否显示面板切换按钮 * data-show-columns 是否显示列控制按钮 ...
  • u011127019
  • u011127019
  • 2017-06-08 18:48
  • 4565

Bootstrap 下拉框 按钮组、工具栏

1.下拉框 <button class="btn btn-primary" type="button" data-toggle="dropdown"> //下拉框触发器    Dropdown  ...
  • u014715974
  • u014715974
  • 2016-03-16 11:09
  • 715

Bootstrap组件---下拉菜单,多级菜单 ,按钮

下拉菜单        ,dropdown(.dropup改变这个是上显示)   data-toggle="dropdown" (激活文本处)      .dropdown-menu ...
  • GQ_cyan
  • GQ_cyan
  • 2016-09-08 19:32
  • 14580

[学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)

布局组件下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle=&qu...
  • guddqs
  • guddqs
  • 2017-01-03 11:56
  • 917

深入理解BootStrap -- 按钮组工具栏9

1、按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。 源码查询: 按钮组也是一个独立的组件,所以可以...
  • z742182637
  • z742182637
  • 2016-01-06 09:30
  • 790

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

<!-- 为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。 --> --> <!--[if lt IE 9] ...
  • PZ0605
  • PZ0605
  • 2015-05-17 14:15
  • 1193

Bootstrap CSS——按钮组以及带下拉菜单的按钮组

http://v3.bootcss.com/components/#btn-groups mark<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8...
  • u011350527
  • u011350527
  • 2015-10-05 21:31
  • 320

bootstrap自定义功能按钮

在bs中,都有用过.btn-defaule 或者 .btn-primary ,我们也可以自定义我们想要的按钮效果。(1)准备一组新的按钮变量,在 bs,less文件中,打开variables.less,可以看到原始的一些数据,@btn-danger-color: #fff...
  • wstpa
  • wstpa
  • 2016-01-08 13:47
  • 1808
    个人资料
    • 访问:26790次
    • 积分:772
    • 等级:
    • 排名:千里之外
    • 原创:50篇
    • 转载:2篇
    • 译文:0篇
    • 评论:16条
    最新评论