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>
分享到:
相关推荐
在“Lesson 5 Bootstrap Group Button”中,我们将深入探讨如何利用Bootstrap来创建按钮组,这是一个非常实用的功能,可以帮助我们更好地组织和展示一系列相关的按钮。 在Bootstrap中,按钮组(Button Group)是一...
在这个文件中,开发者可以看到如何在实际项目中应用Bootstrap的类和方法,例如如何添加导航栏(Navbar)、按钮组(Button Group)、表单(Forms)、网格系统(Grid System)等,并且可以浏览和测试所有可用的...
本文将深入探讨如何在Unigui中使用Bootstrap按钮分组(Button Group)这一功能。 Bootstrap按钮分组是一种将多个按钮排列在一起,形成一个单元的布局方式,这在很多场景下非常实用,比如在表单提交、导航选项或者...
按钮组(Button Group)则用于将多个按钮排列在一起,形成一个整体。 5. **下拉菜单**:Bootstrap的下拉菜单(Dropdown)组件常用于导航栏,可以提供多级选项,节省页面空间。 6. **模态框**(Modal):模态框是一...
2. **预定义组件**:Bootstrap提供了丰富的预构建组件,如导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、按钮组(button group)、卡片(card)等,这些组件简化了网页的开发过程。 3. **CSS样式**:...
16. “混合组件”如按钮组(Button Group)和下拉按钮(Dropdowns)是将多个按钮或者下拉菜单组合起来形成的功能区。 17. “折叠面板(Collapse)”和“轮播效果(Carousel)”则展示了如何实现一些常见的网页动态...
Bootstrap是世界上最流行的前端开发框架之一,它提供了一系列预先设计的组件,可以帮助开发者快速构建响应式和用户友好的网页。在Bootstrap中,输入框组(Input Groups)和下拉列表(Dropdowns)是两个常用的功能,...
<button class="btn btn-primary" onclick="showSelected()">查看已选</button> function showSelected() { var selectedOptions = $('#exampleSelectMultiple').val(); alert('已选择:' + selectedOptions....
`<span class="input-group-addon">`则用来包裹提交按钮,按钮中的`<span class="glyphicon glyphicon-search">`是Bootstrap内置的 Glyphicons 图标,用于表示搜索功能。 为了实现搜索框的弹性效果,我们需要自定义...
6. **按钮组** (`button group`): `.btn-group` 类可以将多个按钮组合在一起,形成一个单元,支持单选和多选功能。 7. **表单控件** (`form controls`): Bootstrap提供了 `.form-control` 类,用于美化输入框、选择...
Bootstrap的JS组件丰富多样,如模态框(Modal)、下拉菜单(Dropdown)、导航条(Navbar)、轮播(Carousel)、按钮组(Button Group)、表单(Forms)等,这些组件大大节省了开发者的时间,提高了开发效率。...
3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...
例如,模态框(Modal)、下拉菜单(Dropdown)、导航条(Navbar)、轮播图(Carousel)和按钮组(Button Group)等,这些交互式的组件大大增强了用户体验。它们都基于jQuery库,因此开发者无需从零开始编写复杂的...
4. **组件**:如导航条(navbar)、按钮组(button group)、下拉菜单(dropdown)、警告框(alert)、页签(tab)、轮播(carousel)、模态框(modal)等,这些都是网页开发中的常用元素。 5. **表单**:Bootstrap...
- **按钮组**(Button Group)和**下拉菜单**(Dropdown):提供了将多个按钮或下拉菜单组合在一起的布局。 - **轮播图**(Carousel):可以创建滑动展示多张图片或内容的组件。 - **表单**(Forms):预设了表单...
2. **预定义的组件**:框架内包含多种预设计的UI组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播(carousel)、按钮组(button group)等,这些组件都经过优化,易于使用和自定义。...
除了单个按钮,Bootstrap 还允许创建按钮组(Button Group)和下拉菜单(Dropdown),这些组合形式同样可以应用水晶样式,增加页面的交互性和多样性。 8. **应用场景**: 水晶样式按钮适用于各种类型的网站和应用...
按钮组(Button Group)则可以将多个按钮组合在一起,提供更统一的视觉效果。 4. **表单**:Bootstrap的表单组件提供了预定义的样式,使得表单元素如输入框、选择器、复选框、单选按钮等看起来更加一致。表单控件如...
5. **组件**:Bootstrap3.2.2提供了丰富的组件,如导航栏(Navbar)、按钮组(Button Group)、下拉菜单(Dropdown)、警告(Alert)、表格(Table)、图像(Image)、媒体对象(Media Object)等,这些组件为创建...
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 ...