你的位置:首页 > Java教程

[Java教程]第 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"才能有效。对于菜单部分,设置 才能自动隐藏并添加固定样式。设置 表示箭头,可上可下。
//设置向上触发

<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 color: #ff0000;">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>中并没有实现 ,通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个 即可。

//设置按钮组垂直排列

<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>声明。
//群组按钮下拉菜单

<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">