zoukankan      html  css  js  c++  java
  • BootStrap【三、组件】

    特有标签属性

    • role 用于浏览器识别
    • aria-label 用于浏览器识别
    • tabIndex 用于浏览器识别
    • data- 自定义数据属性

    图标

    直接引用官方图标库中的class
    官方图标库
    Demo

    下拉菜单

    .dropdown 下拉组件,用于div
    .dropup 上拉组件,用于div(即向上弹出的菜单)
    data-toggle="dropdown" 下拉按钮绑定下拉事件
    .dropdown-menu 选项菜单,用于ul
    .dropdown-menu-right 右对齐,用于ul
    .divider 分割线,用于li
    .dropdown-header menu列表标题,用于li

    Demo

    控件组

    .input-group 控件组
    .input-group-addon 额外内容及图标
    Demo

    导航

    .nav 导航标签,用于ul
    .nav-tabs 可切换导航,用于ul
    .nav-pills 胶囊导航,用于ul
    .nav-justified 使垂直,用于ul
    注:导航中须使用a标签
    Demo

    分页

    .pagination 父元素中添加表示分页,用于ul
    .pagination-lg/sm 分页器变大、变小,用于ul
    .pager 放置在翻页区域,只是前后
    .previous 链接向左对其
    .next 连接向右对其
    Demo

    进度条

    .progress-bar 进度条
    .progress-bar-success/danger.. 改变颜色
    .progress-bar-stiped 条文
    Demo

    列表

    .list-group 列表,用于ul
    .list-group-item 列表项,用于li
    .list-group-item-success/danger.. 改变列表项颜色
    .badge 状态数,可用于任何地方的span,表示未读数量,状态数量等
    .active 选中状态
    .disabled 不可用状态
    Demo

    面板

    .panel 面板
    .panel-default 面板基本样式
    .panel-success/danger... 改变面板颜色
    .panel-heading 面板头
    .panel-body 面板内容
    .panel-footer 注脚

  • 相关阅读:
    一个极好的ALV例子
    ABAP中读取文本文件(TXT DOCUMENT)并用ALV显示
    SMARTFORM报表程序设计(3)
    FOR ALL ENTRIES IN
    SMARTFORM报表程序设计(2)
    SMARTFORM报表程序设计(1)
    ABAP用FILE_OPEN_DIALOG打开多个文件后打印出名称
    LaTeX 表格的处理 [转]
    ubuntu安装deb,rpm安装包,tar.gz的方法 [转]
    OpenGL学习入门之VS2010环境配置 [转]
  • 原文地址:https://www.cnblogs.com/shanelau/p/6858276.html
Copyright © 2011-2022 走看看