`

Bootstrap-button

 
阅读更多

来源: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>

 

 

分享到:
评论

相关推荐

    bootstrap-table-export.js和tableExport.js

    &lt;button onclick="tableExport()"&gt;导出表格&lt;/button&gt; ``` 然后在JavaScript中进行配置: ```javascript $(function() { $('#myTable').bootstrapTable(); TableExport(document.getElementById('myTable'), { ...

    bootstrap-5.1.3-dist.zip

    2. **预定义组件**:Bootstrap提供了丰富的预构建组件,如导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、按钮组(button group)、卡片(card)等,这些组件简化了网页的开发过程。 3. **CSS样式**:...

    bootstrap-3.3.7-dist

    例如,`&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;打开模态框&lt;/button&gt;`会触发一个模态框的显示。 5. **资源达人分享计划**: - 这个标签可能意味着这个压缩包...

    bootstrap-3.4.1-dist 2.zip

    3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...

    bootstrap-closable-tab tab可关闭组件

    这包括一个`&lt;ul&gt;`元素作为Tab导航,每个`&lt;li&gt;`元素代表一个Tab,`&lt;a&gt;`元素用于链接到对应的Tab内容,以及一个可选的`&lt;button&gt;`元素作为关闭按钮。 2. **CSS 样式**:为了美观,我们可能需要定制CSS样式,使关闭按钮...

    bootstrap-3.3.7-dist.zip

    - **按钮组**(Button Group)和**下拉菜单**(Dropdown):提供了将多个按钮或下拉菜单组合在一起的布局。 - **轮播图**(Carousel):可以创建滑动展示多张图片或内容的组件。 - **表单**(Forms):预设了表单...

    bootstrap-wpf-style-master 样式

    8. **布局和组件**:Bootstrap-WPF 样式支持常见的 Bootstrap 组件,如卡片(Card)、网格系统(Grid)、导航条(Navbar)、按钮(Button)、表单(Form)等。开发者可以直接在 WPF 应用程序中使用这些组件,以快速...

    前端项目-awesome-bootstrap-checkbox.zip

    而"awesome-bootstrap-checkbox"则是一个专门针对Bootstrap的增强型插件,旨在提升其内置的复选框(checkbox)和单选按钮(radio button)的视觉效果和用户体验。 这个项目的核心在于利用纯CSS技术来改造默认的HTML...

    前端项目-bootstrap-filestyle.zip

    "bootstrap-filestyle"是一个专门针对Bootstrap的插件,它使得在Bootstrap环境中定制上传文件输入框的样式变得更加简单。这个插件的目标是解决在Bootstrap框架下,文件上传控件样式不统一,无法完美融入整体设计的...

    bootstrap-dropdown.js

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于构建响应式、移动优先的网页项目。"bootstrap-dropdown.js" 是Bootstrap框架中的一个重要组件,它主要用于实现下拉菜单功能。在Bootstrap的JavaScript插件集合中...

    bootstrap-3.3.2-dist

    Bootstrap 3.3.2提供了丰富的UI组件,包括导航栏(Navbar)、按钮(Buttons)、按钮组(Button Groups)、表单(Forms)、输入框(Input Groups)、表(Tables)、警告提示(Alerts)、进度条(Progress Bars)、...

    bootstrap-3.3.4-dist

    2. **预定义的组件**:Bootstrap提供了许多预先设计的UI组件,如导航条(navbar)、按钮(button)、表单(form)、下拉菜单(dropdown)、模态框(modal)、警告提示(alert)、轮播(carousel)等,这些组件大大...

    bootstrap-toggle-buttons

    Bootstrap Toggle Buttons是一款基于Bootstrap框架的插件,用于创建美观、交互性强的切换按钮。这款插件使得在网页设计中添加开关、选项等控制元素变得更加简便。Bootstrap Toggle Buttons提供了丰富的自定义选项,...

    bootstrap-3.3.0-dist

    4. **组件**:Bootstrap 提供了一系列可重用的UI组件,如导航条(Navbar)、下拉菜单(Dropdowns)、按钮组(Button Groups)、轮播(Carousel)、警告提示(Alerts)、模态框(Modals)、缩略图(Thumbnails)、...

    用bootstrap实现的material-design设计

    3. **利用Material Design组件**:Bootstrap-Material-Design提供了诸如涟漪效应(Ripple Effect)、浮动动作按钮(Floating Action Button)、抽屉式导航(Drawer Navigation)等Material Design特有的组件。...

    bootstrap-datepicker实现年、月、日控件重置

    Bootstrap Datepicker是一款流行的JavaScript插件,它为网页应用提供了优雅的日期选择功能,支持多种配置选项,如年、月、日的选择,以及日期范围选择等。在实际开发中,我们经常需要实现用户能够通过点击按钮来清空...

    Bootstrap-submenup.zip

    &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt; 主菜单项 &lt;div class="dropdown-menu" aria-...

    bootstrap-3.4.1-dist.zip

    10. **按钮**: 有多种大小、颜色和样式可供选择,同时支持按钮组(Button Group)和按钮下拉(Button Dropdown)。 11. **导航**: 包括导航条(Navbar)、面包屑(Breadcrumbs)、分页(Pagination)、标签页(Tab...

    bootstrap-3.4.1.zip

    2. **预定义的组件**:Bootstrap提供了一系列预先设计的UI组件,如导航条(navbar)、按钮(button)、表单(form)、模态框(modal)、下拉菜单(dropdown)、警告提示(alert)、轮播(carousel)等,这些组件大大...

Global site tag (gtag.js) - Google Analytics