Bootstrap组件介绍
一、下拉菜单
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
1、实例
将下拉菜单触发器和下拉菜单都包裹在 .dropdown
里,或者另一个声明了 position: relative;
的元素。然后加入组成菜单的 HTML 代码。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的
aria-labelledby:当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:
当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”
data-toggle: 表示什么事件类型发生
二、按钮式下拉菜单
把任意一个按钮放入 .btn-group
中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
1、单按钮下拉菜单
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
鼠标指向时,显示背景颜色。
2、分裂式下拉菜单
只是多一个分开的按钮。
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
可以看到分成了左右两个按钮。
三、面板
某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。
1、基本实例
默认的 .panel
组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
显示效果:
2、带标题的面板
通过 .panel-heading
可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title
类的 <h1>
-<h6>
标签,添加一个预定义样式的标题。不过,<h1>
-<h6>
标签的字体大小将被 .panel-heading
的样式所覆盖。
为了给链接设置合适的颜色,务必将链接放到带有 .panel-title
类的标题标签内。
Bootstrap组件介绍的更多相关文章
- Blazor Bootstrap 组件库语音组件介绍
Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...
- Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍
地理定位/移动距离追踪组件 通过浏览器 API 获取定位信息 DEMO https://www.blazor.zone/geolocations 小提示 注意: 出于安全考虑,当网页请求获取用户位置信 ...
- Blazor Bootstrap 组件库浏览器通知组件介绍
通知组件 通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户. DEMO https: ...
- Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- Bootstrap框架介绍
Bootstrap框架介绍 一.Bootstarp环境部署 1>.什么是Bootstartp框架 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架.它 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
随机推荐
- 关于fatal error LINK1123:failure during conversion to COFF:file invalid or corrupt
今天用Visual Studio 2010编译postgresql工程时突然遇到下面这个编译错误: fatal error LINK1123:failure during conversion to ...
- 解决vs code中golang插件依赖安装失败问题
解决vs code中golang插件依赖安装失败问题 Installing github.com/nsf/gocode SUCCEEDED Installing github.com/uudashr/ ...
- Maven学习笔记(二)—— 整合SSH框架
一.知识点准备 1.1 什么是依赖传递? 我们只添加一个struts2-core的依赖,结果会发现所有关于struts2的依赖都进来了. 因为我们的项目依赖struts2-core-2.3.24.ja ...
- 天梯赛easy题
2 #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> ...
- 中间件使用之(UA,IP,selenium)的使用
一.UA池:User-Agent池 - 作用:尽可能多的将scrapy工程中的请求伪装成不同类型的浏览器身份. - 操作流程: 1.在下载中间件中拦截请求 2.将拦截到的请求的请求头信息中的UA进行篡 ...
- 【研究】Struts2-052漏洞
漏洞描述: CVE-2017-9805 2017年9月5日,Apache Struts官方发布最新的安全公告称,Apache Struts 2.5.x的REST插件存在远程代码执行高危漏洞,漏洞编号为 ...
- MySql——安装与配置与启动和停止
在Linux上安装mysql数据库,我们可以去其官网上下载mysql数据库的rpm包,http://dev.mysql.com/downloads/mysql/5.6.html#downloads,大 ...
- Oracle RAC集群搭建(一)-ASM共享存储卷
01, ASM共享存储卷 安装集群的话,必须要有共享磁盘,目的是为作裁决磁盘使用.还需要有数据文件的共享磁盘 02,规划 主机 裁决磁盘 数据 rac1 1G*1 20 ...
- pjsip与QT进行适配
pjsip是纯C语言写的一个sip协议库,整个代码写得还是比较模块化的,得益于此的设计,只要理解了pjsip的设计,就可以对其网络层进行扩展. 我们项目是QT作为主要开发工具,而PJSIP的库默认是利 ...
- (转)CentOS6/7 使用saltstack源安装saltstack
CentOS6/7 使用saltstack源安装saltstack 原文:https://blog.csdn.net/wh211212/article/details/77053708 CentOS ...