Buttons are used widely in any website or app.
按钮在web应用中使用非常的广泛。
按钮类别(不同颜色传递不同信息)
<!DOCTYPE html> <html> <head> <title>Default buttons from Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- Standard button --> <!-- 标准按钮 --> <button type="button" class="btn btn-default">Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <!-- 基本样式 --> <button type="button" class="btn btn-primary">Primary</button> <!-- Indicates a successful or positive action --> <!-- 成功 --> <button type="button" class="btn btn-success">Success</button> <!-- Contextual button for informational alert messages --> <!-- 信息 --> <button type="button" class="btn btn-info">Info</button> <!-- Indicates caution should be taken with this action --> <!-- 警告 --> <button type="button" class="btn btn-warning">Warning</button> <!-- Indicates a dangerous or potentially negative action --> <!-- 危险 --> <button type="button" class="btn btn-danger">Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <!-- 削弱按钮:变成超链接样式 --> <button type="button" class="btn btn-link">Link</button> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
按钮大小
<!DOCTYPE html> <html> <head> <title>Default buttons from Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <!-- 大按钮 --> <button type="button" class="btn btn-primary btn-lg">Large button</button> <!-- 默认 --> <button type="button" class="btn btn-primary">Large button</button> <!-- 中号按钮 --> <button type="button" class="btn btn-primary btn-sm">Large button</button> <!-- 小号按钮 --> <button type="button" class="btn btn-primary btn-xs">Large button</button> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
将样式与大小进行组合来控制按钮的外观
<!-- 大小:大,样式:成功--> <button type="button" class="btn btn-primary btn-lg btn-success">Large button</button> <!-- 大小:默认,样式:消息--> <button type="button" class="btn btn-primary btn-info">Large button</button> <!-- 大小:小,样式:警告 --> <button type="button" class="btn btn-primary btn-sm btn-warning">Large button</button> <!-- 大小:超小,样式:危险 --> <button type="button" class="btn btn-primary btn-xs btn-danger">Large button</button>
与父容器等宽
To use the full width of the container within which the button is residing, Bootstrap 3 offers block button option.
使用按钮的block样式,让其与父容器等宽
<div class="container"> <div class="row"> <div class="col-lg-12"> <p> <button type="button" class="btn btn-primary btn-sm btn-block">Default small block level button</button> <button type="button" class="btn btn-default btn-lg btn-block">Default lg block level button</button> <button type="button" class="btn btn-primary btn-lg btn-block">Default lg block level button</button> <button type="button" class="btn btn-primary btn-xs btn-block">Default extra block level button</button> </p> </div> </div> </div>
禁用按钮
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">btn1</button> <button type="button" class="btn btn-primary" disabled="disabled">btn2</button> <button type="button" class="btn btn-primary btn-sm" disabled="disabled">btn3</button> <button type="button" class="btn btn-primary btn-xs" disabled="disabled">btn4</button>
将超链接变成按钮(保留链接功能),还可以设置为禁用,很强大噢!
role属性是为了提供更好的目标可达性
<a href="http://www.baidu.com" class="btn btn-default" role="button">Default</a> <a href="http://www.baidu.com" class="btn btn-primary disabled" role="button">Primary</a> <a href="http://www.baidu.com" class="btn btn-info" role="button">Info</a>
使用按钮样式实现Tag,很漂亮哈~
You may use button classes with button, a and input element to use buttons as tags. But it is recommended that you use it with button elements mostly. Otherwise it may cause cross browser inconsistency issues.
可以使用button样式做Tag
该样式建议多用于按钮元素,否则在不同浏览器下可能会发生问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Default buttons from Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="row"> <div class="col-lg-1"> <p> 默认样式 </p> <p> 使用button样式后 </p> </div> <div class="col-lg-1"> <p> <a href="#">Link</a> </p> <p> <a class="btn btn-success" href="#" role="button">Link</a> </p> </div> <div class="col-lg-1"> <p> <button type="submit">Button</button> </p> <p> <button class="btn btn-danger" type="submit">Button</button> </p> </div> <div class="col-lg-1"> <p> <input type="button" value="Input"> </p> <p> <input class="btn btn-danger" type="button" value="Input"> </p> </div> <div class="col-lg-1"> <p> <input type="submit" value="Submit"> </p> <p> <input class="btn btn-danger" type="submit" value="Submit"> </p> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
自定义按钮样式
<!-- 使用bootstrap提供的按钮样式 --> <button type="button" class="btn btn-default">Default</button> <!-- 自定义按钮样式 --> <button type="button" class="btn btn-my">Customized Button</button>
设置css背景
.btn-my { background: #cb60b3; /* Old browsers */ background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cb60b3),color-stop(50%, #ad1283), color-stop(100%, #de47ac) ); /* Chrome,Safari4+ */ background : -webkit-linear-gradient( top, #cb60b3 0%,#ad1283 50%, #de47ac 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* Opera 11.10+ */ background: -ms-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* IE10+ */ background: linear-gradient(to bottom, #cb60b3 0%, #ad1283 50%, #de47ac 100%);/* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3',endColorstr='#de47ac', GradientType=0 ); /* IE6-9 */ }
设置字体颜色
.btn-my{ color:#fff; }
将按钮变为圆形
.btn-my{ width: 200px; height: 200px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
最后,再添加鼠标悬停效果
.btn-my:hover { background: #BFEC3E; color:#e75616; }
相关推荐
2. **预定义组件**:Bootstrap提供了丰富的预构建组件,如导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、按钮组(button group)、卡片(card)等,这些组件简化了网页的开发过程。 3. **CSS样式**:...
3. 配置导出插件:通过JavaScript设置导出的格式、按钮样式、导出前后的回调函数等。 4. 添加导出按钮:在表格上方或下方添加一个触发导出操作的按钮,通过事件监听来调用导出方法。 例如,使用Bootstrap的HTML结构...
- **按钮组**(Button Group)和**下拉菜单**(Dropdown):提供了将多个按钮或下拉菜单组合在一起的布局。 - **轮播图**(Carousel):可以创建滑动展示多张图片或内容的组件。 - **表单**(Forms):预设了表单...
1. **模板标签**: 提供了丰富的Django模板标签,可以轻松插入Bootstrap元素,如`bootstrap_form`用于渲染表单,`bootstrap_button`生成按钮等。 2. **自定义配置**: 开发者可以配置全局Bootstrap主题,包括字体、...
3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...
这些CSS文件定义了Bootstrap的所有样式,包括栅格系统、排版、表单、按钮、导航、警告提示、模态框等,使得开发者可以快速构建出美观且一致的用户界面。 2. **Fonts**: - `fonts`目录包含了 Glyphicons 字体图标...
2. **按钮和按钮组**:提供不同大小、颜色和样式的按钮,以及按钮组(Button Groups)和按钮下拉(Button Dropdowns),便于用户进行操作。 3. **表单**:包括输入框、选择框、复选框、单选按钮、提交按钮等,可以...
Bootstrap 4切换Bootstrap 4 Toggle是一个Bootstrap插件/小部件,可将复选框转换为切换。图书馆分布项目描述支持bootstrap4(需要jQuery)支持bootstrap4 +(ES6类,没有依赖项)支持bootstrap4 +(React组件,没有...
3. **JavaScript 事件处理**:关键的逻辑部分是使用JavaScript(通常使用jQuery,因为Bootstrap经常与jQuery一起使用)来监听关闭按钮的点击事件。当用户点击关闭按钮时,需要执行以下操作: - 移除对应的Tab导航项...
Bootstrap Toggle Buttons是一款基于Bootstrap框架的插件,用于创建美观、交互性强的切换按钮。这款插件使得在网页设计中添加开关、选项等控制元素变得更加简便。Bootstrap Toggle Buttons提供了丰富的自定义选项,...
在这个"bootstrap-crystal-buttons"资源中,我们聚焦于Bootstrap的按钮(button)组件,特别是一种被称为“水晶样式”的独特设计。 水晶样式按钮集合是针对Bootstrap按钮进行的一种美化处理,它为标准的Bootstrap...
3. **利用Material Design组件**:Bootstrap-Material-Design提供了诸如涟漪效应(Ripple Effect)、浮动动作按钮(Floating Action Button)、抽屉式导航(Drawer Navigation)等Material Design特有的组件。...
8. **布局和组件**:Bootstrap-WPF 样式支持常见的 Bootstrap 组件,如卡片(Card)、网格系统(Grid)、导航条(Navbar)、按钮(Button)、表单(Form)等。开发者可以直接在 WPF 应用程序中使用这些组件,以快速...
2. **CSS3组件**:Bootstrap包含一系列预先设计的CSS3组件,如导航条(navbar)、按钮(button)、表单(form)、警告框(alert)、卡片(card)、轮播(carousel)等,这些组件极大地简化了网页设计工作。...
纯清除按钮Bootstrap + JQuery,输入清除按钮入门在您的项目中加载脚本。 < script src =" jquery.bootstrap-pureClearButton.js " > </ script > 将data-pure-clear-button属性添加到您的文本字段。 &...
4. **组件**:Bootstrap 提供了一系列可重用的UI组件,如导航条(Navbar)、下拉菜单(Dropdowns)、按钮组(Button Groups)、轮播(Carousel)、警告提示(Alerts)、模态框(Modals)、缩略图(Thumbnails)、...
2. **预定义的组件**:Bootstrap提供了许多预先设计的UI组件,如导航条(navbar)、按钮(button)、表单(form)、下拉菜单(dropdown)、模态框(modal)、警告提示(alert)、轮播(carousel)等,这些组件大大...
在这个特定的资源中,我们关注的是"Bootstrap带图标的按钮样式",这是一种利用Bootstrap基础按钮类并结合CSS3技术来创建带有图标且具有交互效果的按钮。 首先,Bootstrap按钮的基础样式是通过其预定义的CSS类实现的...
4. **按钮(Buttons)和按钮组(Button Groups)**:Bootstrap3提供了预定义的样式来创建各种大小和颜色的按钮,也可以组合成按钮组,为用户提供单选或复选选项。 5. **表单控件**:Bootstrap3对HTML表单进行了美化...
Bootstrap 3.3.2提供了丰富的UI组件,包括导航栏(Navbar)、按钮(Buttons)、按钮组(Button Groups)、表单(Forms)、输入框(Input Groups)、表(Tables)、警告提示(Alerts)、进度条(Progress Bars)、...