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 注脚
BootStrap【三、组件】的更多相关文章
- JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
- JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
- 【转载】BootStrap表格组件bootstrap table详解
(转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...
- Bootstrap Blazor 组件库 Row 布局组件(栅格系统)
原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...
- 详解Bootstrap缩略图组件及警示框组件
缩略图组件 缩略图在网站中最常用的就是产品列表页面,一行显示几张图片,有的在图片底下带有标题.描述内容.按钮等信息.bootstrap框架将这部分独立成一个模块组件,通过类名.thumbnail配合b ...
- 手机自动化测试:appium源码分析之bootstrap三
手机自动化测试:appium源码分析之bootstrap三 研究bootstrap源码,我们可以通过代码的结构,可以看出来appium的扩展思路和实现方式,从中可以添加我们自己要的功能,针对app ...
- BootStrap常用组件及响应式开发
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜 ...
- K8S(11)配置中心实战-单环境交付apollo三组件
k8s配置中心实战-交付apollo三组件 目录 k8s配置中心实战-交付apollo三组件 1 apollo简单说明 1.1 apollo最简架构图: 1.2 apollo组件部署关系 2 为app ...
- K8S(12)配置中心实战-多环境交付apollo三组件
k8s配置中心实战-多环境交付apollo三组件 目录 k8s配置中心实战-多环境交付apollo三组件 1.环境准备工作 1.1 zk环境拆分 1.2 namespace分环境 1.3 数据库拆分 ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
随机推荐
- MLN Alchemy
1. 前言: 本文主要参考Alchemy Tutorial, washington主页上挂出的所有Alchemy项目(包括Alchemy1.0, Alchemy2.0, AlchemyLite)都无法 ...
- 神经网络手写数字识别numpy实现
本文摘自Michael Nielsen的Neural Network and Deep Learning,该书的github网址为:https://github.com/mnielsen/neural ...
- Centos7 yum源配置及关闭防火墙
清理源 #yum clean all更新源缓存 #yum makecache更新源 #yum update 设置主机名: #hostnamectl set-hostname 查看防火墙状态 #syst ...
- YUV RGB 格式转换
第一个公式是RGB转YUV(范围0-255)时用的,第二个公式是用在YUV转换RGB(范围0-255)时用的.1. Y = ; U = -; V = ; 黑色:Y=16 ,U= V =128 红色:Y ...
- 软件测试工具LoadRunner常见问题二
1.一些Web虚拟用户脚本录制后立刻回放没有任何问题,但是当设置迭代次数大于1时,如果进行回放则只能成功迭代一次.为什么从第二次迭代开始发生错误? 这种现象多是由于在"Run-time Se ...
- 文件input框选择图片实时显示小技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- golang的time包:时间字符串和时间戳的相互转换
本博客转自: https://blog.csdn.net/mirage003/article/details/86073046 package main import ( "log" ...
- 主成分分析(PCA)与线性判别分析(LDA)
主成分分析 线性.非监督.全局的降维算法 PCA最大方差理论 出发点:在信号处理领域,信号具有较大方差,噪声具有较小方差 目标:最大化投影方差,让数据在主投影方向上方差最大 PCA的求解方法: 对样本 ...
- js函数(4)闭包
8.6闭包 背景:3.10 变量作用域 在函数体内,局部变量的优先级高于同名的全局变量.如果在函数内声明一个局部变量或者函数参数中带有的变量和全局变量重名,则局部变量会覆盖全局变量: 在全局作用域编写 ...
- #【Python】【基础知识】【模块】【Python的常用模块】
在IDE解释器中,执行help('modules')可查看当前环境可调用的Python模块: >>> help('modules') Please wait a moment whi ...