第 7 章 图标菜单按钮组件

学习要点:

1.小图标组件
2.下拉菜单组件
3.按钮组组件
4.按钮式下拉菜单

主讲教师:李炎恢

本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件、下拉菜单组件和各种按钮组件。

一.小图标组件
Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件链接:http://v3.bootcss.com/components/#glyphicons。

部分图标如下:

可以使用<i>或<span>标签来配合使用,具体如下:
//使用小图标

<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span>

//也可以结合按钮

<button class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn">
    <span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star"></span>
</button>

二.下拉菜单组件
下拉菜单,就是点击一个元素或按钮,触发隐藏的列表显示出来。
//基本格式

<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">资讯</a>
        </li>
        <li>
            <a href="#">产品</a>
        </li>
        <li>
            <a href="#">关于</a>
        </li>
    </ul>
</div>

按钮和菜单需要包裹在.dropdown 的容器里,而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分,设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头,可上可下。
//设置向上触发

<div class="dropup">

//菜单项居右对齐,默认值是 dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right">

//设置菜单的标题,不要加超链接

<li class="dropdown-header">网站导航</li>

//设置菜单的分割线

<li class="divider"></li>

//设置菜单的禁用项

<li class="disabled"><a href="#">产品</a></li>

//让菜单默认显示

<div class="dropdown open">

三.按钮组组件
按钮组就是多个按钮集成在一个容器里形成独有的效果。
//基本格式

<div class="btn-group">
    <button type="button" class="btn btn-default">
        左
    </button>
    <button type="button" class="btn btn-default">
        中
    </button>
    <button type="button" class="btn btn-default">
        右
    </button>
</div>

//将多个按钮组整合起来便于管理

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            左
        </button>
        <button type="button" class="btn btn-default">
            中
        </button>
        <button type="button" class="btn btn-default">
            右
        </button>
    </div>

    <div class="btn-group">
        <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>

//设置按钮组大小

<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">

//嵌套一个分组,比如下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default">
        左
    </button>
    <button type="button" class="btn btn-default">
        中
    </button>
    <button type="button" class="btn btn-default">
        右
    </button>
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">资讯</a>
            </li>
            <li>
                <a href="#">产品</a>
            </li>
            <li>
                <a href="#">关于</a>
            </li>
        </ul>
    </div>
</div>

注意:这里<div>中并没有实现 class="dropdown",通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个 class="dropdown-toggle"即可。

//设置按钮组垂直排列

<div class="btn-group-vertical">

//设置两端对齐按钮组,使用<a>标签

<div class="btn-group-justified">
    <a type="button" class="btn btn-default">左</a>
    <a type="button" class="btn btn-default">中</a>
    <a type="button" class="btn btn-default">右</a>
</div>

//如果需要使用<button>标签,则需要对每个按钮进行群组

<div class="btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            左
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            中
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            右
        </button>
    </div>
</div>

四.按钮式下拉菜单
这个下拉菜单其实和第二个知识点一样,只不过,这个是在群组里,不需要<div>声明class="dropdown"。
//群组按钮下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">资讯</a>
        </li>
        <li>
            <a href="#">产品</a>
        </li>
        <li>
            <a href="#">关于</a>
        </li>
    </ul>
</div>

//分裂式按钮下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default">
        下拉菜单
    </button>
    <button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">资讯</a>
        </li>
        <li>
            <a href="#">产品</a>
        </li>
        <li>
            <a href="#">关于</a>
        </li>
    </ul>
</div>

//向上弹出式

<div class="btn-group dropup">
时间: 2024-11-05 11:56:48

第 7 章 图标菜单按钮组件的相关文章

第二百三十七节,Bootstrap图标菜单按钮组件

Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组件和各 种按钮组件. 一.小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/components/#glyphicons.

第二百零七节,jQuery EasyUI,MenuButton(菜单按钮)组件

jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法,这个组件依赖于 Menu(菜单)组件和 LinkButton(按钮)组件. 一.加载方式 class 加载方式 <a href="javascript:void(0)" id="edit" class="easyui-menubutton"

第7章 图标菜单和按钮组件

本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组件和各 种按钮组件. 一.小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/components/#glyphicons.部分图标如下: 部分图标 可以使用<i>或<span>标签来配合使用,具体如下: //使用小图标 <i class="glyphicon glyphicon-st

我的第一个开源组件:一个抹出来的快捷菜单按钮

最近看到一种快捷菜单按钮,是按一个钮,在其周围弹出若干个钮,并排在圆周上.再按圆心处按钮则收回弹出的按钮. 我认为这里值得改进的地方有: 1.最初得有一个按钮浮现,这个按钮有点占地方. 2.当用户放弃操作时,用户需要再按一下按钮来收回弹出的按钮.这个动作有点多余. 我认为精简一个动作和少占一个地方都有极大的价值,所以我设计的快捷按钮是: 1.平时不占任何空间,通过手势唤出. 2.放弃操作时不需要用户操作,这样用户动作最少. 操作时,用户手指一抹就带出一排菜单按钮,用户手指不离开屏幕则按钮一直保持

QT开发(七)——QT按钮组件

QT开发(七)--QT按钮组件 QT中有六种按钮组件,分别是按压按钮QPushButton.工具按钮QToolButton.单选按钮QRadioButton.多选按钮QCheckBox.命令链接按钮QCommandLinkButton.按钮盒QButtonBox. 一.QPushButton组件 1.QPushButton组件简介 QPushButton组件用于接受用户点击事件,能够显示提示字符串,是功能性组件,需要父组件作为容器,能够在父组件中进行定位,用于执行命令或触发事件. QPushBu

Bootstrap 字体图标,下拉列表组件的使用

Bootstrap 字体图标,下拉列表组件的使用 Glyphicons 字体图标 通过代码可以看到图标类的使用方法,图标类不能和其它组件直接联合使用,图标类只能应用在不包含任何文本内容或子元素的元素上.所以一般在Button的text前面搞一个span标签,用来渲染图标. aria-label:有的图标可以没有文本,此时可以在代码中通过aria-label这个属性来表明图标的含义,比如这里的"左对齐". aria-hidden:设置其为true,表示图标只是为了装饰之用,避免读取设备的

JAVA学习Swing章节按钮组件JButton的简单学习

package com.swing; import java.awt.Container; import java.awt.Dimension; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.net.URL; import javax.swing.Icon; import javax.swing.ImageIcon;

jQuery Easy UI LinkButton(按钮)组件

LinkButton(按钮)组件,easyui基础组件之一 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></s

雷林鹏分享:jQuery EasyUI 菜单与按钮 - 创建菜单按钮

jQuery EasyUI 菜单与按钮 - 创建菜单按钮(Menu Button) 菜单按钮(Menu Button)包含一个按钮(button)和一个菜单(menu)组件,当点击或移动鼠标到按钮上,将显示一个对应的菜单. 为了定义一个菜单按钮(Menu Button),您应该定义一个链接按钮(Link Button)和一个菜单(menu),下面是一个实例: Edit Help Undo Redo Cut Copy Paste Delete Select All Help Update Abou