来源:http://www.cnblogs.com/ventlam/archive/2012/05/29/2520807.html
按钮(Buttons).Bootstrap提供多种样式的按钮,同样是通过CSS的类来控制,包括btn, btn-primary, btn-info,btn-success等不同颜色的按钮,亦可以简单通过.btn-large .btn-mini等CSS的class控制按钮大小,能够同时用在<a>,<button>,<input>标签上,非常简单易用。如图2-6所示,不同颜色的按钮:
图2-6 按钮(Buttons)
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Button</th>
<th>class=""</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn" href="#">Default</button></td>
<td><code>btn</code></td>
<td>Standard gray button with gradient</td>
</tr>
<tr>
<td><button class="btn btn-primary" href="#">Primary</button></td>
<td><code>btn btn-primary</code></td>
<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
</tr>
<tr>
<td><button class="btn btn-info" href="#">Info</button></td>
<td><code>btn btn-info</code></td>
<td>Used as an alternative to the default styles</td>
</tr>
<tr>
<td><button class="btn btn-success" href="#">Success</button></td>
<td><code>btn btn-success</code></td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td><button class="btn btn-warning" href="#">Warning</button></td>
<td><code>btn btn-warning</code></td>
<td>Indicates caution should be taken with this action</td>
</tr>
<tr>
<td><button class="btn btn-danger" href="#">Danger</button></td>
<td><code>btn btn-danger</code></td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
<tr>
<td><button class="btn btn-inverse" href="#">Inverse</button></td>
<td><code>btn btn-inverse</code></td>
<td>Alternate dark gray button, not tied to a semantic action or use</td>
</tr>
</tbody>
</table>
分享到:
相关推荐
<button onclick="tableExport()">导出表格</button> ``` 然后在JavaScript中进行配置: ```javascript $(function() { $('#myTable').bootstrapTable(); TableExport(document.getElementById('myTable'), { ...
2. **预定义组件**:Bootstrap提供了丰富的预构建组件,如导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、按钮组(button group)、卡片(card)等,这些组件简化了网页的开发过程。 3. **CSS样式**:...
例如,`<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>`会触发一个模态框的显示。 5. **资源达人分享计划**: - 这个标签可能意味着这个压缩包...
3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...
这包括一个`<ul>`元素作为Tab导航,每个`<li>`元素代表一个Tab,`<a>`元素用于链接到对应的Tab内容,以及一个可选的`<button>`元素作为关闭按钮。 2. **CSS 样式**:为了美观,我们可能需要定制CSS样式,使关闭按钮...
- **按钮组**(Button Group)和**下拉菜单**(Dropdown):提供了将多个按钮或下拉菜单组合在一起的布局。 - **轮播图**(Carousel):可以创建滑动展示多张图片或内容的组件。 - **表单**(Forms):预设了表单...
8. **布局和组件**:Bootstrap-WPF 样式支持常见的 Bootstrap 组件,如卡片(Card)、网格系统(Grid)、导航条(Navbar)、按钮(Button)、表单(Form)等。开发者可以直接在 WPF 应用程序中使用这些组件,以快速...
而"awesome-bootstrap-checkbox"则是一个专门针对Bootstrap的增强型插件,旨在提升其内置的复选框(checkbox)和单选按钮(radio button)的视觉效果和用户体验。 这个项目的核心在于利用纯CSS技术来改造默认的HTML...
"bootstrap-filestyle"是一个专门针对Bootstrap的插件,它使得在Bootstrap环境中定制上传文件输入框的样式变得更加简单。这个插件的目标是解决在Bootstrap框架下,文件上传控件样式不统一,无法完美融入整体设计的...
Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。"bootstrap-dropdown.js" 是Bootstrap框架中的一个重要组件,它主要用于实现下拉菜单功能。在Bootstrap的JavaScript插件集合中...
Bootstrap 3.3.2提供了丰富的UI组件,包括导航栏(Navbar)、按钮(Buttons)、按钮组(Button Groups)、表单(Forms)、输入框(Input Groups)、表(Tables)、警告提示(Alerts)、进度条(Progress Bars)、...
2. **预定义的组件**:Bootstrap提供了许多预先设计的UI组件,如导航条(navbar)、按钮(button)、表单(form)、下拉菜单(dropdown)、模态框(modal)、警告提示(alert)、轮播(carousel)等,这些组件大大...
Bootstrap Toggle Buttons是一款基于Bootstrap框架的插件,用于创建美观、交互性强的切换按钮。这款插件使得在网页设计中添加开关、选项等控制元素变得更加简便。Bootstrap Toggle Buttons提供了丰富的自定义选项,...
4. **组件**:Bootstrap 提供了一系列可重用的UI组件,如导航条(Navbar)、下拉菜单(Dropdowns)、按钮组(Button Groups)、轮播(Carousel)、警告提示(Alerts)、模态框(Modals)、缩略图(Thumbnails)、...
3. **利用Material Design组件**:Bootstrap-Material-Design提供了诸如涟漪效应(Ripple Effect)、浮动动作按钮(Floating Action Button)、抽屉式导航(Drawer Navigation)等Material Design特有的组件。...
Bootstrap Datepicker是一款流行的JavaScript插件,它为网页应用提供了优雅的日期选择功能,支持多种配置选项,如年、月、日的选择,以及日期范围选择等。在实际开发中,我们经常需要实现用户能够通过点击按钮来清空...
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 主菜单项 <div class="dropdown-menu" aria-...
10. **按钮**: 有多种大小、颜色和样式可供选择,同时支持按钮组(Button Group)和按钮下拉(Button Dropdown)。 11. **导航**: 包括导航条(Navbar)、面包屑(Breadcrumbs)、分页(Pagination)、标签页(Tab...
2. **预定义的组件**:Bootstrap提供了一系列预先设计的UI组件,如导航条(navbar)、按钮(button)、表单(form)、模态框(modal)、下拉菜单(dropdown)、警告提示(alert)、轮播(carousel)等,这些组件大大...