`

Bootstrap button group

 
阅读更多

1.1 按钮组(button group)

         按钮组顾名思义是将多个按钮集合成一个页面部件。只需要使用btn-group类和一系列的<a>或者<button>标签,就可以轻易地生成一个按钮组或者按钮工具条。关于btn-group的编程实践上:

  •  建议在单一的按钮组中不要混合使用<a>和<button>标签,只用它们其中一个。
  • 同一按钮组最好使用单一色
  • 使用图标的时候要确保正确的引用位置

        按钮组和按钮工具条都非常容易实现,如图3-1所示:

 

 <div class="span4 well pricehover">
                       <h2>按钮组</h2>
      <div class="btn-group" style="margin: 9px 0;">
          <button class="btn btn-large btn-primary">Left</button>
          <button class="btn btn-large btn-primary">Middle</button>
          <button class="btn btn-large btn-primary">Right</button>
        </div>

        </div>
<div class="span4 well pricehover">
<h2>按钮工具条</h2>
    <div class="btn-toolbar">
        <div class="btn-group">
          <button class="btn">1</button>
          <button class="btn">2</button>
          <button class="btn">3</button>
          <button class="btn">4</button>
        </div>
        <div class="btn-group">
          <button class="btn">5</button>
          <button class="btn">6</button>
          <button class="btn">7</button>
        </div>
        <div class="btn-group">
          <button class="btn">8</button>
        </div>
      </div>
        </div>

 

分享到:
评论

相关推荐

    group buttom_bootstrap_

    在“Lesson 5 Bootstrap Group Button”中,我们将深入探讨如何利用Bootstrap来创建按钮组,这是一个非常实用的功能,可以帮助我们更好地组织和展示一系列相关的按钮。 在Bootstrap中,按钮组(Button Group)是一...

    bootstrap文件及bootstrap图标大全

    在这个文件中,开发者可以看到如何在实际项目中应用Bootstrap的类和方法,例如如何添加导航栏(Navbar)、按钮组(Button Group)、表单(Forms)、网格系统(Grid System)等,并且可以浏览和测试所有可用的...

    unigui Bootstrap按钮分组

    本文将深入探讨如何在Unigui中使用Bootstrap按钮分组(Button Group)这一功能。 Bootstrap按钮分组是一种将多个按钮排列在一起,形成一个单元的布局方式,这在很多场景下非常实用,比如在表单提交、导航选项或者...

    bootstrap-3.3.7.zip

    按钮组(Button Group)则用于将多个按钮排列在一起,形成一个整体。 5. **下拉菜单**:Bootstrap的下拉菜单(Dropdown)组件常用于导航栏,可以提供多级选项,节省页面空间。 6. **模态框**(Modal):模态框是一...

    bootstrap-5.1.3-dist.zip

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

    Bootstrap4中文整理版文本

    16. “混合组件”如按钮组(Button Group)和下拉按钮(Dropdowns)是将多个按钮或者下拉菜单组合起来形成的功能区。 17. “折叠面板(Collapse)”和“轮播效果(Carousel)”则展示了如何实现一些常见的网页动态...

    bootstrap下拉列表与输入框组结合的样式调整

    Bootstrap是世界上最流行的前端开发框架之一,它提供了一系列预先设计的组件,可以帮助开发者快速构建响应式和用户友好的网页。在Bootstrap中,输入框组(Input Groups)和下拉列表(Dropdowns)是两个常用的功能,...

    使用bootstrap实现多选下拉框

    &lt;button class="btn btn-primary" onclick="showSelected()"&gt;查看已选&lt;/button&gt; function showSelected() { var selectedOptions = $('#exampleSelectMultiple').val(); alert('已选择:' + selectedOptions....

    Bootstrap实现弹性搜索框

    `&lt;span class="input-group-addon"&gt;`则用来包裹提交按钮,按钮中的`&lt;span class="glyphicon glyphicon-search"&gt;`是Bootstrap内置的 Glyphicons 图标,用于表示搜索功能。 为了实现搜索框的弹性效果,我们需要自定义...

    bootstrap总结与例子

    6. **按钮组** (`button group`): `.btn-group` 类可以将多个按钮组合在一起,形成一个单元,支持单选和多选功能。 7. **表单控件** (`form controls`): Bootstrap提供了 `.form-control` 类,用于美化输入框、选择...

    BootStrapDemo.rar

    Bootstrap的JS组件丰富多样,如模态框(Modal)、下拉菜单(Dropdown)、导航条(Navbar)、轮播(Carousel)、按钮组(Button Group)、表单(Forms)等,这些组件大大节省了开发者的时间,提高了开发效率。...

    bootstrap-3.4.1-dist 2.zip

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

    bootstrap 网页后台框架

    例如,模态框(Modal)、下拉菜单(Dropdown)、导航条(Navbar)、轮播图(Carousel)和按钮组(Button Group)等,这些交互式的组件大大增强了用户体验。它们都基于jQuery库,因此开发者无需从零开始编写复杂的...

    bootstrap-2.2.2中文版

    4. **组件**:如导航条(navbar)、按钮组(button group)、下拉菜单(dropdown)、警告框(alert)、页签(tab)、轮播(carousel)、模态框(modal)等,这些都是网页开发中的常用元素。 5. **表单**:Bootstrap...

    bootstrap-3.3.7-dist.zip

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

    bootStrap3及jquery、离线文档.zip

    2. **预定义的组件**:框架内包含多种预设计的UI组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播(carousel)、按钮组(button group)等,这些组件都经过优化,易于使用和自定义。...

    超绚丽的 Bootstrap 水晶样式按钮集合

    除了单个按钮,Bootstrap 还允许创建按钮组(Button Group)和下拉菜单(Dropdown),这些组合形式同样可以应用水晶样式,增加页面的交互性和多样性。 8. **应用场景**: 水晶样式按钮适用于各种类型的网站和应用...

    bootstrap 帮助文档3.3.7

    按钮组(Button Group)则可以将多个按钮组合在一起,提供更统一的视觉效果。 4. **表单**:Bootstrap的表单组件提供了预定义的样式,使得表单元素如输入框、选择器、复选框、单选按钮等看起来更加一致。表单控件如...

    Bootstrap3.2.2

    5. **组件**:Bootstrap3.2.2提供了丰富的组件,如导航栏(Navbar)、按钮组(Button Group)、下拉菜单(Dropdown)、警告(Alert)、表格(Table)、图像(Image)、媒体对象(Media Object)等,这些组件为创建...

    最新的MetroNic_1.5.4 bootstrap3.0.2模版

    New: Input Group, Icon Input, Markdown Input Validation Samples Enhancement: Button Dropdown Menu With Multilevel Submenu Enhancement: Bootstrap Switch Samples with Long Text Update: Font Awesome ...

Global site tag (gtag.js) - Google Analytics