Bootstrap按钮
来源:互联网 发布:三国志11水浒武将数据 编辑:程序博客网 时间:2024/04/29 16:07
Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:
以下样式可用于<a>, <button>, 或 <input> 元素上:
首先看下不同颜色的按钮:
<html lang="en"><head><!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码--><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="Keywords" content="关键词一,关键词二"><meta name="Description" content="网站描述内容"><meta name="Author" content="Yvette Lau"><meta name = "viewport" content = " width = device-width, initial-scale = 1 "><title>BootstrapDemo</title><!--css js 文件的引入--><link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"></head><body style="padding: 20px;"><!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><!-- 用于要弹出信息的按钮 --><button type="button" class="btn btn-info">信息按钮</button><!-- 表示应谨慎操作的动作 --><button type="button" class="btn btn-warning">警告按钮</button><!-- 表示一个危险动作的按钮 --><button type="button" class="btn btn-danger">危险按钮</button><!-- 让按钮看起来像一个链接,但同时保持按钮的行为 --><button type="button" class="btn btn-link">链接按钮</button></body></html>
效果:
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。
按钮大小
鉴于head部分都是相同的,只列出Body的内容。
<body style="padding: 20px;width:500px;"><!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><button type="button" class="btn btn-lg btn-default">大的默认按钮</button><br/><br/><!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><button type="button" class="btn btn-sm btn-primary">小的原始按钮</button><br/><br/><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button><br/><br/><!-- 用于要弹出信息的按钮 --><button type="button" class="btn btn-info">信息按钮</button><br/><br/><button type="button" class="btn btn-block btn-info">块级信息按钮</button></body>
效果如下所示:
按钮状态
按钮分为active和disabled两种状态、
激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。
禁用状态:按钮颜色会变淡 50%,并失去渐变
看具体的例子:
<body style="padding: 20px;width:500px;"><!-- 标准的按钮 --><button type="button" class="btn btn-default">默认按钮</button><button type="button" class="btn btn-default active">激活的默认按钮</button><br/><br/><!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><button type="button" class="btn btn-primary active">激活的原始按钮</button><br/><br/><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><button type="button" class="btn btn-success active">激活的成功按钮</button><br/><br/><!-- 用于要弹出信息的按钮 --><button type="button" class="btn btn-info">信息按钮</button><button type="button" class="btn btn-info active">激活的信息按钮</button><br/><br/><button type="button" class="btn btn-default">默认按钮</button><button type="button" class="btn btn-default disabled">禁用的默认按钮</button><br/><br/><!-- 提供额外的视觉效果,标识一组按钮中的原始动作 --><button type="button" class="btn btn-primary">原始按钮</button><button type="button" class="btn btn-primary disabled">禁用的原始按钮</button><br/><br/><!-- 表示一个成功的或积极的动作 --><button type="button" class="btn btn-success">成功按钮</button><button type="button" class="btn btn-success disabled">禁用的成功按钮</button><br/><br/><!-- 用于要弹出信息的按钮 --><button type="button" class="btn btn-info">信息按钮</button><button type="button" class="btn btn-info disabled">禁用的信息按钮</button></body>
按钮标签
a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用Button标签。
<body style="padding: 20px;"><a class="btn btn-default" href="#" role="button">超链接按钮</a><button class="btn btn-default btn-primary" type="submit">button按钮</button><input class="btn btn-default btn-success" type="button" value="input按钮"><input class="btn btn-default btn-info" type="submit" value="submit按钮"></body>
1 0
- Bootstrap按钮
- Bootstrap按钮
- BootStrap 按钮
- Bootstrap按钮
- Bootstrap按钮
- bootstrap按钮
- Bootstrap按钮
- Bootstrap按钮
- BootStrap 按钮
- Bootstrap 按钮
- Bootstrap 按钮
- Bootstrap 按钮
- Bootstrap按钮
- Bootstrap 按钮
- bootstrap 按钮
- bootstrap-按钮/按钮下拉菜单
- bootstrap按钮和图像
- BootStrap中的按钮使用
- 笨方法学Python(21-25)
- 二分+线段树 Codeforces609F Frogs and mosquitoes
- hdu 4003 Find Metal Mineral 树形DP:树形背包 ★ 好题
- java的增、删、改、查与及批量增加
- 手把手教你学单片机--51单片机C语言开发
- Bootstrap按钮
- 科技与社会
- PS制作水彩效果头像
- 视频码率(Bitrate), 帧率(FPS)和分辨率的联系与区别
- 程序媛之路
- iOS开发之隐藏键盘的方法总结
- VB.NET下完美解决datagridview KeyPress 无响应问题
- 推荐40首非常有节奏感的英文歌
- nginx模块开发-在handle函数中获取页面请求的参数