【技术分享】Bootstrap之进阶组件篇(1)
本篇介绍主要介绍字体图标、下拉菜单，按钮组的使用，全面的剖析按钮组的使用。
Glyphicons字体图标
字体图标-类介绍
使用字体图标前需要引用 基类+图标类class="glyphicon glphico-search",其中glyphicon为基类，glphico-search为图标类glyphicon共有约250个字体图标供Bootstrap免费使用，详见 https://v3.bootcss.com/components/#btn-groups
展示部分图标
创建字体图标示例
<div class="container"> <div> 邮件图标 <span class="glyphicon glyphicon-envelope "></span><br /> 垃圾桶 <span class="glyphicon glyphicon-trash"></span> </div> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home </button> </div>
小结
字体图标需要引用字体文件，必须确保字体文件目录与
bootstrap引用文件在一个同级的目录，默认将通过../fonts这个路径去寻找字体文件。如果字体文件加载不成功，图标字体将不会显示，请检查你的Bootstrap是否为以下结构：css （bootstrap目录）
fonts (图标字体目录)
Bootstrap
图标类一般使用独立标签元素包裹，例如
<span class="glyphicon glphico-..."></span>，不建议与其他组件混合使用图标类只能用在不包含任何文本内容或子元素的标签中，如必须和文本在一起的话，两者之间需要添加一个空格，以确保正确的展示效果。
下拉菜单
下拉菜单-类介绍
dropdown-header 菜单中 标题效果，可用于菜单分组
divider 菜单中 分割线
disabled 菜单中 禁用状态
.dropup 下接菜单基础类，向上弹出
.open 展开菜单效果
.dropdown-menu-right 下拉菜单专用的 右对齐辅助类
.dropdown 下拉菜单基础类，向下弹出
.dropdown-menu 下拉菜单弹出区域样式
data-toggle 触发事件如 modal，popover，tooltips，dropdown等
创建下拉菜单示例
菜单所有代码要包裹在
.dropdown类中,一般使用<div>菜单按钮使用
<a>、<button>，使用.dropdown-toggle类和data-toggle="dropdown"属性菜单内容使用
<ul>、<li>，使用.dropdown-menu
<div class="container"> <p>button标签</p> <div class="dropdown"> <!--dropdown open--> <!--.dropup--> <button class="btn btn-default dropdown-toggle" type="button" 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 class="divider"></li> <li><a href="#">查询</a></li> </ul> </div> </div> </div> <br/> <div class="container"> <p>a标签</p> <div class="dropdown "> <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown" > 用户管理 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class=""><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> </div>
小结
下拉菜单按钮官方推荐的是
<a>、<button>作为载体，其实用<span>、<div>这些也是可以下拉菜单默认自动沿父元素上沿和左则定位为100%宽度，为
.dropdown-menu添加.dropdown-menu-right类可让菜单右对齐，不再建议使用.pull-right如果菜单所有代码包裹在
dropup类中，菜单则为向上展开的形式，与.open类组合使用，如class="dropup open"不用点击菜单将一直处于向上展开状态使用
caret类的元素会出现箭头，可以根据.dropdown和.dropup显示两种不同的简头方向.dropdown-menu中可使用.disabled、.divider、.dropdown-header来设计菜单展示效果
按钮组
通过按钮组容器可以组合按钮创建出新的按钮组件
按钮组-类介绍
.btn按钮基类.btn-group按钮容器基类.btn-group-*按钮大小控制，.btn-group-lg大按钮、.btn-group-sm中等按钮、.btn-group-xs小按钮container:'body'属性如在提示或弹出框工具类中使用按钮组（如Modal、tooltip时）必选加此参数增强兼容性.btn-toolbar按钮组工具栏效果辅助类，与.btn-group组合使用可创建更复杂效果的按钮组件.btn-group-vertical垂直排列按钮组内的按钮.btn-group.btn-group-justified两端对齐排列按钮组内的按钮
创建按钮组
.btn-group中包裹<button>标签
<div class="container" style="padding:10px 0px;"> <p>.btn-group 按钮组</p> <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>
创建按钮组工具栏
.btn-toolbar中包裹.btn-group和<button>标签.btn-group-xs这是一个小按钮的效果展示
<div class="container" style="padding:10px 0px;"> <p>.btn-toolbar 工具栏</p> <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 btn-group-xs"> <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> <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> </div>
按钮组工具栏嵌套效果
在
.btn-group中嵌套.btn-group可以建立混合效果的按钮工具栏
<div class="container" style="padding:10px 0px;"> <p>.btn-toolbar 工具栏嵌套 下拉菜单按钮</p> <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> <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 class="btn-group"> <div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 数据节点 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">1号源</a></li> <li><a href="#">2号源</a></li> <li><a href="#">3号源</a></li> </ul> </div> </div> <div class="btn-group"> <div class="dropdown "> <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown"> 用户管理 <span class="caret"></span> </a> <ul class="dropdown-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> </div> </div> </div>
创建垂直排列的按钮组
按钮组包裹在
.btn-group-vertical类中即可将按钮垂直排列不支持分裂式按钮下拉菜单的垂直排列
<div class="container"> <div class="btn-group-vertical"> <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 type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 数据节点 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">1号源</a></li> <li><a href="#">2号源</a></li> <li><a href="#">3号源</a></li> </ul> </div> <button type="button" class="btn btn-default">居中</button> <button type="button" class="btn btn-default">右对齐</button> <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="#">1号源</a></li> <li><a href="#">2号源</a></li> <li><a href="#">3号源</a></li> </ul> </div> </div> </div>
创建两端对齐排列的按钮组
让按钮组填满父元素的宽度
在<a>标签中
在
.btn-group按钮组类中使用.btn-group.btn-group-justified即可
在<button> 标签中
在
.btn-group按钮组类中使用.btn-group.btn-group-justified即可将每个按钮单独用
.btn-group包裹
<div class="container" > <p>两端对齐排列按钮组-a标</p> <div style="width:800px;"> <div class="btn-group btn-group-justified"> <a class="btn btn-default">左对齐</a> <a class="btn btn-default">居中</a> <a class="btn btn-default">右对齐</a> </div> </div> <p>两端对齐排列按钮组-button</p> <div style="width:800px;"> <div class="btn-group 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>
小结：
.btn-group可视为按钮组基类，创建按钮组时必须使用的类.btn-toolbar这个类当做工具类使用即可，注意将按钮与下拉菜单组合成新的按钮工具栏时，要使用.btn-group嵌套，每个下拉菜单都包裹在.btn-group以获得最佳的排列效果
按钮式下拉菜单
<div class="container" style="height:300px;"> <p>按钮式下拉菜单</p> <div class="btn-group"> <button class="btn btn-danger dropdown-toggle" type="button" 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 class="divider"></li> <li><a href="#">查询</a></li> </ul> </div> </div>
小结：
将下拉菜单放入
.btn-group中就可以建立一个“单按钮下拉菜单”
分裂式下拉菜单
<div class="container" style="height:300px;"> <p>分裂式按钮下拉菜单</p> <div class="btn-group"> <button type="button" class="btn btn-danger">用户管理</button> <button type="button" class="btn btn-danger 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 class="divider"></li> <li><a href="#">查询</a></li> </ul> </div> </div>
小结：
分裂式按钮 是通过组合两个
<button>标签，一个<button>标签做为下拉菜单名称，一个<button>中设定data-toggle属性触发dropdown事件按钮式下拉菜单按钮的大小，可以通过按钮尺寸辅助类来设置，
.btn-lg、.btn-sm、.btn-xs
本篇的重点是剖析按钮组的各种使用方法，按钮组、工具栏都是属于比较常用的组件，通过按钮组与工具栏嵌套我们可以自由组合出非常多的实用的个性组件。
Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.9.27 at home
- 点赞
- 收藏
- 关注作者
评论（0）