http://v2.bootcss.com/base-css.html#buttons
首先介绍下默认按钮:
任何赋予.btn类的页面元素都会显示按钮样式。不过,通常是用于更好的表现<a> 和 <button> 页面元素。
http://v2.bootcss.com/base-css.html#buttons
也可以添加如下例子中封装好的样式:
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<p><!--添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。-->
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
</p>
<p>
<button class="btn btn-danger" type="button">Default button</button>
<button class="btn" type="button">Default button</button>
</p>
<p>
<button class="btn btn-small btn-info" type="button">Small button</button>
<button class="btn btn-small" type="button">Small button</button>
</p>
<p>
<button class="btn btn-mini btn-success btn-block" type="button">Mini button</button><!--添加.btn-block类,可使按钮变为块级元素,同时会填充整个父级元素。-->
<button class="btn btn-mini" type="button">Mini button</button>
</p>
<!--给<a>元素添加.disabled类,颜色淡出50%,让按钮看起来无法点击。只是为了美观,你必须自己写JavaScript代码来禁止链接的行为。-->
<a href="#" class="btn btn-large disabled">disabled link</a>
<!--给<button>添加disabled属性。-->
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
<button type="button" class="btn btn-large" disabled>Button</button>
</body>
</html>
我们如果想深入研究可以查看bootstrap.css中对应封装的css样式是如何实现的。
- 大小: 193.8 KB
- 大小: 70 KB
分享到:
相关推荐
开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式文件bootstrap-switch.css 开关按钮样式...
一款基于Bootstrap的纯CSS3步骤条-箭头指向类按钮样式。该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮。
bootstrap-crystal-buttons水晶样式按钮集合,里面包含各种bootstrap的水晶样式按钮
纯CSS3 Bootstrap步骤箭头按钮样式 纯CSS3 Bootstrap步骤箭头按钮样式
正如Twitter架构师马克·奥托(Mark Otto)在Twitter开发者博客上所写的那样,“Bootstrap 使用了一些最新的Web 浏览器技术,向开发者提供了时尚的排版、样式、按钮、表格、网格、导航和一切所需的东西,而且它所占...
这是一款基于bootstrap的带图标的按钮样式。这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果。
这是一款简单的Bootstrap4按钮样式扩展库。该Bootstrap4按钮样式扩展库通过定义CSS,来为bootstrap 4原生按钮添加3D按钮,带图标的按钮,圆角按钮,以及为按钮添加更多的可用颜色,非常实用。
TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript,它的HTML结构和原生的Bootstrap checkbox组件结构基本相同,使用起来非常方便。它还提供了多种主题样式:IOS样式和...
这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮。
包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)….等等。一. 图标字体 bootstrap3提供了200多个免费图标字体。认为它是一个字。 arial-hidden=”true” .sr-only(只读) 1. 引入方法: ”...
CSS Bootstrap4按钮样式扩展库特效
基于bootstrap的单选按钮图标 改变了浏览器自带形状,支持自定义图标
----发票打印样式固定 ----水平菜单下拉位置问题已修复 HTML + Bootstrap 4 更新 ----自定义文件输入验证 UI 更新 ----更新了 shepherd JS 供应商文件以解决游览问题 固定的 ----导航栏主题切换按钮问题已解决 -...
这是一款扩展bootstrap4按钮特效。该特效在bootstrap4按钮样式的基础上,通过CSS样式,设计出一套带闪光按钮特效和扁平线框按钮特效。
基于bootstrap的双日期选择插件,资源包包括demo、js、css;使用方法类似My97;引入对应的js、css即可 参数说明: `startDate`: (Date object, moment object or string) 起始时间 `endDate`: (Date object, ...
使用Bootstrap或CSS设置Google表单的样式 关于 通过该库,您可以将Google Form嵌入网页中,并使用Bootstrap或CSS对其进行样式设置。 网络上有,向您展示如何编写自己HTML表单并将其链接到Google表单。 该库为您...
这是一款使用Font Awesome 字体图标来对Bootstrap复选框和单选按钮进行美化的CSS样式特效。
Rails :: Bootstrap :: Toggle :: Buttons 这款宝石旨在提供捆绑在简单宝石中的靴子。 安装 将此行添加到您的应用程序的Gemfile中... 简单的表单会在input type='checkbox'周围添加label ,并且还会添加一些自定义样式
按钮标签 在,<button>或input元素上使用按钮...link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--记录不同的