Bootstrap——按钮,按钮组,图片,文字,背景,下拉菜单
来源:互联网 发布:时间序列数据集下载 编辑:程序博客网 时间:2024/05/16 23:49
按钮
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮
按钮组
.btn-group
该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button></div>
.btn-toolbar
该 class 有助于把几组 <div class="btn-group">
结合到一个 <div class="btn-toolbar">
中,一般获得更复杂的组件。
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div></div>
.btn-group-lg, .btn-group-sm, .btn-group-xs
这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。
<div class="btn-group btn-group-lg">...</div><div class="btn-group btn-group-sm">...</div><div class="btn-group btn-group-xs">...</div>
.btn-group-vertical
该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。
<div class="btn-group-vertical">
图片
.img-rounded:添加 border-radius:6px 来获得图片圆角。
.img-circle:添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
文本(颜色,可用在p或者a标签等)
.text-muted(灰色)
.text-primary
.text-success
.text-info
.text-warning
.text-danger
背景
以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
其他
.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.text-hide 将页面元素所包含的文本内容替换为背景图(隐藏文字)
.caret 显示下拉式功能,<span class="caret"></span>
下拉功能键
<div class="container"> <h2>实例</h2> <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p> <p> .caret 类在按钮中使用:</p> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">一个链接</a></li> <li><a href="#">另一个链接 link</a></li> <li><a href="#">其他功能</a></li> </ul> </div></div>
下拉菜单
基本
.dropdown ——指定下拉菜单,下拉菜单都包裹在dropdown里
.dropdown-menu ——用于创建下拉菜单
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> </ul></div>
通过class dropdown-header向下拉菜单添加标题
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">下拉菜单标题</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li></ul>
向上下拉菜单
<div class="container"> <h2>向上下拉菜单</h2> <p>.dropup 类用于指定一个向上的下拉菜单。</p> <p>.dropdown-menu 类用于创建下拉菜单。</p> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">教程 <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li> </ul> </div></div>
.divider 类用于设置下拉菜单的分割线
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜鸟教程</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜鸟教程</a></li>
.disabled类用于设置下拉菜单中的禁用项
下拉菜单与按钮组组合使用
<div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</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> </ul> </div></div>
//将btn-group换成btn-group-vertical即可得到垂直的下拉菜单
分割的下拉菜单
<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> <span class="sr-only">切换下拉菜单</span> </button> <ul class="dropdown-menu" role="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>
- Bootstrap——按钮,按钮组,图片,文字,背景,下拉菜单
- Bootstrap—按钮下拉菜单
- 【14】Bootstrap — 按钮式下拉菜单
- bootstrap-按钮/按钮下拉菜单
- Bootstrap 按钮下拉菜单
- Bootstrap按钮下拉菜单
- Bootstrap按钮下拉菜单
- Bootstrap CSS——按钮式下拉菜单
- bootstrap——组件(三、按钮式下拉菜单)
- Bootstrap学习:按钮下拉菜单
- Bootstrap按钮式下拉菜单
- Bootstrap组件---下拉菜单,多级菜单 ,按钮
- bootstrap 学习笔记 - 5 (Glyphicons字体 + 下拉菜单 + 按钮组+ 按钮下拉菜单)
- bootstrap入门【组件之按钮组,下拉菜单,嵌套】
- bootstrap入门【按钮式下拉菜单,输入框组】
- bootstrap基础知识学习(下拉菜单+按钮)
- Bootstrap下拉菜单(Dropdowns)和按钮
- Bootstrap 字体图标和下拉菜单、按钮
- python量化分析系列之---5行代码实现1秒内获取一次所有股票的实时分笔数据
- Excel在统计分析中的应用—第八章—假设检验-两总体方差的假设检验
- Linux 自己写的几个比较简单的makefile
- 《Python数据分析常用手册》一、NumPy和Pandas篇
- PHP类的自动加载
- Bootstrap——按钮,按钮组,图片,文字,背景,下拉菜单
- Authorizer、PermissionResolver及RolePermissionResolver
- Java的注解机制——Spring自动装配的实现原理
- leetcode230:Kth Smallest Element in a BST
- Markdown特殊字符显示
- Linux系统下的20个常用命令(初)
- 强化学习资料
- spring 数据库事务管理
- 在ElasticSearch之下(图解搜索的故事)